arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.59k stars 280 forks source link

fix: improved refocus behavior on window exit and then return #2528

Closed mgreminger closed 1 month ago

mgreminger commented 1 month ago

This pull request fixes two issues with focus handling when switching away from and back to a tab with a mathfield element to make the behavior the same as a standard HTML input or textarea element. The current behavior is correct when switching tabs (the first test in the two videos below) but doesn't correctly handle the case when switching non-overlapping windows (second test in the two videos below). This was corrected by looking for the window blur event rather than the visibilitychange event since visibilitychange is not triggered when switching windows that are not overlapping.

The second issue that is addressed is correctly handling the case where the user clicks off of the mathfield element but doesn't select another element (third test in the videos below, users commonly do this to unselect a mathfield). Previously, the mathfield would incorrectly regain focus when the tab is refocused even though the mathfield wasn't previously focused. This behavior is confusing to users and may cause unintentional scrolling if the user has scrolled the mathfield out of view (this may be related to the issues raised in #2337). By using the click event of document to cancel the refocus, this issue is corrected and now matches the normal HTML input element behavior.

This fix has been tested on Edge, Firefox, and Safari.

Previous focus behavior: Previous focus behavior screen capture video

New focus behavior: New focus behavior screen capture video

arnog commented 1 month ago

Thanks for investigating this issue and providing a PR. LGTM. I'll investigate the Playwright failures.