Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#11641 closed bug (fixed)

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

Reported by: michaelcm Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.menu Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:

Description

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:

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

Actual:

  1. Salzburg becomes focused initially at step 5 (incorrect).
  2. 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

Change History (9)

comment:1 Changed 2 years ago by Scott González

Resolution: notabug
Status: newclosed

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.

comment:2 Changed 2 years ago by 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.

comment:3 Changed 2 years ago by Scott González

Resolution: notabug
Status: closedreopened

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.

comment:4 Changed 2 years ago by Scott González

Status: reopenedopen

comment:5 Changed 2 years ago by 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

comment:6 Changed 2 years ago by 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:

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

Actual:

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

comment:7 Changed 2 years ago by 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...

comment:8 Changed 2 years ago by Jörn Zaefferer

Resolution: fixed
Status: openclosed

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

comment:9 Changed 2 years ago by Jörn Zaefferer

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.