Displaying a single non selectable item raises js error

[s_welte]

Problem:
Displaying only a single non selectable item in the autocomplete result will cause an js error on (menu) focus change.

Minimal Example:
​http://jsfiddle.net/kZEjJ/

Proposed fix:
The _move function in ui.menu does make some invalid assumptions: Displaying a single menu item does not automatically imply that this menu item is selectable. We found that adding this simple guard fixed our problem:

diff --git jquery-ui-1.10.3.custom.js jquery-ui-1.10.3.custom.js
--- jquery-ui-1.10.3.custom.js
+++ jquery-ui-1.10.3.custom.js
@@ -2442,8 +2442,9 @@ $.widget( "ui.menu", {
     if ( !next || !next.length || !this.active ) {
             next = this.activeMenu.children( ".ui-menu-item" )[ filter ]();
     }
-
-    this.focus( event, next );
-
+    if (next.length !== 0) {
+      this.focus(event, next);
+    }
   },

   nextPage: function( event ) {

Unfortunately we do not know the jquery ui codebase too well, so there might be side effects or architecture related things we don't know about.

[tj.vantoll]

Hi s_welte,

Thanks for taking the time to contribute to the jQuery UI project. The autocomplete widget is expecting data with a key of "ui-autocomplete-item" to be associated with each <li> in the results. See ​https://github.com/jquery/jquery-ui/blob/37bba1eb920298994903e866625bb662f391a1f5/ui/jquery.ui.autocomplete.js#L522.

For example: ​http://jsfiddle.net/tj_vantoll/n3Eqn/

Out of curiosity why did you override _renderMenu? I'm wondering if we could do anything here to make the extension a little easier.

[s_welte]

Hi,

I added ui-autocomplete-item but it does not help in this case. Your example (​http://jsfiddle.net/tj_vantoll/n3Eqn/) also throws the js error on key_down (Tested in Chrome + Firefox + IE).

To give you an idea how we're using _render_menu have a look at ​https://gist.github.com/svenwelte/e6cc614010d38af1289e

As you can see there are quite a bit of different usecases implemented that can also occur at the same time:

• Display autocomplete result formatted in various ways
• Group results
• Only show a non selectable message (e.g. "No results found"). That's what this bug is about.
• Create additional menu items in addition to the normal autocomplete result that trigger custom actions. e.g. You enter 'foo' which autocompletes to 'foobar', 'foodball', 'Action: Create new "foo" '

HTH, Sven

[tj.vantoll]

Whoops, this one should work ​http://jsfiddle.net/tj_vantoll/n3Eqn/1/.

I had a misspelling, and menu also requires each <li> to contain an <a>. For your no results found use case I would recommend displaying that message outside of the main list.

I think it would potentially confusing to the user to have a message appear in a list where valid options normally appear.

You also might be able to call _renderItemData so that you don't have to explicitly store the data as "ui-autocomplete-item" youself.

[Scott González]

_renderMenu() calls _renderMenuItemData(), which calls _renderMenu() and then stores the data. This is done specifically so that users overriding _renderMenuItem() don't need to concern themselves with storing the data.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

[lankymart]

Wrong issue / related but wrong (removed comments) - migrated to ​http://bugs.jqueryui.com/ticket/10130#comment:2