Mouse enter and leave events are erratic?

Ask the community
1

Hi all,

I have an issue with the mouse enter & leave events.

Have a look to the video here

The dropdown is a flex layout as you can see here

image
image1842×719 69.8 KB

On every board, there is an event “mouse enter” on each button to open the related board, and an event “mouse leave” to close it.

Maybe I do it very wrong? Or the performances are really bad?

2

Hard to say… My intuition would suggest that it would be better to have the single menu entries handle their hover. But I can not say that your approach is wrong, in a minimal example it does not show problems for me:
grafik

3

But building on that… going back to a non-hover state is where my replication started to have problems:

  • One could try to register a mouseover on the menu background (the non-menu-item) to move to a board without any hover effect, but that leads to the question whether background or the overlaying element captures the mouse event.
  • One could register a mouseout on the single menu items, this would move to to a board without any hover effect but that leads to the question which event “wins” when the mouse moves out of one menu item and to a new item. If the hover/mouseenter wins it will move to a board with hover effect; if the mouseout wins its moving to a board without hover effect.

Both these are defined in the DOM/JS standard for browsers but not for Penpot (needing to know these would make use cumbersome anyway)

Either way, thus it is probably best to have sub-components for single menu items that react to a mouseover/mouseout by themselves.

4

Either way, thus it is probably best to have sub-components for single menu items that react to a mouseover/mouseout by themselves.

I think that’s planned, but until it’s released…

I’d say you’re right, there are issues to catch the event between all the concerned boards.