Update input value via synthetic `Event`

Rob — Wed, 25 Aug 2021 02:34:45 +0000

Given any <input type="text" /> element, is it possible to trigger the value to change using only synthetic event objects and calling dispatchEvent directly on the input element?

For example, using only vanilla JS, the following results in nothing changing:

const event = new KeyboardEvent('keydown', {
  key: 'e',
  code: 'KeyE',
  keyCode: 69,
});

// doesn't work, nothing changes
document.getElementById('my-input').dispatchEvent(event);

UPDATE:
Even if we capture a native KeyboardEvent and store a reference to it, passing it into dispatchEvent still causes no change to the value.

DEV Community: Rob

Update input value via synthetic `Event`