Wj-auto-complete : how to leave empty as inital value

Posted by: sh.koizumi on 5 March 2019, 6:18 am EST

  • Posted 5 March 2019, 6:18 am EST

    I have seen a couple of people posting the problem with first item get selected for inital value but not seeing any resolution for this issue. Has this been resolved?

    I also have similar problem when swithing itemsSource.

    In the following example I can set ngModelSelectedValue = null so inital value can be empty when this component is rendered but once I click on the switch button it does select the first item even I set ngModelSelectedValue = null again

    <wj-auto-complete style="width:100%;"
                          [itemsSource]="data"
                          [displayMemberPath]="'country'"
                          [selectedValuePath]="'id'"
                          [(ngModel)]="ngModelSelectedValue">
        </wj-auto-complete>
    
        <a href="#" (click)="switch()" >Switch source</a>
    //component
    constructor(private dataSvc: DataService, private dataSvr2: DataSvc) {
          this.data = new wjCore.CollectionView(this.dataSvr2.getData(50));
    }
      
    
      switch(){
        this.data = new wjCore.CollectionView(this.dataSvr2.getData(4)); 
        this.ngModelSelectedValue = null;
        console.log('switching.....');
      }
    
    //service
    getData(count: number): wjCore.ObservableArray {
                var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                    data = new wjCore.ObservableArray();
                for (var i = 0; i < count; i++) {
                    console.log( i + '  '+ countries[i % countries.length]);
                    data.push({
                        id: i,
                        country: countries[i % countries.length],
                        date: new Date(2014, i % 12, i % 28),
                        amount: Math.random() * 10000,
                        selected: i % 2 == 0,
                        disabled: i % 4 == 0
                    });
                }
                return data;
        }
    
    

    Any workaround with this?

  • Posted 6 March 2019, 2:17 am EST

    Hi Shinya,

    What is causing the actual issue here is that we are assigning a new collectionView to this.data every time we need to switch data. Now what happens is, this.data is updated right away but this update is not propagated to wj-auto-complete until the next angular changeDetection cycle which occurs after we have already set the selectedValue to null. Now in changeDetection cycle, wj-auto-complete is informed that its source is changed which in turn sets the selected value to the first item(overriding the previously set null) as default behaviour.

    So to fix this we need to make a few changes as follows:

    1). Set isRequired property of auto-complete to false to allow null values.

    2). update the source collection of the existing collectionView instead of assigning a new collectionView each time. Please refer to the following code snippet:

    this.data.sourceCollection = this.dataSvc.getData(4); 
    

    3). set autoComplete.selectedValue property to null instead of ‘ngModelSelectedValue’. This is related to the following bug in angular:

    https://github.com/angular/angular/issues/14988

    You may also refer to the following sample demonstrating the same:

    https://stackblitz.com/edit/angular-9fvx6x?file=src%2Fapp%2Fapp.component.ts

    ~Sharad

  • Posted 6 March 2019, 3:30 am EST

    Thank you very much for explanation in detail.

    I noticed your solution works on either isRequired = true or isRequired = false. Is this necessary? In my case I want to have this dropdown field as required.

  • Posted 7 March 2019, 12:44 am EST

    Yes, we could set the isRequired to false in case if we don’t the user to input null values.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels