fix: 927 dropdown focus reset post selection (#931)

* fix: 927 dropdown focus reset post selection * chore: update story with focus button Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · Jun 23, 2020 · 803d36c · 803d36c
1 parent 3fd9208
commit 803d36c
Showing 1 changed file with 11 additions and 5 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,6 +65,7 @@
           :aria-labelledby="ariaLabeledBy"
           :disabled="disabled"
           type="button"
+          ref="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
           <span
@@ -285,15 +286,15 @@ export default {
     },
     onEsc() {
       this.open = false;
-      this.$el.focus();
+      this.focus();
     },
     onClick(ev) {
       if (this.disabled) {
         ev.preventDefault();
       } else {
         this.open = !this.open;
         if (!this.open) {
-          this.$el.focus();
+          this.focus();
         }
 
         let target = ev.target;
@@ -309,6 +310,11 @@ export default {
         }
       }
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.button.focus();
+      });
+    },
   },
 };
 </script>