Input.delegate fires on focus in IE 11

I’ve some troubles with IE 11 (unfortunately we still have to support it cause our customers still use IE 11). I’ve an empty input element with a placeholder and a input.delegate event. When you focus this element in IE 11, the input.delegate event immeditely fires, this is cause of the following IE bug.

html

<input placeholder="my placeholder" value.bind="text" input.delegate="onInput()" />

ts

export class MyComponent {
   text = '';

   onInput() {
       alert('this event fires in ie 11 when you focus the input element, this should not happen')
   }
}

Is there a way to handle that in Aurelia? Other frameworks like Vue fixed it in their code base for IE:
issue: https://github.com/vuejs/vue/issues/7138
fix: https://github.com/vuejs/vue/commit/0f7c443dca800204bc2e00876365869ee79e2d7b

Similar discussion on stackoverflow.

1 Like

I think this can be workaround per application by having something like this globally:

if (isIE || isEdge) {
  document.addEventListener('focus', (e: FocusEvent) => {
    if (e.target.tagName === 'INPUT') {
      e.target._isFocused = true;
    }
  }, true);
  document.addEventListener('blur', (e: FocusEvent) => {
    if (e.target.tagName === 'INPUT') {
      e.target._isFocused = false;
    }
  }, true);
  document.addEventListener('input', (e: Event) => {
    if (e.target.tagName === 'INPUT' && e.target._isFocused) {
      e.stopPropagation();
      e.target._isFocused = false;
    }
  }, true);
}

The idea is we capture the event at the document/document body/ or an app host, and stop the event from flowing through via stopPropagation().

1 Like

This works! Thanks a lot for your great help!

1 Like