fix: dropdown value presentation (#873)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · Apr 24, 2020 · 1d4ab65 · 1d4ab65
1 parent 76229c5
commit 1d4ab65
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git 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"
@@ -65,7 +65,12 @@
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
-          <span class="bx--dropdown-text__inner" :id="`${uid}-value`">{{ internalCaption }}</span>
+          <span
+            class="bx--dropdown-text__inner"
+            :id="`${uid}-value`"
+            data-test="internalCaption"
+            v-html="internalCaption"
+          />
           <span class="bx--dropdown__arrow-container">
             <span class="bx--dropdown__arrow" :style="chevronStyleOveride">
               <chevron-down-glyph />
@@ -79,6 +84,7 @@
           :aria-hidden="!open"
           wh-menu-anchor="left"
           :aria-labelledby="`${uid}-label`"
+          ref="droplist"
         >
           <slot></slot>
         </ul>
@@ -281,8 +287,13 @@ export default {
           this.$el.focus();
         }
 
-        if (ev.target.classList.contains('bx--dropdown-link')) {
-          const targetItemEl = ev.target.parentNode;
+        let target = ev.target;
+        while (!target.classList.contains('bx--dropdown-link') && this.$refs.droplist.contains(target)) {
+          target = target.parentNode; // try next one up
+        }
+
+        if (target.classList.contains('bx--dropdown-link')) {
+          const targetItemEl = target.parentNode;
           const newValue = targetItemEl.getAttribute('data-value');
 
           this.internalValue = newValue;

diff --git a/storybook/stories/cv-dropdown-story.js b/storybook/stories/cv-dropdown-story.js
@@ -132,7 +132,7 @@ for (const story of storySet) {
 
       const templateString = `
   <cv-dropdown ${settings.group.attr}>${settings.group.slots}
-    <cv-dropdown-item value="10">Option with value 10</cv-dropdown-item>
+    <cv-dropdown-item value="10"><span>Option with value 10 & 10.0</span></cv-dropdown-item>
     <cv-dropdown-item value="20">Option with value 20</cv-dropdown-item>
     <cv-dropdown-item value="30">Option with value 30</cv-dropdown-item>
     <cv-dropdown-item value="40">Option with value 40</cv-dropdown-item>