fix(select): do not open on form submit

Closes #5596

Author: adamdbradley

ionic/components/select/select.ts

@@ -126,6 +126,7 @@ export class Select {
   private _texts: Array<string> = [];
   private _text: string = '';
   private _fn: Function;
+  private _isOpen: boolean = false;
 
   /**
    * @private
@@ -185,14 +186,25 @@ export class Select {
     }
   }
 
-  /**
-   * @private
-   */
   @HostListener('click', ['$event'])
   private _click(ev) {
+    if (ev.detail === 0) {
+      // do not continue if the click event came from a form submit
+      return;
+    }
     ev.preventDefault();
     ev.stopPropagation();
+    this._open();
+  }
 
+  @HostListener('keyup.space', ['$event'])
+  private _keyup(ev) {
+    if (!this._isOpen) {
+      this._open();
+    }
+  }
+
+  private _open() {
     if (this._disabled) return;
     console.debug('select, open alert');
 
@@ -245,6 +257,11 @@ export class Select {
     });
 
     this._nav.present(alert, alertOptions);
+
+    this._isOpen = true;
+    alert.onDismiss(() => {
+      this._isOpen = false;
+    });
   }
 
 

ionic/components/select/test/multiple-value/index.ts

@@ -1,4 +1,5 @@
 import {App, Page} from 'ionic-angular';
+import {Control, ControlGroup} from 'angular2/common';
 
 
 @Page({
@@ -9,6 +10,7 @@ class E2EPage {
   carFeatures: Array<string>;
   pets: Array<string>;
   petOptions: Array<{text: string, value: string}>;
+  authForm: ControlGroup;
 
   constructor() {
     this.toppings = ['bacon', 'xcheese'];
@@ -21,12 +23,21 @@ class E2EPage {
       { text: 'Honey Badger', value: 'honeybadger' },
       { text: 'Pig', value: 'pig' },
     ];
+
+    this.authForm = new ControlGroup({
+      name: new Control(''),
+      select: new Control('')
+    });
   }
 
   carChange(selectedValues) {
     console.log('carChange', selectedValues);
   }
 
+  onSubmit(data) {
+    console.log('onSubmit', data);
+  }
+
 }
 
 

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

@@ -52,4 +52,21 @@
     <code>pets: {{pets}}</code><br>
   </p>
 
+  <form [ngFormModel]="authForm" (ngSubmit)="onSubmit(authForm.value)">
+    <ion-list padding-vertical>
+      <ion-item>
+        <ion-input ngControl="name" type="text"></ion-input>
+      </ion-item>
+      <ion-item class="no-border">
+        <ion-label>Select</ion-label>
+        <ion-select multiple="true" ngControl="select">
+          <ion-option>1</ion-option>
+          <ion-option>2</ion-option>
+          <ion-option>3</ion-option>
+        </ion-select>
+      </ion-item>
+      <button full block class="no-margin" type="submit">Submit</button>
+    </ion-list>
+  </form>
+
 </ion-content>