fix(select): make floating labels work for ion-select

fixes #10751
ionic-team · Mar 14, 2017 · 8c483f2 · 8c483f2
1 parent 446e468
commit 8c483f2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/src/components/label/label.scss b/src/components/label/label.scss
@@ -65,7 +65,3 @@ ion-label[floating] {
 
   max-width: 100%;
 }
-
-.item-select ion-label[floating] {
-  transform: translate3d(0, 0, 0) scale(.8);
-}
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -387,6 +387,21 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
     return (this._multi ? this._texts : this._texts.join());
   }
 
+  /**
+   * @private
+   */
+  checkHasValue(inputValue: any) {
+    if (this._item) {
+      let hasValue: boolean;
+      if (Array.isArray(inputValue)) {
+        hasValue = inputValue.length > 0;
+      } else {
+        hasValue = !isBlank(inputValue);
+      }
+      this._item.setElementClass('input-has-value', hasValue);
+    }
+  }
+
   /**
    * @private
    */
@@ -445,6 +460,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
     console.debug('select, writeValue', val);
     this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
     this._updOpts();
+    this.checkHasValue(val);
   }
 
   /**
@@ -464,6 +480,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
       fn(val);
       this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
       this._updOpts();
+      this.checkHasValue(val);
       this.onTouched();
     };
   }
@@ -481,6 +498,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
     console.debug('select, onChange w/out formControlName', val);
     this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
     this._updOpts();
+    this.checkHasValue(val);
     this.onTouched();
   }
 

diff --git a/src/components/select/test/multiple-value/main.html b/src/components/select/test/multiple-value/main.html
@@ -83,4 +83,20 @@
     </ion-list>
   </form>
 
+  <ion-item>
+    <ion-label floating>Floating label</ion-label>
+    <ion-select multiple="true">
+      <ion-option value="bacon">Bacon</ion-option>
+      <ion-option value="olives">Black Olives</ion-option>
+      <ion-option value="xcheese">Extra Cheese</ion-option>
+      <ion-option value="peppers">Green Peppers</ion-option>
+      <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="sausage">Sausage</ion-option>
+      <ion-option value="Spinach">Spinach</ion-option>
+    </ion-select>
+  </ion-item>
+
 </ion-content>
diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html
@@ -137,4 +137,12 @@
     </ion-item>
   </form>
 
+  <ion-item>
+    <ion-label floating>Floating label</ion-label>
+    <ion-select>
+      <ion-option value="f">Female</ion-option>
+      <ion-option value="m">Male</ion-option>
+    </ion-select>
+  </ion-item>
+
 </ion-content>