onInvalidateSelection not working

[nmsobri]

When user select the suggestion list using keyboard, then loose the focus (click outside the input), then click inside the input again the onInvalidateSelection work as expected.

But when user select the suggestion list using mouse, then loose the focus (click outside the input), then click inside the input again the onInvalidateSelection simply not working

Here is my code:

$(function () {
    $(document).on('focus', '.item-name', function () {
        $(this).autocomplete({
            minChars: 1,
            preventBadQueries: false,
            serviceUrl: "/ajax/inventory/goods/search",
            showNoSuggestionNotice: true,
            dataType: "json",
            onInvalidateSelection: function (suggestion) {
                console.log('on invalidate');
            },
            onSelect: function (suggestion) {
                console.log("on select");
            },
            onHide: function () {
                console.log("on hide")
            }
        });
    });

});

Looks like this problem only occur if autofocus is being used with dynamically loaded element
Is there any workaround?

[gongph]

Hi， I didn't find the above problem your said. Here's my code:

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <div class="demo">
        <input type="text" class="form-control" id="autocomplete"/>
      </div>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/autocomplete/1.4.7/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
  $('#autocomplete').autocomplete({
    serviceUrl: './db.json',
    dataType: 'json',
    onSelect: function (suggestions) {
      console.log('onSelect...', suggestions);
     },
    onInvalidateSelection: function () {
      console.log('onInvalidateSelection...', this);
    }
  });
});
</script>

db.json

{
    "suggestions": ["United Arab Emirates", "United Kingdom", "United States", "United Owen", "United Zssna"]
}

[nmsobri]

@gongph Hi..Your autocomplete is not on dynamically injected element

And one more, i think to reflect my issue, you have to have suggestion that have quite the same value like:

db.json

{
    "suggestions": ["User 1", "User 11", "User 12", "User 13", "User 14"]
}

First try to select User 1 using mouse, then loose the focus, and then select the input again and try delete some character from the input..onInvalidateSelection is not tiggered

[gongph]

I think it's nothing to do with the server data, right?

[nmsobri]

@gongph Nop..Dont think so.I have another input with autocomplete too..The onInvalidateSelection works just fine for that input.The only differences with the one i have problem is, the input is not dynamically injected element

[gongph]

@slier81 You are right， 确实有问题。

[nmsobri]

@gongph so its confirm bug?

[gongph]

In fact, when the suggestion is selected by keyup or keydown , then loose the focus (click outside the input), then click inside the input again the onInvalidateSelection also not working.

[nmsobri]

@gongph Yep, as long u loose the focus.. the onInvalidateSelection simply stop working

[gongph]

@slier81 @tkirda At present, I have found that there is only one way to work properly, and the steps are as follows:

1. Enter query keywords in the text box
2. Use the upper and lower keyboard to select suggestion
3. Press the confirmation key (Enter)
4. Change the value in the text box

This time triggers onInvalidateSelection events

[nmsobri]

1.Enter query keywords in the text box
2.Use the upper and lower keyboard to select suggestion
3.Press the confirmation key (Enter)
4.Change the value in the text box

@tkirda @gongph This only work if the user not loose the focus from the input..If the user loose the focus, this step will not work.

Trying to set the focus back to the input element (after user select the suggestion using mouse) does not remedy the problem

[gongph]

@slier81 Looking at the 471 lines of the source code.

// `that.selection` is null when input element lose focus
// so， the code inside of  `if` will not excute
if (that.selection && that.currentValue !== query) {
   that.selection = null;
   (options.onInvalidateSelection || $.noop).call(that.element);
}

[nmsobri]

@gongph Interesting finding.. hope @tkirda can fix it

[netmou]

step 1: input some word in order to make suggestion showing
step 2: click the outside by mouse to make the elem lose focus
step 3：click the the input-elem ,but onInvalidateSelection do not work
so how to make sure the element's value must be one of suggestions

my way:
change the order between the container's hide action and onselect at line 851 in file jquery.autocomplete.js like follow：

select: function (i) {
            var that = this;
            that.onSelect(i);
	    that.hide();
  },

// then implements the onHide to make sure  element's value must be one of suggestions
onInvalidateSelection:function(){
     $(this).val("");
},
onHide:function(){
    var selection = $(this).autocomplete().selection;
     if(selection == null ||selection.value != $(this).val()){
          $(this).val("");
     }
}

[elektronika-ba]

Problem:
When using external source of data, the onInvalidateSelection is called only after the data has been fetched. In situations when there is a defer timeout and user "blurs" before the search is executed, the onInvalidateSelection is never called.

Fix:
In the source code find onBlur function:

    onBlur: function () {
        var that = this;

        // If user clicked on a suggestion, hide() will
        // be canceled, otherwise close suggestions
        that.blurTimeoutId = setTimeout(function () {
            that.hide();
        }, 200);
    },

and change to:

    onBlur: function () {
        var that = this,
            options = that.options,
            value = that.el.val(),
            query = that.getQuery(value);

        // If user clicked on a suggestion, hide() will
        // be canceled, otherwise close suggestions
        that.blurTimeoutId = setTimeout(function () {
            that.hide();
            if (that.selection && that.currentValue !== query) {
                (options.onInvalidateSelection || $.noop).call(that.element);
            }
        }, 200);
    },

It works for me.