Allow Esc and Enter in form fields in all modals but block other keys
Nearly 3 years ago, the mousetrap
class was added to a few form fields in the element creation and edition modals in #142 (closed) to allow the Esc key to work. This is now causing some trouble as every other shortcut also works: pressing ? shows the keyboard shortcuts (#1242 (closed)), pressing Ctrl+← navigates to the previous element losing all input (when it normally allows moving to the previous word in a text input), and pressing Ctrl+→ navigates to the next element losing all input.
To prevent the M key from loading more elements when you are just typing m
into the element name or class name fields in a modal, @mlbonhomme had to remove this. While it might be possible to implement a hack that blocks M on each affected field, it will be pretty complex and hard to maintain. We already are not following what #142 (closed) had done, as some modals like the transcription edition modal do not use the mousetrap
class, so this would be worse.
We can try a generic implementation which rewrites Mousetrap.stopCallback
, a function that returns true
if an event should be ignored. It is the function responsible for ignoring form fields and detecting the mousetrap
class, and it can be overriden. We could make it allow Esc on all inputs within a modal
, and Enter on all inputs but textareas (to still allow line breaks in a textarea), and behave like the original function otherwise.
Defining this function will change how Mousetrap behaves globally and filter keyboard shortcuts on every modal so we don't have to deal with this again. If we ever need a per-component implementation, it should probably be implemented using a composable that only applies the custom implementation to events within the component, which would make for a neat open source npm package.