Wijmo AutoComplete SelectedIndex

Wijmo AutoComplete SelectedIndex

Posted by: sbanerjee on 14 September 2017, 11:55 am EST

• 

  sbanerjee

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:55 am EST

  Hello,

  I am using Wijmo Auto Complete in my application, and assigning source to it on load. It is selecting first item from the list by default.
  
  How it is possible that it doesn’t select any value by default. It show the place holder value.

  <wj-auto-complete #multiselRep style="height:20px;"
                                        [placeholder]="'Select Rep'"
                                        [itemsSource]="lstDropDownRep"
                                        [displayMemberPath]="'Rep'"
                                        (isDroppedDownChanged)="RepChange(multiselRep, $event)">
                      </wj-auto-complete>

  I’ve also used selected-index=“-1” but it’s not working for me. “http://fiddle.jshell.net/orfrfvxv/4/”

  I am using (Wijmo 5.20161.138 eval) ,angular 2, Typescript.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:55 am EST

  Hi Sbanerjee,
  
  For making selection null initially for AutoComplete, you will need to set selectedIndex to -1 in directive. Please use the following code snippet for making selection null initially:

  <wj-auto-complete #multiselRep style="height:20px;"
                                        [placeholder]="'Select Rep'"
                                        [itemsSource]="lstDropDownRep"
                                        [displayMemberPath]="'Rep'"
                                        [selectedIndex]="-1">
                      </wj-auto-complete>

  Alternatively, you can also make selection null using collectionView. You will need to set collectionView’s currentItem to null.

  For reference, please see the attached sample that implements both method.

  *Please install required package before running the sample.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/02/AutoComplete.zip

• 

  jong

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:52 pm EST

  Hi Manish,

  I love this AutoComplete control in every other way, but I’m having a similar issue. I have an AutoComplete whose options change based on selections made elsewhere in our form (a very common use case). Every time the options are re-generated, the AutoComplete defaults to the first item. This confuses our users, as the form control should probably be empty until they touch it and choose a selection. I tried your solution of setting selectedIndex to -1 but that did not solve the problem subsequent times (only the first time) when the option list was updated.

  I’ve worked with a lot of custom auto-complete controls in my career as a web developer, and I’ve never seen this UX pattern before. Is there a way we can turn it off? I’d want to prevent the autocomplete from auto-choosing a value unless the user explicitly picks one.

  Thank you in advance for your help. Have a great day!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2017, 4:25 am EST

  Hi Jong,
  
  You need to set the isRequired property to false and selectedValue to null. This will set autoComplete to null. You turn back isRequired to true once it gets focused if the field is required.

  This should help and let me know if you have further queries.

  Thanks,
  
  Manish Kumar Gupta

• 

  vinaybietpratap

  • Post Options:
  • Link
    Copy

  Posted 4 September 2018, 5:22 am EST

  Hi Manish,

  I am also facing same kind of issue. I have two dropdowns. Based on first dropdown selected value second dropdown’s itemsource gets populated.

  Fist dropdown -

  <wj-auto-complete
  
  #dataset
  
  [itemsSource]=“reportBlocks”
  
  [displayMemberPath]=“‘dataSetName’”
  
  [selectedValuePath]=“‘dataSetId’”
  
  class=“form-control”
  
  [ngClass]=“{‘disableDropDown’ : !!filter.filterId}”
  
  [placeholder]=“‘Select Dataset’”
  
  [(ngModel)]=“filter.dataSetId”
  
  [isReadOnly]=“!!filter.filterId”
  
  (selectedIndexChanged)=“getColumns(dataset.selectedItem, i)”>
  
  

  second dropdown -

  <wj-auto-complete
  
  #wjAutoComplete
  
  [itemsSource]=“filter.allColumns”
  
  [displayMemberPath]=“viewByName ? ‘colName’ : ‘colId’”
  
  [selectedValuePath]=“‘colId’”
  
  [(ngModel)]=“filter.id”
  
  class=“form-control fieldDropDown”
  
  [ngClass]=“{‘disableDropDown’ : !!filter.filterId}”
  
  [placeholder]=“‘Select Column’”
  
  [isRequired]=“false”
  
  (selectedIndexChanged)=“checkDataType(wjAutoComplete.selectedItem, filter)”
  
  [isReadOnly]=“!!filter.filterId”>
  
  

  I have two issues.

  1. When a user select a value from first dropdown i assign item source to the second dropdown. So by default it is selecting first value. Which is wrong.

  2. you cannot change itemSource after it gets render into the dom. It behaves incorrectly.