React: How to catch `onInput` event with `InputEvent` arguments on `contentEditable` div?

Issue

I need to catch historyUndo and historyRedo from InputEvent. The problem is, my contentEditable div is giving me FormEvent not InputEvent.

const inputChanged = (e: InputEvent) => {
  //Error here because e is FormEvent type not InputEvent
  if(e.inputType === 'historyUndo' || e.inputType === 'historyRedo')
  {
    ....
  }
}

return <div contentEditable={true} onInput={(e) => inputChanged(e)}>
  ....
</div>

How can I catch InputEvent on div contentEditable?

Solution

What you want to do is access the nativeEvent property of the event. Something similar to this.

const inputChanged = (e) => {
  if(e.nativeEvent.inputType === 'historyUndo' || e.nativeEvent.inputType === 'historyRedo')
  {
    ....
  }
}

return <div contentEditable={true} onInput={(e) => inputChanged(e)}>
  ....
</div>

Answered By - TheWhiteFang