cheminfo
Issue with space event bubbling
@targos We need your advice on how to solve this issue.
Currently we can toggle to show / hide custom atom labels. If the last thing we did is to click on such a toggle the element is 'focussed'.
Now if we go hover an atom and press 'space' the event will number the atom but also invert the toggle button. How should we prevent the bubbling of the event so that it does not leave the molecule ?
But I think you're also asking the wrong question. You have the focus on the button, so it's where the event happens. Bubbling is what makes your interaction work on the molecule. If we stop bubbling, you would have the toggle on the button and nothing else.
This happens because the focus is currently on another element, which is the expected behavior when the space key is pressed.
I am actually surprised that the labeling works without having specifically taken the focus on the molecule. If that's really wanted, you need to listen to the event in "capture" mode and stop the propagation of the event there (in react-ocl).
Related (I think) and not easy to predict as a user: if you have the focus on a text field, pressing keyboard keys over a molecule may or may not write in the field depending on the key:
https://github.com/user-attachments/assets/c508e085-89ba-4d74-a0fa-9b8a03807621
One possible workaround solution is to automatically focus the atom element when the mouse hovers over it. As you can see in react-ocl it listens to a global key listener
https://github.com/zakodium-oss/react-ocl/blob/123ff7f7ead59a7b231e5ab301fefcfd6bf733d1/src/components/svg/svg_editor.tsx#L82-L108
https://github.com/zakodium-oss/react-ocl/blob/123ff7f7ead59a7b231e5ab301fefcfd6bf733d1/src/components/svg/svg_editor.tsx#L117-L122
About the issue, on react-ocl the listeners are global because there is no focusable element in the svg.
Maybe the best things to do, is (in react-ocl) to skip the event if target is a focusable element or an element outside the the svg editor.
