OnSelect, Change inconsistent sequence

[rothschild86]

Love the control, but working around this quirk is such a pain...

Say we add:

control.change(function () {
        console.log('change');      
});

And

        control.autocomplete({
            onSelect: function (picked) {
                        console.log('onSelect'); 
            }
        });

Now, if the user clicks on the selection, the order will be:

• change
• onSelect

But if the user uses tab or Enter to make a selection, the order will be:

• onSelect
• change

Is there any way at all to make those fire in the same order? Our scenario requires the use of $.change(), but there appears to be no reliable way of doing so. Also tried with $.focusout() - the same issue.

Cheers!

[tkirda]

Hm, we can potentially delay firing onSelect so that it will always be last.

Would that work?

[rothschild86]

Thank you for taking a look! I think logically, it would be: a new selection is made -> then, onChange is fired.

But that might be out of your control. So then to your solution - i think if it is reliable, it's worth doing. The consistency will be a big help, because this discrepancy in behavior can lead to hidden bugs. I always tested my form with a tab, and didn't even realize that it was broken when selecting with a click.

[joselimajr]

I have the same problem. When I use a cell phone the problem becomes evident. Is there any way to change this behavior?

[RobBalsley]

I think this is the issue I am having as well. I have a textarea that allows the user to enter multiple values separated by a comma. Once all the selections are made and the control loses focus, a validation script runs to ensure that the values are valid.

However, when a user uses the mouse to select an autocomplete item, the onblur event fires as focus seems to be lost from the control.

Here is a an example of my problem on Plunker: https://plnkr.co/edit/DnJ31mq40nlXrGPtMppu?p=preview

I have otherwise been liking the functionality this plugin provides.