diff --git a/tests/unit/autocomplete/core.js b/tests/unit/autocomplete/core.js index 33ccb2f34da..21bde5b0fa3 100644 --- a/tests/unit/autocomplete/core.js +++ b/tests/unit/autocomplete/core.js @@ -429,4 +429,33 @@ QUnit.test( "Close on click outside when focus remains", function( assert ) { } ); } ); +QUnit.test( "Use source label on keyboard navigation (#15130)", function( assert ) { + var ready = assert.async(); + assert.expect( 3 ); + var element = $( "#autocomplete" ).autocomplete( { + source: [ + { label: "ActionScript", value: 123 }, + { label: "AppleScript", value: 456 }, + { label: "Javascript", value: 789 } + ], + delay: 0 + } ); + + element.autocomplete( "search", "a" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + setTimeout( function() { + assert.equal( element.val(), "ActionScript", "Keydown input value matches source label" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + setTimeout( function() { + assert.equal( element.val(), "AppleScript", "Keydown input value matches next source label" ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + setTimeout( function() { + assert.equal( element.val(), "Javascript", "Enter key value matches source label" ); + ready(); + } ); + } ); + } ); +} ); + } ); diff --git a/ui/widgets/autocomplete.js b/ui/widgets/autocomplete.js index c5bddc0745a..9031ea3b745 100644 --- a/ui/widgets/autocomplete.js +++ b/ui/widgets/autocomplete.js @@ -253,16 +253,16 @@ $.widget( "ui.autocomplete", { } item = ui.item.data( "ui-autocomplete-item" ); + label = ui.item.attr( "aria-label" ) || item.label || item.value; if ( false !== this._trigger( "focus", event, { item: item } ) ) { // use value to match what will end up in the input, if it was a key event if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) { - this._value( item.value ); + this._value( label ); } } // Announce the value in the liveRegion - label = ui.item.attr( "aria-label" ) || item.value; if ( label && $.trim( label ).length ) { this.liveRegion.children().hide(); $( "
" ).text( label ).appendTo( this.liveRegion ); @@ -287,7 +287,7 @@ $.widget( "ui.autocomplete", { } if ( false !== this._trigger( "select", event, { item: item } ) ) { - this._value( item.value ); + this._value( ui.item.attr( "aria-label" ) || item.label || item.value ); } // reset the term after the select event