[vue] Fix Combobox input disabled state (#2375)

* [vue] Fix Combobox input disabled state * Add tests for disabled input in React and Vue * Update changelog --------- Co-authored-by: Jordan Pittman <[email protected]>
tailwindlabs · Mar 16, 2023 · d55c77e · d55c77e
1 parent fc9a625
commit d55c77e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
@@ -169,6 +169,16 @@ describe('Rendering', () => {
           attributes: { id: 'headlessui-combobox-button-2' },
         })
         assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+        // The input should also be disabled
+        assertComboboxInput({
+          state: ComboboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-combobox-input-1', disabled: '' },
+        })
+
+        // And even if we try to focus it, it should not open the combobox
+        await focus(getComboboxInput())
+        assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
       })
     )
 

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fix focus styles showing up when using the mouse ([#2347](https://github.com/tailwindlabs/headlessui/pull/2347))
+- Disable `ComboboxInput` when its `Combobox` is disabled ([#2375](https://github.com/tailwindlabs/headlessui/pull/2375))
 
 ### Added
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -200,6 +200,16 @@ describe('Rendering', () => {
           attributes: { id: 'headlessui-combobox-button-2' },
         })
         assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
+
+        // The input should also be disabled
+        assertComboboxInput({
+          state: ComboboxState.InvisibleUnmounted,
+          attributes: { id: 'headlessui-combobox-input-1', disabled: '' },
+        })
+
+        // And even if we try to focus it, it should not open the combobox
+        await focus(getComboboxInput())
+        assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
       })
     )
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -935,6 +935,7 @@ export let ComboboxInput = defineComponent({
         tabIndex: 0,
         ref: api.inputRef,
         defaultValue: defaultValue.value,
+        disabled: api.disabled.value === true ? true : undefined,
       }
 
       return render({