Auto complete "valueChange" event

[Rajesh]

 

Hi,

We are using KendoUI AutoComplete for Angular6 like below.

<kendo-autocomplete #autocomplete style="width:100%" [(data)]="items" [valueField]="'DESCR_FULL'"
      [suggest]="true" placeholder="Digita almeno 3 caratteri..." [(ngModel)]="selectedsedetechnica"
      (valueChange)=SelectedAssetFromSTCombo($event) [filterable]="true" (filterChange)="handleFilter($event)">
</kendo-autocomplete>

valueChange event is fired even when the AutoComplete is tabbed out / blurred.

But we want to fire the "valueChange" event only when the user selects any one of the AutoComplete suggestions (by clicking on any one of the suggestions (or) by selecting any one one of the suggestions with keyboard ENTER key.). We don't want to fire this event when Aucomplete lost focus (blurred).

Because the autocomplete suggestions will vary based on the user. We don't want to process any data that is not coming from AutoComplete.

How to stop firing "valueChange" event when AutoComplete is tabbed out (or) lost focus

Thanks in advance,

Rajesh

[Martin]

Hi Rajesh,

By design the (valueChange) event is fired on every change in the input field or when it is blurred. There is no built-in option to achieve the required functionality, but we can use some custom JavaScript. In the handler of the 'valueChange' event ('SelectedAssetFromSTCombo' in your example) we can implement a condition to check if the value that is coming from the event, exists in the array items that are passed as a data to the AutoComplete. Component:

public SelectedAssetFromSTCombo(e) {
    if (!this.items.includes(e)) {
      return
    }
  ...
  }

Check the following stackblitz example:
https://stackblitz.com/edit/angular-jzbcaf?file=app/app.component.ts

I hope this helps. Let me know if I am missing something or any further assistance is required for this case. 

Regards,
Martin
Progress Telerik

[Rajesh]

Thank you Martin.

At least this way we are able to restrict the user to proceed only with their relevant data.

[Martin]

Hi Rajesh,

Indeed, we cannot limit when the (valueChange) event will be fired. However, with the demonstrated condition we can achieve the desired behavior.

Let me know in case I am missing something or further assistance is needed for this case.

Regards,
Martin
Progress Telerik

[Nilesh]

Hi Martin, 

I want to prevent valueChange event fire on autocomplete textbox blur. can you please provide suggestion on how can I handle that scenario in valueChange handler??

[Martin]

Hello Nilesh,

The valueChange event of the ComboBox is fired each time when an item is selected and by default is not preventable. The component also provides blur and selectionChange events which may prove useful.

If any further assistance is required for this case, please describe in more detail the scenario and what is the expected results. Thank you in advance.

Regards,
Martin
Progress Telerik