2

I read many post how to move from one input to another on Enter keypress. Many contains solution with custom directive which is not good, because I want that this works out of the box (without implementing directive on every component).

I simply try to call dispatchEvent with key Tab. But it is not working. It seems so simple. I really hope I am not doing something stupid and someone can explain to me, why this stackblitz doesn't work.

<input (keyup)="handleChange($event)">

 public handleChange(e: KeyboardEvent)
 {
    if (e && e.keyCode === 13)
    {
      e.srcElement.dispatchEvent(new KeyboardEvent('keydown', { key: '9' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keypress', { key: '9' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keyup', { key: '9' }));

      e.target.dispatchEvent(new KeyboardEvent('keydown', { key: '9' }));
      e.target.dispatchEvent(new KeyboardEvent('keypress', { key: '9' }));
      e.target.dispatchEvent(new KeyboardEvent('keyup', { key: '9' }));


      e.srcElement.dispatchEvent(new KeyboardEvent('keydown', { code: '9' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keypress', { code: '9' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keyup', { code: '9' }));

      e.target.dispatchEvent(new KeyboardEvent('keydown', { code: '9' }));
      e.target.dispatchEvent(new KeyboardEvent('keypress', { code: '9' }));
      e.target.dispatchEvent(new KeyboardEvent('keyup', { code: '9' }));

      e.srcElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));

      e.target.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
      e.target.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab' }));
      e.target.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));


      e.srcElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keypress', { code: 'Tab' }));
      e.srcElement.dispatchEvent(new KeyboardEvent('keyup', { code: 'Tab' }));

      e.target.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
      e.target.dispatchEvent(new KeyboardEvent('keypress', { code: 'Tab' }));
      e.target.dispatchEvent(new KeyboardEvent('keyup', { code: 'Tab' }));

      console.log("Should move. Event was dispatched on", e.target, e.srcElement);
    }
 }
Makla
  • 9,899
  • 16
  • 72
  • 142

1 Answers1

0

This answer is late by 3 years, but maybe it'll help someone save hours of searching...

It won't work.

Looks like focusing is not possible with dispatchEvent. The simulated Tab key is not interpreted the same as when it's pressed by the user, so it doesn't change the focus.

So what do I do?

You could write a function that looks for the next (or previous) tabbable element and calls focus() on it. Note that "tabbable" is not the same as "focusable" – elements with tabindex="-1" can be focused programmatically with focus(), but they can't be tabbed to by the user. Read more about tabbable vs. focusable.

Alternatively, you can use an existing solution, like Joel Purra's EmulateTab. Unfortunately it's in jQuery, but the core idea is the same: find the proper element and call focus().

fri
  • 181
  • 6