From 59c265a86038d19093ce1c2488cd72fa771d824a Mon Sep 17 00:00:00 2001
From: Lee Chase <leechase@live.com>
Date: Thu, 12 Mar 2020 09:48:33 +0000
Subject: [PATCH] fix: dropdown placeholder updates (#850)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
---
 .../components/cv-dropdown/cv-dropdown.vue    | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/components/cv-dropdown/cv-dropdown.vue b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
index 26f3db69e..14f9d1e32 100644
--- a/packages/core/src/components/cv-dropdown/cv-dropdown.vue
+++ b/packages/core/src/components/cv-dropdown/cv-dropdown.vue
@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
-        {{ label }}
-      </span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
+        label
+      }}</span>
 
       <div
         v-if="!inline && isHelper"
@@ -66,7 +66,7 @@
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
-          <span class="bx--dropdown-text__inner" :id="`${uid}-value`" ref="valueContent">{{ placeholder }}</span>
+          <span class="bx--dropdown-text__inner" :id="`${uid}-value`">{{ internalCaption }}</span>
           <span class="bx--dropdown__arrow-container">
             <span class="bx--dropdown__arrow" :style="chevronStyleOveride">
               <chevron-down-glyph />
@@ -126,6 +126,7 @@ export default {
       dataValue: this.value,
       isHelper: false,
       isInvalid: false,
+      selectedChild: null,
     };
   },
   created() {
@@ -155,6 +156,13 @@ export default {
     },
   },
   computed: {
+    internalCaption() {
+      if (this.selectedChild) {
+        return this.selectedChild.internalContent;
+      } else {
+        return this.placeholder;
+      }
+    },
     internalValue: {
       get() {
         return this.dataValue;
@@ -168,14 +176,9 @@ export default {
           child.internalSelected = selected;
 
           if (selected) {
-            selectedChild = child;
+            this.selectedChild = child;
           }
         }
-        if (selectedChild) {
-          this.$refs.valueContent.innerHTML = selectedChild.internalContent;
-        } else {
-          this.$refs.valueContent.innerHTML = this.placeholder;
-        }
 
         if (this.dataValue !== val) {
           // only raise event on change