refactor(select): rename the checked attribute to selected on option

BREAKING CHANGES: The Option component’s `checked` attribute has been renamed to `selected` in order to select an option. This is to the follow the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute. references #7334
ionic-team · Aug 3, 2016 · b5b8047 · b5b8047
1 parent ccf6ae5
commit b5b8047
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 34 deletions.
diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
@@ -45,7 +45,7 @@
     <ion-item>
       <ion-label>Key</ion-label>
       <ion-select [(ngModel)]="delKey">
-        <ion-option checked>Select a Key</ion-option>
+        <ion-option selected>Select a Key</ion-option>
         <ion-option *ngFor="let key of addedKeys" [value]="key">
           {{ key }}
         </ion-option>

diff --git a/demos/select/main.html b/demos/select/main.html
@@ -37,7 +37,7 @@
       <ion-select (ionChange)="monthChange($event)">
         <ion-option value="01">January</ion-option>
         <ion-option value="02">February</ion-option>
-        <ion-option value="03" checked="true">March</ion-option>
+        <ion-option value="03" selected="true">March</ion-option>
         <ion-option value="04">April</ion-option>
         <ion-option value="05">May</ion-option>
         <ion-option value="06">June</ion-option>
@@ -54,7 +54,7 @@
         <ion-option>1991</ion-option>
         <ion-option>1992</ion-option>
         <ion-option>1993</ion-option>
-        <ion-option checked="true">1994</ion-option>
+        <ion-option selected="true">1994</ion-option>
         <ion-option>1995</ion-option>
         <ion-option>1996</ion-option>
         <ion-option>1997</ion-option>

diff --git a/src/components/input/test/fixed-inline-labels/main.html b/src/components/input/test/fixed-inline-labels/main.html
@@ -23,7 +23,7 @@
     <ion-item>
       <ion-label fixed>CC</ion-label>
       <ion-select>
-        <ion-option checked>Admin</ion-option>
+        <ion-option selected>Admin</ion-option>
       </ion-select>
     </ion-item>
 

diff --git a/src/components/input/test/stacked-labels/main.html b/src/components/input/test/stacked-labels/main.html
@@ -47,7 +47,7 @@
     <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="f" selected="true">Female</ion-option>
         <ion-option value="m">Male</ion-option>
       </ion-select>
     </ion-item>

diff --git a/src/components/option/option.ts b/src/components/option/option.ts
@@ -5,15 +5,15 @@ import { isPresent, isTrueProperty } from '../../util/util';
 /**
  * @name Option
  * @description
- * `ion-option` is a child component of `ion-select`. Similar to the native option element, `ion-option` can take a value and a checked property.
+ * `ion-option` is a child component of `ion-select`. Similar to the native option element, `ion-option` can take a value and a selected property.
  *
  * @demo /docs/v2/demos/item-sliding/
  */
 @Directive({
   selector: 'ion-option'
 })
 export class Option {
-  private _checked: any = false;
+  private _selected: any = false;
   private _disabled: any = false;
   private _value: any;
 
@@ -25,15 +25,15 @@ export class Option {
   constructor(private _elementRef: ElementRef) {}
 
   /**
-   * @input {boolean} Whether or not the option is already checked and selected
+   * @input {boolean} Whether or not the option is already selected
    */
   @Input()
-  get checked() {
-    return this._checked;
+  get selected() {
+    return this._selected;
   }
 
-  set checked(val) {
-    this._checked = isTrueProperty(val);
+  set selected(val) {
+    this._selected = isTrueProperty(val);
   }
 
   /**

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -48,7 +48,7 @@ export const SELECT_VALUE_ACCESSOR = new Provider(
  * <ion-item>
  *   <ion-label>Gender</ion-label>
  *   <ion-select [(ngModel)]="gender">
- *     <ion-option value="f" checked="true">Female</ion-option>
+ *     <ion-option value="f" selected="true">Female</ion-option>
  *     <ion-option value="m">Male</ion-option>
  *   </ion-select>
  * </ion-item>
@@ -175,11 +175,6 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
    */
   @Input() alertOptions: any = {};
 
-  /**
-   * @private
-   */
-  @Input() checked: any = false;
-
   /**
    * @input {string} The interface the select should use: `action-sheet` or `alert`. Default: `alert`.
    */
@@ -273,7 +268,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
     if (this.interface === 'action-sheet') {
       alertOptions.buttons = alertOptions.buttons.concat(options.map(input => {
         return {
-          role: (input.checked ? 'selected' : ''),
+          role: (input.selected ? 'selected' : ''),
           text: input.text,
           handler: () => {
             this.onChange(input.value);
@@ -296,7 +291,7 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
           type: (this._multi ? 'checkbox' : 'radio'),
           label: input.text,
           value: input.value,
-          checked: input.checked,
+          checked: input.selected,
           disabled: input.disabled
         };
       });
@@ -366,8 +361,8 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
 
     if (!this._values.length) {
       // there are no values set at this point
-      // so check to see who should be checked
-      this._values = val.filter(o => o.checked).map(o => o.value);
+      // so check to see who should be selected
+      this._values = val.filter(o => o.selected).map(o => o.value);
     }
 
     this._updOpts();
@@ -382,11 +377,11 @@ export class Select implements AfterContentInit, ControlValueAccessor, OnDestroy
     if (this._options) {
       this._options.forEach(option => {
         // check this option if the option's value is in the values array
-        option.checked = this._values.some(selectValue => {
+        option.selected = this._values.some(selectValue => {
           return isCheckedProperty(selectValue, option.value);
         });
 
-        if (option.checked) {
+        if (option.selected) {
           this._texts.push(option.text);
         }
       });

diff --git a/src/components/select/test/multiple-value/index.ts b/src/components/select/test/multiple-value/index.ts
@@ -25,7 +25,7 @@ class E2EPage {
       { text: 'Honey Badger', value: 'honeybadger' },
       { text: 'Pig', value: 'pig' },
     ];
-    this.status = 'checked';
+    this.status = 'selected';
 
     this.authForm = new FormGroup({
       name: new FormControl(''),

diff --git a/src/components/select/test/multiple-value/main.html b/src/components/select/test/multiple-value/main.html
@@ -47,14 +47,14 @@
   <ion-item>
     <ion-label>Disabled</ion-label>
     <ion-select multiple disabled>
-      <ion-option checked="true">Selected Text</ion-option>
+      <ion-option selected="true">Selected Text</ion-option>
     </ion-select>
   </ion-item>
 
   <ion-item>
     <ion-label>Statuses</ion-label>
     <ion-select multiple [(ngModel)]="status">
-      <ion-option value="checked" checked="true">Checked</ion-option>
+      <ion-option value="selected" selected="true">Selected</ion-option>
       <ion-option value="default">Default</ion-option>
       <ion-option value="disabled" disabled="true">Disabled</ion-option>
     </ion-select>

diff --git a/src/components/select/test/single-value/index.ts b/src/components/select/test/single-value/index.ts
@@ -14,7 +14,7 @@ class E2EPage {
   month: string;
   year: string;
   years: Array<number>;
-  notification: string;
+  notifications: string;
   status: string;
 
   constructor() {
@@ -23,8 +23,8 @@ class E2EPage {
     this.music = null;
     this.month = '12';
     this.year = '1994';
-    this.notification = 'enable';
-    this.status = 'checked';
+    this.notifications = 'enable';
+    this.gender = 'f';
 
     this.years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];
 
@@ -47,6 +47,10 @@ class E2EPage {
     console.log('STP selected');
   }
 
+  statusChange(ev: string) {
+    this.status = ev;
+  }
+
   resetGender() {
     this.gender = null;
   }

diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html
@@ -12,7 +12,7 @@
   <ion-item>
     <ion-label>Gender</ion-label>
     <ion-select [(ngModel)]="gender" class="e2eSelectGender">
-      <ion-option value="f" checked="true">Female</ion-option>
+      <ion-option value="f">Female</ion-option>
       <ion-option value="m">Male</ion-option>
     </ion-select>
   </ion-item>
@@ -44,7 +44,7 @@
 
   <ion-item>
     <ion-label>Notifications</ion-label>
-    <ion-select [(ngModel)]="notification" interface="action-sheet" cancelText="Cancel!">
+    <ion-select [(ngModel)]="notifications" interface="action-sheet" cancelText="Cancel!">
       <ion-option value="enable">Enable</ion-option>
       <ion-option value="mute">Mute</ion-option>
       <ion-option value="mute_week">Mute for a week</ion-option>
@@ -88,8 +88,8 @@
 
   <ion-item>
     <ion-label>Statuses</ion-label>
-    <ion-select [(ngModel)]="status">
-      <ion-option value="checked" checked="true">Checked</ion-option>
+    <ion-select (ionChange)="statusChange($event)">
+      <ion-option value="selected" selected>Selected</ion-option>
       <ion-option value="default">Default</ion-option>
       <ion-option value="disabled" disabled="true">Disabled</ion-option>
     </ion-select>
@@ -104,10 +104,14 @@
     <br>
     <code>os: {{os}}</code>
     <br>
+    <code>notifications: {{notifications}}</code>
+    <br>
     <code>music: {{music}}</code>
     <br>
     <code>date: {{month}}/{{year}}</code>
     <br>
+    <code>status: {{status}}</code>
+    <br>
   </p>
 
 </ion-content>