From 9b582b315bba096b0e76afc5c665c5b9cc411c61 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 3 Jul 2020 11:51:23 +0300
Subject: [PATCH] Float label support for dropdown and multiselect

---
 src/components/dropdown/Dropdown.vue       |  4 +++-
 src/components/multiselect/MultiSelect.vue | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 232f90681..9a0246b60 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -422,7 +422,9 @@ export default {
                 {
                     'p-disabled': this.disabled,
                     'p-dropdown-clearable': this.showClear && !this.disabled,
-                    'p-focus': this.focused
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': this.value,
+                    'p-inputwrapper-focus': this.focused
                 }
             ];
         },
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 078b6b0c1..fb57c8d67 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -5,11 +5,11 @@
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
         </div>
         <div class="p-multiselect-label-container">
-            <label :class="labelClass">
+            <div :class="labelClass">
                 <slot name="value" :value="value" :placeholder="placeholder">
                     {{label}}
                 </slot>
-            </label>
+            </div>
         </div>
         <div class="p-multiselect-trigger">
             <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
@@ -353,7 +353,9 @@ export default {
                 'p-multiselect p-component',
                 {
                     'p-disabled': this.disabled,
-                    'p-focus': this.focused
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': this.value && this.value.length,
+                    'p-inputwrapper-focus': this.focused
                 }
             ];
         },
@@ -373,7 +375,7 @@ export default {
                 label = '';
                 for(let i = 0; i < this.value.length; i++) {
                     if(i !== 0) {
-                        label += ',';
+                        label += ', ';
                     }
 
                     label += this.getLabelByValue(this.value[i]);