fix: disabled drop combo tag (#912)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · May 27, 2020 · 1cc67ab · 1cc67ab
1 parent a776770
commit 1cc67ab
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/packages/core/src/components/cv-combo-box/cv-combo-box.vue b/packages/core/src/components/cv-combo-box/cv-combo-box.vue
@@ -1,10 +1,8 @@
 <template>
   <div class="cv-combo-box bx--list-box__wrapper" @focusout="onFocusOut">
-    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': $attrs.disabled }">
-      {{ title }}
-    </label>
+    <label v-if="title" :for="uid" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{ title }}</label>
 
-    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': $attrs.disabled }">
+    <div v-if="isHelper" class="bx--form__helper-text" :class="{ 'bx--form__helper-text--disabled': disabled }">
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
 
@@ -16,10 +14,10 @@
         'bx--list-box--light': theme === 'light',
         'bx--combo-box--expanded': open,
         'bx--list-box--expanded': open,
-        'bx--combo-box--disabled bx--list-box--disabled': $attrs.disabled,
+        'bx--combo-box--disabled bx--list-box--disabled': disabled,
       }"
       :data-invalid="isInvalid"
-      v-bind="$attrs"
+      v-bind="$attr"
       @keydown.down.prevent="onDown"
       @keydown.up.prevent="onUp"
       @keydown.enter.prevent="onEnter"
@@ -46,8 +44,10 @@
           :aria-controls="uid"
           aria-autocomplete="list"
           role="combobox"
+          :aria-disabled="disabled"
           :aria-expanded="open"
           autocomplete="off"
+          :disabled="disabled"
           :placeholder="label"
           v-model="filter"
           @input="onInput"
@@ -109,6 +109,7 @@ export default {
   props: {
     autoFilter: Boolean,
     autoHighlight: Boolean,
+    disabled: Boolean,
     invalidMessage: { type: String, default: undefined },
     helperText: { type: String, default: undefined },
     title: String,
@@ -209,6 +210,7 @@ export default {
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     clearFilter() {
+      if (this.disabled) return;
       this.internalUpdateValue('');
       this.filter = '';
       this.$refs.input.focus();
@@ -280,6 +282,7 @@ export default {
       }
     },
     onInput() {
+      if (this.disabled) return;
       this.doOpen(true);
 
       this.updateOptions();
@@ -289,29 +292,34 @@ export default {
       this.open = newVal;
     },
     onDown() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       } else {
         this.doMove(false);
       }
     },
     onUp() {
+      if (this.disabled) return;
       if (this.open) {
         this.doMove(true);
       }
     },
     onEsc() {
+      if (this.disabled) return;
       this.doOpen(false);
       this.$el.focus();
     },
     onEnter() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (!this.open) {
         this.onItemClick(this.highlighted);
         this.$refs.input.focus();
       }
     },
     onClick() {
+      if (this.disabled) return;
       this.doOpen(!this.open);
       if (this.open) {
         this.$refs.input.focus();
@@ -340,17 +348,20 @@ export default {
       }
     },
     onItemClick(val) {
+      if (this.disabled) return;
       this.internalUpdateValue(val);
       this.$refs.input.focus();
       this.open = false; // close after user makes a selection
       this.$emit('change', this.dataValue);
     },
     inputClick() {
+      if (this.disabled) return;
       if (!this.open) {
         this.doOpen(true);
       }
     },
     inputFocus() {
+      if (this.disabled) return;
       this.doOpen(true);
     },
   },

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"
@@ -58,10 +58,12 @@
       >
         <button
           class="bx--dropdown-text"
+          :aria-disabled="disabled"
           aria-haspopup="true"
           :aria-expanded="open"
           :aria-controls="`${uid}-menu`"
           :aria-labelledby="`${uid}-label ${uid}-value`"
+          :disabled="disabled"
           type="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />

diff --git a/packages/core/src/components/cv-tag/cv-tag.vue b/packages/core/src/components/cv-tag/cv-tag.vue
@@ -16,7 +16,13 @@
     @keyup.space.prevent="$emit('remove')"
   >
     <span class="bx--tag__label">{{ label }}</span>
-    <button v-if="isFilter" class="bx--tag__close-icon" :aria-label="clearAriaLabel" @click.stop.prevent="onRemove">
+    <button
+      v-if="isFilter"
+      class="bx--tag__close-icon"
+      :aria-label="clearAriaLabel"
+      @click.stop.prevent="onRemove"
+      :disabled="disabled"
+    >
       <Close16 />
     </button>
   </span>