AutoComplete component doesn't trigger selectedIndexChanged event

AutoComplete component doesn't trigger selectedIndexChanged event

Posted by: n.nikolic on 30 May 2018, 5:14 am EST

• 

  n.nikolic

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 May 2018, 5:14 am EST

  Hi,
  
  The following use case is not working for me.
  
  Search for the term in AutoComplete component and choose the first suggested item.
  
  selectedIndex is 0. Search for the other term where the result list is of size 1.
  
  When you try to select new item, the selectedIndexChangedEvent is not fired.
  
  The reason for this is that indeed the index has not changed. The user has chosen item on the index 0 again but it is different item this time. If you bind to the model using ngModel, the model is not updated. If the result list returns more then one and you choose second item the model is updated.
  
  How to get this to work as I expect?

  I’m using wijmo version 5.20181.436-rc with Angular 5.

  Thanks in advance.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 30 May 2018, 10:52 pm EST

  Hi,
  
  We are sorry indeed, we are unable to replicate the issue at our end.
  
  Here is the sample used for replicating the issue at our end:
  
  https://stackblitz.com/edit/angular-yhbbzz?file=app%2Fapp.component.ts

  Please verify and let us know if the issue persists, please update sample and share steps to replicate the issue.

  ~Manish

• 

  n.nikolic

  • Post Options:
  • Link
    Copy

  Posted 31 May 2018, 5:53 pm EST

  Thank you Manish for the quick reply.

  Your example assumes relatively simple case.
  
  This example is unlikely to happen in production.

  I use itemsSourceFunction to query server for data and to update underlying bounded items property. If I reset the array to a new array than I get unwanted behaviour like first item in the array is preselected and user looses what he typed for.
  
  Also I have to manually show drop down options.

  I was forced to keep the same array reference but to change is content.
  
  There is where I had to take control of the component to keep the text that user has entered, refresh the control and show drop down options menu.

  Not sure what is the proper usage of the itemsSourceFunction to get the behaviour like in your example.

  Here is the use case where it doesn’t work.

  https://stackblitz.com/edit/angular-fu4kr7

  Steps:

  1. Type canada
  2. Choose first option
  3. Type brazil
  4. Choose first option
  5. Selected value has not been updated
  6. Type ‘ind’
  7. Choose Indonesia an the selectedItem will be updated but if you choose India it will not.
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 31 May 2018, 10:23 pm EST

  Hi,
  
  The issue is because of updating the itemsSource array using itemsSourceFunction which do not notify Control for index change.

  You should use callback to update itemsSource. Please find the attached sample for the same:
  
  https://stackblitz.com/edit/angular-jzpq1l?file=app%2Fapp.component.ts

  ~Manish

• 

  n.nikolic

  • Post Options:
  • Link
    Copy

  Posted 1 June 2018, 12:54 am EST

  Indeed. It is even stated in the documentation.
  
  Thank you for your time to assist.