Menu: Top level focus lost on out/over of sub popups

[michaelcm]

Issue present on jQuery Demos page, so that is the minimal code sample: ​http://jqueryui.com/menu/#default

Steps:

1. Hover over Salzburg to expand sub menu
2. Hover over Delphi to expand sub menu
3. Hover over Ada to focus sub sub item.
4. Move mouse to right off of menu.
5. Move menu back onto Ada.
6. Move menu back onto Saarland.

Expected:

6. Salzburg should be 'active' as should 'Delphi'. Saarland should have focus.

Actual:

5. Salzburg becomes focused initially at step 5 (incorrect).
6. Salzburg then looses focus but doesn't maintain active during the transition from 5-6. After step 6, Delphi is active and Saarland has focus.

Let me know if you need any clarifications on the bug or a video of me doing it. I don't see how to attach files here so didn't make a movie yet.

Thanks! Michael

[Scott González]

There's no state like that. I'm not sure why you expected there to be. Please use the forums or Stack Overflow if you need help implementing some custom logic for your use case.

[michaelcm]

Sorry, but I am a software engineer and do know what I'm talking about. The bug is valid, but perhaps my explanation is lacking. Here are some videos and screenshots (not sure what a typical way to share these would be for jQuery UI):

Movie demo of the bug: ​http://expirebox.com/download/a8dff241dabef40bd23bb6d23d6b98ec.html

The expected state of the menus: ​http://expirebox.com/download/efa93be38517f037ca13bc261ba04792.html

The actual state of the menus (after moving mouse off of any menu items and back over): ​http://expirebox.com/download/7ea33aa3c098b4275a3cded1ae0ca9a3.html Note that we lost the notion of following a menu. The menus are still expanded but the top level item does not lot focused/selected anymore.

Please validate the bug. I may provide the fix myself if I have time... but for now just the bug report is coming.

[Scott González]

Ok, the confusion came from using a demo with tons of duplicated menu items to explain the bug. We should probably change our demo since it's also pretty silly.

[Jörn Zaefferer]

Menu: Update default demo, use product categories

Makes it look like a navigation menu that can't be navigated, at least better than the random city names we had before.

Ref #11641

Changeset: c5b215e319e4b6d70d1b5f64ac0926b82a55707d

[Jörn Zaefferer]

Since the expirebox links are gone, I've updated the default demo to remove duplicates and use more sensible labels. Updated steps for the demo on master:

1. Hover over Music to expand sub menu
2. Hover over Rock to expand sub menu
3. Hover over Alternative to focus sub sub item.
4. Move mouse to right off of menu.
5. Move menu back onto Alternative.
6. Move menu back onto Music.

Expected:

6. 'Music', 'Rock' and 'Alternative' should be active

Actual:

5. 'Music' stays active initially at step 5, but 'Rock' and 'Alternative' loose active status (incorrect).
6. 'Music' should be active, but isn't

[Jörn Zaefferer]

After a bit of debugging I noticed that the mouseenter event is triggered for all three nested menu items, so in step 5 three mouseenter events are triggered, from the lowest to the highest item (Alternative, Rock, Music). Adding a crude event.stopPropagation() inside the mouseenter event handler "fixes" this issue. There must be a better way though, since never stop propagation anywhere. We can always add more flags and timers...

[Jörn Zaefferer]

Menu: Ignore bubbled mouseenter events on parent items

Test uses QUnit 2.x API - inconsistent with the other tests, but also a good reference.

Fixes #11641 Closes gh-1535

Changeset: c770605db05347edfa9c6224aebd42974092ed22