From 8c483f25293f231a4e815444361a2ac950bb1dc9 Mon Sep 17 00:00:00 2001
From: Ibrahim Ghazal <ibrahim.mg@iga.gov.bh>
Date: Tue, 14 Mar 2017 12:42:12 +0300
Subject: [PATCH] fix(select): make floating labels work for ion-select

fixes #10751
---
 src/components/label/label.scss                |  4 ----
 src/components/select/select.ts                | 18 ++++++++++++++++++
 .../select/test/multiple-value/main.html       | 16 ++++++++++++++++
 .../select/test/single-value/main.html         |  8 ++++++++
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/label/label.scss b/src/components/label/label.scss
index f81fa30dcb5..6f3f7ebf8bd 100644
--- 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
index fcf4c070a29..59e3a45754a 100644
--- 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
index d68b7cbf1b7..cdf5b172694 100644
--- 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
index dcafc93d360..7db4558dbd5 100644
--- 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>