#15154 closed bug (notabug)

Opened March 22, 2017 08:17AM UTC

Closed March 25, 2017 06:32AM UTC

Autocomplete, change event doesn't fire when clear field after selection but still keeping the focus on it

Reported by:	maglioccola	Owned by:
Priority:	minor	Milestone:	none
Component:	ui.autocomplete	Version:	1.12.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

I provided a simple snippet, please see: https://jsfiddle.net/zcaszs38/2/

When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why?

Steps to test snippet:

Write 'value' in the editable field

Select one value
Clear the selected value
hiddenField will still contain old value.

Thanks

Note: It doesn't work when I clear the field after selection but still keeping the focus on it.

Attachments (0)

Change History (3)

Changed March 22, 2017 08:19AM UTC by maglioccola comment:1

I also post my question on StackOverFlow http://stackoverflow.com/questions/42931996/jquery-ui-autocomplete-change-event-doesnt-fire with a fiddle.

Changed March 22, 2017 08:25AM UTC by maglioccola comment:2

description:	\ {{{ \ var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}]; \ \ $("#txtAutocomplete").autocomplete({ \ source: mySource, \ select: function(event, ui){ \ if(ui.item){ \ //console.log('select', ui.item.label); \ $("#hiddenField").val(ui.item.id); \ return ui.item.label; \ } \ else{ \ //console.log('select with null value'); \ $("#hiddenField").val(''); \ } \ }, \ change: function(event, ui){ \ if(ui.item){ \ //console.log('change', ui.item.id); \ $("#hiddenField").val(ui.item.id); \ } \ else{ \ //console.log('change with null value'); \ $("#hiddenField").val(''); \ } \ } \ }); \ \ <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> \ <script src="https://code.jquery.com/jquery-1.11.3.js"></script> \ <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> \ <p> \ <ol> \ <li>Type 'Value' in the text box</li> \ <li>Press 'arrow down' to select the first element</li> \ <li>Press enter</li> \ <li>Keep pressed backspace to delete completely the selected item</li> \ <li>Press TAB</li> \ <li>Value in 'readonly' field is still there</li> \ </ol> \ </p> \ \ <input type="text" id="txtAutocomplete"> \ <input type="text" id="hiddenField" disabled="disabled"> \ \ <button>Button added just to have an element to focus on</button> \ }}} \ \ When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why? \ \ Steps to test snippet: \ \ Write 'value' in the editable field \ - Select one value \ - Clear the selected value \ - hiddenField will still contain old value. \ \ Thanks \ \ Note: It doesn't work when I clear the field after selection but still keeping the focus on it. → I provided a simple snippet, please see: [https://jsfiddle.net/zcaszs38/2/] \ \ When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why? \ \ Steps to test snippet: \ \ Write 'value' in the editable field \ - Select one value \ - Clear the selected value \ - hiddenField will still contain old value. \ \ Thanks \ \ Note: It doesn't work when I clear the field after selection but still keeping the focus on it.

description:

\ {{{ \ var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}]; \ \ $("#txtAutocomplete").autocomplete({ \ source: mySource, \ select: function(event, ui){ \ if(ui.item){ \ //console.log('select', ui.item.label); \ $("#hiddenField").val(ui.item.id); \ return ui.item.label; \ } \ else{ \ //console.log('select with null value'); \ $("#hiddenField").val(''); \ } \ }, \ change: function(event, ui){ \ if(ui.item){ \ //console.log('change', ui.item.id); \ $("#hiddenField").val(ui.item.id); \ } \ else{ \ //console.log('change with null value'); \ $("#hiddenField").val(''); \ } \ } \ }); \ \ <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> \ <script src="https://code.jquery.com/jquery-1.11.3.js"></script> \ <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> \ <p> \ <ol> \ <li>Type 'Value' in the text box</li> \ <li>Press 'arrow down' to select the first element</li> \ <li>Press enter</li> \ <li>Keep pressed backspace to delete completely the selected item</li> \ <li>Press TAB</li> \ <li>Value in 'readonly' field is still there</li> \ </ol> \ </p> \ \ <input type="text" id="txtAutocomplete"> \ <input type="text" id="hiddenField" disabled="disabled"> \ \ <button>Button added just to have an element to focus on</button> \ }}} \ \ When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why? \ \ Steps to test snippet: \ \ Write 'value' in the editable field \ - Select one value \ - Clear the selected value \ - hiddenField will still contain old value. \ \ Thanks \ \ Note: It doesn't work when I clear the field after selection but still keeping the focus on it. → I provided a simple snippet, please see: [https://jsfiddle.net/zcaszs38/2/] \ \ When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField. Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why? \ \ Steps to test snippet: \ \ Write 'value' in the editable field \ - Select one value \ - Clear the selected value \ - hiddenField will still contain old value. \ \ Thanks \ \ Note: It doesn't work when I clear the field after selection but still keeping the focus on it.

Changed March 25, 2017 06:32AM UTC by scottgonzalez comment:3

resolution:	→ notabug
status:	new → closed

Selecting the item by pressing enter has not caused the value to change because the field has not blurred. When you fully clear the value then press tab, the new value (empty) and the old value (empty) are the same, so no change has occurred.