Menu: select event not firing due to mouseHandled flag reset bug

Minified - http://jsfiddle.net/tj_vantoll/9gGKW/. I can see the behavior you're referring to but it's only happening for me when the

menu

is created in a

setTimeout

. Not exactly sure what's going on there.

If you're looking for a workaround don't use

setTimeout

. Or for a better approach don't destroy and recreate the

menu

on every button click - http://jsfiddle.net/tj_vantoll/CGgB3/.

It will happen with other events as well - for example, when the menu is created in response to an AJAX success callback. This is the behavior that exposed the bug in the first place - my application requests data from the server and creates a menu with the information when the AJAX call returns. It behaves the same when the menu is created in response to a keyboard event (see http://jsfiddle.net/R2u95/). Pretty much ANY event other than a mouse click.

As I explained in the initial description, this is due to errant handling of the mouseHandled flag in the ui.menu. If the menu is created in response to a button click event, then the "onclick" handler resets the mouseHandled flag AFTER the menu is created (thus resetting the flag). In response to ANY other event, the "onclick" handler either doesn't fire or fires before the menu gets created with the incorrect mouseHandled flag value. The workaround I have implemented is to add a mouseHandled reset to the ui.menu _create method however I don't know if that approach will have side-effects in other parts of the widget.

I believe that I can use the approach of hiding and showing the menu like you demonstrated in your second jsfiddle link as a workaround that will not require changes to the jqueryui code.

The mouseHandled flag is global, not per instance, so destroying the menu during the select event prevents the document-click handler from resetting the flag. Based on the current code I can't tell why that flag is there, would've have to work through some git logs to figure that out.

For now, I see two options: Make the flag per instance, so an invalid stage in one menu doesn't affect any others. Or reset the flag on _destroy.

Both would address the issue at hand, though it would be preferable to figure out why the flag is there in the first place and just get rid of it. For now, what TJ suggests is a better solution, since reusing the menu makes a lot more sense.

Actually that was pretty easy to find: https://github.com/jquery/jquery-ui/commit/b8ad711deedab11da1f181b486ee67f259a3ef7c

Originally this was to remove the stopImmediatePropagation calls: https://github.com/jquery/jquery-ui/commit/26d6952bd2b81de2ad2adb0bb77c1be6f2d717c2

I tend to make that flag instance specific. I don't see why that needs to be shared across menu instances. Will ping Kris about it.

Create mouseHandled flag per instance instead of globally. Fixes #8866 - Menu: select event not firing due to mouseHandled flag reset bug

Changeset: 5143b7f672bc668963cce7dcf5dd4e2970aad8e5