0

I am trying to dispatch tab key Press event pro grammatically on a button click. When the button is clicked, I provided focus for the first input and dispatched key press event with tab key and try to focus the second input. But unfortunately this is not working.

document.getElementById('btn').addEventListener('click', function() {
  const input = document.getElementsByTagName('input')[0];
  input.focus();
  alert('Input 1 focused');
  input.dispatchEvent(
    new KeyboardEvent('keypress', {
      key: 'tab',
      code: 'tab',
      keyCode: 9
    })
  );

});
<button id="btn">click</button>
<input id="default" tabindex="0" />
<br />
<br />
<br />
<input id="default1" tabindex="0" />

I expect upon button click, the second input should be in focus state since I have dispatched tab keypress there.

R3tep
  • 12,512
  • 10
  • 48
  • 75
Kanagambigai Murugan
  • 90
  • 7

1 Answers1

1

The reason for this is that your event is not Trusted. isTrusted property of the event is false. This is a readonly property.

More details you can find here JavaScript trigger an InputEvent.isTrusted = true

Rikhil Arora
  • 118
  • 1
  • 8