onInput and onKeyDown sequencing issue - Githubissues

arnog / mathlive

A web component for easy math input

https://cortexjs.io/mathlive

MIT License

1.56k stars 277 forks source link

onInput and onKeyDown sequencing issue #2370

Closed weikequ closed 3 months ago

weikequ commented 4 months ago

Description

When both onInput and onKeyDown is used, onKeyDown should always fire before onInput, but with mathlive with React (not 100% sure if its caused by React), the order is switched with Backspace, Delete, and maybe others that I haven't tested. With Enter, the onKeyDown handler is not fired at all.
Edit: This is reproducible without react as well, see this codepen.

Steps to Reproduce

Visit this codepen: https://codepen.io/weikequ/pen/bGyGyEy?editors=1111

or

Create a react project,
Add in a mathlive element and a textarea element with oninput and onkeydown handlers that return a timestamp
Observe differences in behaviour when using the keys mentioned above.

Actual Behavior

The order of the event handlers would be messed up or not fire at all (with Enter).

Expected Behavior

The order of the event handlers should always read onKeyDown first.

Environment

Latest version through unpkg.com

Operating System macOS 14.2.1

Browser Tested with Safari, Chromium (Electron), Firefox