on(“menuselect”) not firing every time

[EleventyOne]

Creating a menu with jQueryUI, I noticed that if you select a menuitem, it fires the appropriate event properly. However, if you then select another menuitem right away (without clicking on anything outside the menu first), it does not fire the menuselect event and simply treats the a tag as a regular link (this pattern repeats: 1 okay, 1 ignored, 1 okay, 1 ignored, etc...)

Here is a jsfiddle that demonstrates the issue: ​http://jsfiddle.net/J9eyv/4/

(1) Broken: Click an option, then click another one.

(2) Works: Click an option, click outside the menu, then click another option.

The code is modeled after the jQueryUI demo here: ​http://api.jqueryui.com/menu/#event-select

Was raised on stackoverflow here: ​http://stackoverflow.com/questions/17982109/jqueryui-onmenuselect-not-firing-every-time/17982286

[tj.vantoll]

This only happens if you return false or prevent the default action in the select event. Don't do that; it's essentially saying you want to prevent the selection which doesn't make sense here.

[Scott González]

I don't think the menu should get out of sync like that though, even if the default is prevented.

[EleventyOne]

Replying to tj.vantoll:

it's essentially saying you want to prevent the selection which doesn't make sense here.

Not exactly. I think it's saying that you want to prevent the default behaviour of an a tag that goes nowhere, which makes perfect sense.

EDIT:

Oh, I see what you mean. So perhaps instead I should have put the return false in an event tied to the a tags themselves, and not the "menuselect" event. I can see that point of view. But from a design perspective, that's a little awkward, since the menu elements have to be a tags - i.e., if I have to tie events to the a tags anyway, why am I bothering to use the "menuselect" event at all?

[tj.vantoll]

Upon further digging it's actually not the preventDefault, but rather the stopPropagation. Stopping propagation prevents ​this from being invoked and the mouseHandled flag from being reset.

Sent a pull request with a proposed workaround: ​https://github.com/jquery/jquery-ui/pull/1044

[TJ VanToll]

Menu: Only set the mouseHandled flag if the event is going to bubble. Fixes #9469: on( "menuselect" ) not firing every time.

Changeset: 484e382259f1c1c56b151a97ddf8a894f94d17ea

[TJ VanToll]

Menu: Only set the mouseHandled flag if the event is going to bubble. Fixes #9469: on( "menuselect" ) not firing every time. (cherry picked from commit 484e382259f1c1c56b151a97ddf8a894f94d17ea)

Changeset: b02a32f4b3d7a0588949f2961a74d613beeaea48