Input.delegate fires on focus in IE 11

1

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
2

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
3

This works! Thanks a lot for your great help!

1 Like