From 900c4d3f02844e44e31a3e8b4640672137691d2f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 15 Jul 2022 10:16:02 -0400 Subject: [PATCH 1/2] Resync input when display value changes --- .../src/components/combobox/combobox.test.tsx | 64 +++++++++++++++++++ .../src/components/combobox/combobox.tsx | 2 +- .../src/components/combobox/combobox.test.ts | 48 ++++++++++++++ .../src/components/combobox/combobox.ts | 8 ++- 4 files changed, 119 insertions(+), 3 deletions(-) diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index 34a3eac926..163d7e2906 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx @@ -344,6 +344,70 @@ describe('Rendering', () => { }) ) + it( + 'conditionally rendering the input should allow changing the display value', + suppressConsoleLogs(async () => { + function Example() { + let [value, setValue] = useState(null) + + return ( + <> + + {({ open }) => { + if (!open) { + return ( + <> + `${str?.toUpperCase() ?? ''} closed`} + /> + Trigger + + ) + } + + return ( + <> + `${str?.toUpperCase() ?? ''} open`} + /> + Trigger + + Option A + Option B + Option C + + + ) + }} + + + ) + } + + render() + + expect(getComboboxInput()).toHaveValue(' closed') + + await click(getComboboxButton()) + + assertComboboxList({ state: ComboboxState.Visible }) + + expect(getComboboxInput()).toHaveValue(' open') + + await click(getComboboxOptions()[1]) + + expect(getComboboxInput()).toHaveValue('B closed') + + await click(getComboboxButton()) + + assertComboboxList({ state: ComboboxState.Visible }) + + expect(getComboboxInput()).toHaveValue('B open') + }) + ) + it( 'should be possible to override the `type` on the input', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 0c9c7123ab..41fb2d8290 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -445,7 +445,7 @@ let ComboboxRoot = forwardRefWithAs(function Combobox< } else { data.inputRef.current.value = '' } - }, [value, data.inputRef, inputPropsRef]) + }, [value, data.inputRef, inputPropsRef.current?.displayValue]) let selectOption = useEvent((id: string) => { let option = data.options.find((item) => item.id === id) diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts index fafa58334a..0f3512adfd 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts @@ -376,6 +376,54 @@ describe('Rendering', () => { }) ) + it( + 'conditionally rendering the input should allow changing the display value', + suppressConsoleLogs(async () => { + let Example = defineComponent({ + template: html` + + + + + `, + setup: () => ({ value: ref(null) }), + }) + + renderTemplate(Example) + + await nextFrame() + + expect(getComboboxInput()).toHaveValue(' closed') + + await click(getComboboxButton()) + + assertComboboxList({ state: ComboboxState.Visible }) + + expect(getComboboxInput()).toHaveValue(' open') + + await click(getComboboxOptions()[1]) + + expect(getComboboxInput()).toHaveValue('B closed') + + await click(getComboboxButton()) + + assertComboboxList({ state: ComboboxState.Visible }) + + expect(getComboboxInput()).toHaveValue('B open') + }) + ) + it( 'should be possible to override the `type` on the input', suppressConsoleLogs(async () => { diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index df95ff85b0..c1ab391d94 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts @@ -402,8 +402,9 @@ export let Combobox = defineComponent({ computed(() => comboboxState.value === ComboboxStates.Open) ) - watch([api.value, api.inputRef], () => api.syncInputValue(), { + watch([api.value, api.inputRef, api.inputPropsRef], () => api.syncInputValue(), { immediate: true, + deep: true, }) // Only sync the input value on close as typing into the input will trigger it to open @@ -634,7 +635,10 @@ export let ComboboxInput = defineComponent({ setup(props, { emit, attrs, slots, expose }) { let api = useComboboxContext('ComboboxInput') let id = `headlessui-combobox-input-${useId()}` - api.inputPropsRef = computed(() => props) + + watchEffect(() => { + api.inputPropsRef.value = props + }) expose({ el: api.inputRef, $el: api.inputRef }) From d37e4f38f3f34fde19d12654e5bf00e0bd7c4b4a Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 15 Jul 2022 10:17:53 -0400 Subject: [PATCH 2/2] Update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-vue/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index aa3f77ea93..a68d23f7b8 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don’t close dialog when drag ends outside dialog ([#1667](https://github.com/tailwindlabs/headlessui/pull/1667)) - Fix outside clicks to close dialog when nested, unopened dialogs are present ([#1667](https://github.com/tailwindlabs/headlessui/pull/1667)) - Close `Menu` component when using `tab` key ([#1673](https://github.com/tailwindlabs/headlessui/pull/1673)) +- Resync input when display value changes ([#1679](https://github.com/tailwindlabs/headlessui/pull/1679)) ## [1.6.6] - 2022-07-07 diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 5be87bf29c..4f81b9f03b 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don’t close dialog when drag ends outside dialog ([#1667](https://github.com/tailwindlabs/headlessui/pull/1667)) - Fix outside clicks to close dialog when nested, unopened dialogs are present ([#1667](https://github.com/tailwindlabs/headlessui/pull/1667)) - Close `Menu` component when using `tab` key ([#1673](https://github.com/tailwindlabs/headlessui/pull/1673)) +- Resync input when display value changes ([#1679](https://github.com/tailwindlabs/headlessui/pull/1679)) ## [1.6.7] - 2022-07-12