bug: select is not checking the option with checked on it

[brandyscarney]

The following test failed on snapshot: select/single-value

Relevant code:

<ion-item>
  <ion-label stacked>Label 6</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f" checked="true">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

[Kobzol]

I'm curious as to how this should behave. Let's say that the gender variable would be "m" in this situation. What should the select do after initialization? Check "f" or "m"? Or set "gender" to "f" directly?

[brandyscarney]

@Kobzol That's true. I created this issue because it used to work, but it seems like a select element in an Angular 2 application behaves the same way. Here are my findings:

1. A native option element uses selected not checked: <option value="all" selected>
2. Native and Angular select elements with nothing selected choose the first option by default, unless it is a multiple select then none are selected.
3. In a plain Angular app if you have the following it checks the last one:

<select>
  <option value="all">All</option>
  <option value="paid">Paid</option>
  <option value="free" selected>Free</option>
</select>

4. but if you add ngModel then it won’t select any of them unless you set the variable to one of the values in the component:

export class AppComponent {
  apps: string = "paid";
}

then it will choose to prioritize the value of apps and select paid.

Here's a sample plunker that can be modified to show the above: http://plnkr.co/edit/x14JI1KGB4hUzpB9AYac?p=preview

[Kobzol]

I guess it's a reasonable behaviour to give precedence to the ngModel. Though Ionic's ion-select could emit a warning if there's a selected directive present with ngModel set (if that situation can be detected).

[mmazloum]

Hi,

I encounter similar problems with my ion-select components. for example :
<ion-item> <ion-label>Pays</ion-label> <ion-select formControlName="countryCode" [ngModel]="appService.appDatas.currentAddress.countryCode"> <ion-option *ngFor="let code of countryCodes" value="{{code.iso2}}">{{code.name}}</ion-option> </ion-select> </ion-item>

When built on targets iPhone or Galaxy sometimes I get selection issues, sometimes the scroll is not fluid or keeps frozen inside the select, sometimes everything works fine, it doesn't look like a performance issue because nothing heavy is running in the background of my app or my phones.

[Caff00]

why this dosent work but work with the checkbox

 <ion-label>max</ion-label>

  <ion-select [(ngModel)]="data.prixmax">
    <ion-option checked="true"value="1000">1000</ion-option>
    <ion-option value="2000">2000</ion-option>
    <ion-option value="3000">3000</ion-option>
    </ion-select>

</ion-item>

[abrseq]

till now no solution found???

[abrseq]

what i did was after executing all the line of codes in the ionChange event i made [(ngModel)] value null..
After that its working fine

[brandyscarney]

I have tested this in the v4 version and I am no longer able to reproduce this:

  <ion-row>
    <ion-col>
      <label for="stdSelect">Select</label>
      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs">
        <option value="bacon">Bacon</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="ham" selected>Ham</option>
        <option value="sausage">Sausage</option>
        <option value="pineapple">Pineapple</option>
      </select>
    </ion-col>
    <ion-col>
      Value:
      <span id="selectOutput">{{selectValue}}</span>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>Ionic Select</ion-label>
        <ion-select id="ionSelectInput" [(ngModel)]="selectValue" [disabled]="disableInputs">
          <ion-select-option value="bacon">Bacon</ion-select-option>
          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
          <ion-select-option value="ham" selected>Ham</ion-select-option>
          <ion-select-option value="sausage">Sausage</ion-select-option>
          <ion-select-option value="pineapple">Pineapple</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>

Please note that the correct property is selected not checked. I am going to close this as it will be fixed in v4.

[saiprasad2595]

I did workaround.In constructor i have set ngModel value for which i thought of keeping default selected value.

<ion-select [(ngModel)]='selectBox'>
    <ion-option value='male'>Keep data from view</ion-option>
     <ion-option value='female'>Remove data from view</ion-option>
</ion-select>

---
constructor(){
 this.selectBox = 'male';
}

---

This way default value is getting selected

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.