Adds #366 allowing easy disabling for select options

wearebraid · Mar 2, 2021 · 96a9d5f · 96a9d5f
1 parent 39298d7
commit 96a9d5f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/inputs/FormulateInputSelect.vue b/src/inputs/FormulateInputSelect.vue
@@ -37,7 +37,8 @@
           v-for="option in options"
           :key="option.id"
           :value="option.value"
-          v-bind="option.attributes || {}"
+          :disabled="!!option.disabled"
+          v-bind="option.attributes || option.attrs || {}"
           v-text="option.label"
         />
       </template>
@@ -53,7 +54,8 @@
             v-for="option in subOptions"
             :key="option.id"
             :value="option.value"
-            v-bind="option.attributes || {}"
+            :disabled="!!option.disabled"
+            v-bind="option.attributes || option.attrs || {}"
             v-text="option.label"
           />
         </optgroup>

diff --git a/test/unit/FormulateInputSelect.test.js b/test/unit/FormulateInputSelect.test.js
@@ -48,6 +48,16 @@ describe('FormulateInputSelect', () => {
     expect(wrapper.find('select[name="foo"]').exists()).toBe(true)
   })
 
+  it('Allows disabling options', () => {
+    const wrapper = mount(FormulateInput, { propsData: { type: 'select', options: [
+      { label: 'a', value: 'a'},
+      { label: 'b', value: 'b', disabled: true },
+      { label: 'c', value: 'c'}
+    ],  name: 'foo' } })
+    expect(wrapper.find('option[value="a"]').attributes('disabled')).toBe(undefined)
+    expect(wrapper.find('option[value="b"]').attributes('disabled')).toBe('disabled')
+  })
+
   it('additional context does not bleed through to text select attributes', () => {
     const wrapper = mount(FormulateInput, { propsData: { type: 'select' } } )
     expect(Object.keys(wrapper.find('select').attributes())).toEqual(["id"])