SL-Input and Aurelia

[ungerschwab]

I'm aware that Shoelace isn't formally supported in Aurelia, but I'm currently investigating to see if I can create a PoC to get it working in my existing Aurelia application.

However, I've run into a problem that I think is solvable. When I build out the control (specifically an input) for an Aurelia viewmodel, I run into a null reference error on the front end. Here's the stack trace:

chunk.2AIXAFCV.js:176 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'blur')
    at SlInput.blur (chunk.2AIXAFCV.js:176:16)
    at Focus._apply (aurelia-core.js?v=24.1.0.0:18521:22)
    at Focus.attached (aurelia-core.js?v=24.1.0.0:18529:14)
    at Controller.attached (aurelia-core.js?v=24.1.0.0:14121:24)
    at View.attached (aurelia-core.js?v=24.1.0.0:12134:24)
    at ViewSlot.add (aurelia-core.js?v=24.1.0.0:12297:14)
    at aurelia-core.js?v=24.1.0.0:15152:49
    at _with (aurelia-core.js?v=24.1.0.0:15124:93)
    at CompositionEngine._swap (aurelia-core.js?v=24.1.0.0:15151:14)
    at aurelia-core.js?v=24.1.0.0:15180:24

Here's the shoelace model:

<template>
  <div class="ux-flex-group" ref="view">
    <div class="ux-flex-container" data-align.bind="_CheckBoxAlignment">
      <label class="${_isToggleButton === true ? 'ux-toggle' : 'ux-flex-item ux-flex-align-items--stretch ux-flex-size--auto'}">
        <sl-input class="ux-form-checkbox ${_isToggleButton === true ? 'ux-toggle-btn' : ''}"
               id.bind="_CheckBoxId"
               type="checkbox"
               checked.bind="_isCheckBoxChecked"
               show.bind="_isCheckBoxVisible"
               disabled.bind="_isCheckBoxEnabled === false"
               focus.bind="_CheckBoxHasFocus"
               indeterminate.bind="isCheckBoxIndeterminate"
               tabindex.bind="_CheckBoxTabIndex"
               click.capture="onClick($this, $event)"
               keydown.trigger="onKeyDown($this, $event)"
               change.capture="onChange($this, $event)"
               data-featureId.bind="analyticsFeatureId"></sl-input>
        <label if.bind="_isToggleButton === true && _showSelectedValueText === true" for.bind="_CheckBoxId" class="ux-toggle-label" textcontent.bind="_selectedValueText"></label>
      </label>
      <label if.bind="_showSelectedValueText && (_isToggleButton === false)" for.bind="_CheckBoxId" class="ux-flex-item ux-flex-align-items--center ux-flex-size--auto" textcontent.bind="_selectedValueText"></label>
    </div> 
  </div>
</template>

What's happening is that when Aurelia goes to bind the handlers, the input doesn't seem like it's been created fully, so when the Aurelia binding fires:

Focus.prototype._apply = function _apply() {
  var _this = this;

  if (this.value) {
    this.taskQueue.queueMicroTask(function () {
      if (_this.value) {
        _this.element.focus();
      }
    });
  } else {
    this.element.blur();  // ⬅️ this is the code path we're following
  }
};

it correctly calls the shoelace blur() method on the element. but the shoelace handler for SlInput blows up because the element doesn't have any data for its .input property:

/** Removes focus from the input. */
blur() {
  this.input.blur();  // 💥Ka-Blam💥, this.input is null
}

How can I circumvent this problem to ensure that the bindings all fire when they should? Do I need to build a promise into the model somewhere?

[KonnorRogers]

This is a result of the shadow-dom not being fully rendered. Ideally you would want to do this:

else {
await this.element.updateComplete
this.element.blur(); 
}

I'm not overly familiar with the timings of the queueMicrotask, but the focus may fail as well without the same element.updateComplete check