Merge pull request #8847 from driftyco/fix/option

fix(select): emit the ionSelect option when selecting an option

src/components/alert/alert-component.ts

@@ -145,7 +145,8 @@ export class AlertCmp {
         label: input.label,
         checked: !!input.checked,
         disabled: !!input.disabled,
-        id: 'alert-input-' + this.id + '-' + index
+        id: 'alert-input-' + this.id + '-' + index,
+        handler: isPresent(input.handler) ? input.handler : null,
       };
     });
 
@@ -237,12 +238,20 @@ export class AlertCmp {
         input.checked = (checkedInput === input);
       });
       this.activeId = checkedInput.id;
+
+      if (checkedInput.handler) {
+        checkedInput.handler(checkedInput);
+      }
     }
   }
 
   cbClick(checkedInput: any) {
     if (this.enabled) {
       checkedInput.checked = !checkedInput.checked;
+
+      if (checkedInput.handler) {
+        checkedInput.handler(checkedInput);
+      }
     }
   }
 

src/components/select/select.ts

@@ -296,6 +296,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
           handler: () => {
             this.onChange(input.value);
             this.ionChange.emit(input.value);
+            input.ionSelect.emit(input.value);
           }
         };
       }));
@@ -319,7 +320,14 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
           label: input.text,
           value: input.value,
           checked: input.selected,
-          disabled: input.disabled
+          disabled: input.disabled,
+          handler: (selectedOption: any) => {
+            // Only emit the select event if it is being checked
+            // For multi selects this won't emit when unchecking
+            if (selectedOption.checked) {
+              input.ionSelect.emit(input.value);
+            }
+          }
         };
       });
 

src/components/select/test/multiple-value/app-module.ts

@@ -41,6 +41,10 @@ export class E2EPage {
     console.log('onSubmit', data);
   }
 
+  toppingsSelect(selectedValue: any) {
+    console.log('Selected', selectedValue);
+  }
+
 }
 
 

src/components/select/test/multiple-value/main.html

@@ -19,7 +19,7 @@
       <ion-option value="mushrooms">Mushrooms</ion-option>
       <ion-option value="onions">Onions</ion-option>
       <ion-option value="pepperoni">Pepperoni</ion-option>
-      <ion-option value="pineapple">Pineapple</ion-option>
+      <ion-option value="pineapple" (ionSelect)="toppingsSelect($event)">Pineapple</ion-option>
       <ion-option value="sausage">Sausage</ion-option>
       <ion-option value="Spinach">Spinach</ion-option>
     </ion-select>

src/components/select/test/single-value/app-module.ts

@@ -67,8 +67,12 @@ export class E2EPage {
     console.log('Gaming Select, Change value:', selectedValue);
   }
 
-  stpSelect() {
+  musicSelect(selectedValue: any) {
-    console.log('STP selected');
+    console.log('Music selected', selectedValue);
+  }
+
+  notificationSelect(selectedValue: any) {
+    console.log('Notification select', selectedValue);
   }
 
   statusChange(ev: string) {

src/components/select/test/single-value/main.html

@@ -48,7 +48,7 @@
       <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>
-      <ion-option value="mute_year">Mute for a year</ion-option>
+      <ion-option value="mute_year" (ionSelect)="notificationSelect($event)">Mute for a year</ion-option>
     </ion-select>
   </ion-item>
 
@@ -61,7 +61,7 @@
       <ion-option>Pearl Jam</ion-option>
       <ion-option>Smashing Pumpkins</ion-option>
       <ion-option>Soundgarden</ion-option>
-      <ion-option (ionSelect)="stpSelect()">Stone Temple Pilots</ion-option>
+      <ion-option (ionSelect)="musicSelect($event)">Stone Temple Pilots</ion-option>
     </ion-select>
   </ion-item>