Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#9549 closed bug (invalid)

Displaying a single non selectable item raises js error

Reported by: s_welte Owned by: s_welte
Priority: minor Milestone: none
Component: ui.menu Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (6)

comment:1 Changed 6 years ago by tj.vantoll

Owner: set to s_welte
Status: newpending

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.

comment:2 Changed 6 years ago by s_welte

Status: pendingnew

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

comment:3 Changed 6 years ago by tj.vantoll

Status: newpending

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.

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

comment:5 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

comment:6 Changed 5 years ago by lankymart

Version 5, edited 5 years ago by lankymart (previous) (next) (diff)
Note: See TracTickets for help on using tickets.