Hi
I am trying to make use of the AutoComplete component to allow a user to type a partial entry and then select from the matches if required. I want to use the Change even to warn the user if they have not entered a known value.
The problem is that if I click on an available option, I get two Change events, one for what I typed and one for the entry I selected. This means I can't use the event to validate the entry.
I have verified this on the Demo site and am seeing two Change events when I would only expect one. Can the first event be removed?
The AutoComplete can have custom values (not from the suggestions) and that's why it fires two change events in this case. This behavior can't be disabled. You can probably use a DropDown component with filtering enabled to achieve what you are after.
Thanks @korchev
I am not sure I agree with your explanation but thanks for the feedback.
The DropDown isn't suitable for what I am trying to achieve, so I have had to disable the warnings to the user.
Regards
So, in your case, just by clicking at the suggestions, the input element loses focus and the event is triggered. Then the input text is actually changed based on the selection and that triggers the event second time.
In order to do whatever with the actual user input right after it's typed, you have to add a handler to the oninput event yourself:
then
Right now I'm using this event to make the suggestions popup disappear when the user empties the input field. It usually continues to stay opened with the suggestions for the last input, which is a bit weird, shouldn't be this way. In my case this does the job:
*companies is the collection that supplies the data for the autocomplete in my case
I think for a component like this, the onchange event practically notifies when a suggestion is being selected. That's good to have. But to keep track of the actual user input you need the oninput event too.
