This is a migrated thread and some comments may be shown as answers.

Auto complete "valueChange" event

5 Answers 421 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Rajesh
Top achievements
Rank 1
Rajesh asked on 24 Apr 2019, 05:22 PM

 

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

5 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 26 Apr 2019, 05:42 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Rajesh
Top achievements
Rank 1
answered on 30 Apr 2019, 02:30 PM

Thank you Martin.

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

0
Martin
Telerik team
answered on 02 May 2019, 10:07 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nilesh
Top achievements
Rank 1
answered on 09 Oct 2020, 01:53 PM

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??

0
Martin
Telerik team
answered on 13 Oct 2020, 06:18 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
AutoComplete
Asked by
Rajesh
Top achievements
Rank 1
Answers by
Martin
Telerik team
Rajesh
Top achievements
Rank 1
Nilesh
Top achievements
Rank 1
Share this question
or