jQuery menu does not de-select and collapse if exit right

[steve1346]

This bug is causing me problems, and can also clearly be seen on the demo at the bottom of https://api.jqueryui.com/menu/.

In a nutshell, a menu item with a submenu is not deselected, and the submenu remains open, if you exit over the submenu.

In the demo, if you hover Item 3 its submenu opens. If you then move the mouse right a submenu item is selected. Keep moving the mouse right beyond the submenu, and that submenu item is deselected. However the submenu remains open and the parent item remains selected.

This does not happen if you exit Item 3 up, down, or left, i.e. without highlighting a submenu item. It appears visually as if there is only one level of select being cleared.

In my own use, I have tried hiding on blur or mouse leave events but it is tricky as you also get these events when moving from the item to the sub-menu.

PS This is in Chrome 95.0.4638.54 on Ubuntu 16.04. Confirmed that it also occurs in Firefox on same platform.

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

[steve1346]

Hi Michał, both I think.

In my local app page where I first noticed it, I am running a local copy of jquery-ui-1.12.1.custom (downloaded in 2020).

But I can see the same problem in the demo on the jQuery UI 1.13 page, at https://api.jqueryui.com/menu/#entry-examples ; so I haven't tried updating my local copy as yet.

[mgol]

Thanks for the info. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.

[mgol]

BTW, looking at this further, this actually looks like expected behavior to me. Native menus on macOS behave in exactly the same way, for example.

[steve1346]

With respect, it is 100% a bug, and very annoying in my context - I have a row of these menus and traversing with the mouse left to right leaves a trail of destruction. I will be either patching for myself or finding a work around, in time.
Try the demo on the API page:

1. Hover item 3 until it selects and the submenu opens.
2. Hover item 3-1 until it selects.
   3 a. Exit the mouse due LEFT and the whole menu closes to initial appearance.
   3 b. Exit the mouse due RIGHT and the submenu stays open with main menu item 3 selected.

Nobody would design it to behave like this, surely? Seems like leaving the entire menu via the submenu is deselecting the submenu ok, but not being bubbled up to the parent. That is without looking at the code yet, though. But ok, I can DIY when I get the time.

[mgol]

Nobody would design it to behave like this, surely?

Well, that's exactly how native macOS menus work so that sentence is demonstrably false.

This also makes sense to me. You can leave the submenu going to the right accidentally, by moving the mouse too much. If that closed the submenu automatically, it could be annoying. If you move to the left, you need to move a much higher distance to leave the menu and the submenu areas so this won't be done accidentally.

Of course, there can be more than one solution to designing menus. But considering that:

• this behavior is not new
• it matches native macOS behavior

I don't feel it's a good idea to change the behavior at this state of the project.

What do you think, @fnagel?

[fnagel]

Sorry for the delay.

I assume that for some users the usability is not familiar, but its a common pattern in other context than macOs too. For example, Firefox on Windows behaves similar.

I agree with @mgol that the behavior should not be changed at this state of the project. We could make it configurable but this looks like a bigger change to me. We need to consider some a11y testing too. Not sure if it's worth all the time tbh.

@steve1346 Did you try to fix it in your project? Is it a bigger change or something trivial?

[steve1346]

I am going to apply a fix for myself when I get around to it. I have a series of 7 or 8 menus side by side, all with sub-menus, and when I run the mouse left to right I end up with lasagne all over everything. I believe correct behaviour would be to close the submenu if the mouse is not over sub-menu OR parent menu, but that's just me it seems. I'm not convinced that current behaviour is intentional, whichever implementation it occurs in.

…

On Tue, 5 Sept 2023, 07:43 Felix Nagel, ***@***.***> wrote: Sorry for the delay. I assume that for some users the usability is not familiar, but its a common pattern in other context than macOs too. For example, Firefox on Windows behaves similar. I agree with @mgol <https://github.com/mgol> that the behavior should not be changed at this state of the project. We could make it configurable but this looks like a bigger change to me. We need to consider some a11y testing too. Not sure if it's worth all the time tbh. @steve1346 <https://github.com/steve1346> Did you try to fix it in your project? Is it a bigger change or something trivial? — Reply to this email directly, view it on GitHub <#2167 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYBJCIEBUAC2BC3V2U7WDQTXYZDQLANCNFSM6AAAAAAW7JTEEQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>