Try to support the Enter key for deletions
Closes #929
Handling the Enter key is pretty easy. What is truly hard however is not handling it.
The deletion modal can disappear or be destroyed in several ways, and Vue sometimes is unable to even detect this destruction, so the beforeUnmount
, unmounted
, deactivated
or even update
hooks do not get triggered. This can occur when navigating away from the page, or when said navigation causes the ?highlight
to change (which can change the selected element), and there probably are other weird edge cases and race conditions that could cause the component to not be able to call Mousetrap.unbind
.
I also tried to get rid of Mousetrap entirely and just cause the modal to focus on the delete button when it gets opened. This works, until the user releases the mouse button, which causes the InteractiveImage to forcefully move the focus away from anything in order to be able to catch every mouse event (otherwise, some clicks might go missing). Since the whole click had started on the SVG element, even though it ended with a different focus in the modal, it finishes with a mouseup
on the InteractiveImage, which also gets caught and causes the loss of focus. I tried various fixes including if (tool !== 'deletion')
without much success.
So this implementation uses Mousetrap, and tries every single possible way of making sure that you cannot delete an element accidentally by pressing Enter when not in a deletion modal. I still expect some bugs to show up later…