Autocomplete valueChange on blur behavior

[Chris]

I have an autocomplete that's working fine, except I want to change one aspect of its behavior-- I would like to not react to the valueChange event when the control has lost focus. The situation is a search box, where once a user has made a selection, a search page will be routed to. However, I don't want to navigate if the user abandons their input. The control emits a valueChange when a blur happens. I have noticed that the valueChange emits before the blur emits. What would be the best way to achieve the desired behavior? I have a ViewChild reference available if that is needed.

[Ivan]

Hi Christopher,

You can "delay" execution of valueChange callback just to check if blur event occurred.
Please refer to this stackblitz sample, which demonstrates this behavior.
​

public valueChange(value: any): void {

      setTimeout(()=> {

        if(this.blurred) {

          this.blurred = false;

          return;

        } else {

          this.log('valueChange', value);

        }

      },10);

 

    }

In blur callback we are setting blurred flag to true, and then 10 ms after we are checking for this flag and decide in which branch of the if statement to go.

I need to warn you that, this type of manipulations may lead to inconsistent behavior of your component, for example currently valueChange is triggered only when item is selected or X clear button is clicked.

For better result you can try same approach with delayed check in your routing method , just to wait a bit to see if blur event occurred. This will keep inconsistency out of kendo-autocomplete behavior.

Hope this helps you.

Regards,
Ivan
Progress Telerik