Resync input when display value changes (#1679)

thecrypticace · web-flow · commit cf78d9771616 · 2022-07-15T10:24:02.000-04:00
* Resync input when display value changes

* Update changelog
diff --git 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-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 (
+            <>
+              <Combobox value={value} onChange={setValue} nullable>
+                {({ open }) => {
+                  if (!open) {
+                    return (
+                      <>
+                        <Combobox.Input
+                          onChange={NOOP}
+                          displayValue={(str?: string) => `${str?.toUpperCase() ?? ''} closed`}
+                        />
+                        <Combobox.Button>Trigger</Combobox.Button>
+                      </>
+                    )
+                  }
+
+                  return (
+                    <>
+                      <Combobox.Input
+                        onChange={NOOP}
+                        displayValue={(str?: string) => `${str?.toUpperCase() ?? ''} open`}
+                      />
+                      <Combobox.Button>Trigger</Combobox.Button>
+                      <Combobox.Options>
+                        <Combobox.Option value="a">Option A</Combobox.Option>
+                        <Combobox.Option value="b">Option B</Combobox.Option>
+                        <Combobox.Option value="c">Option C</Combobox.Option>
+                      </Combobox.Options>
+                    </>
+                  )
+                }}
+              </Combobox>
+            </>
+          )
+        }
+
+        render(<Example />)
+
+        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
@@ -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/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
 
diff --git 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`
+            <Combobox v-model="value" v-slot="{ open }" nullable>
+              <template v-if="!open">
+                <ComboboxInput :displayValue="(str) => (str?.toUpperCase() ?? '') + ' closed'" />
+                <ComboboxButton>Trigger</ComboboxButton>
+              </template>
+              <template v-else>
+                <ComboboxInput :displayValue="(str) => (str?.toUpperCase() ?? '') + ' open'" />
+                <ComboboxButton>Trigger</ComboboxButton>
+                <ComboboxOptions>
+                  <ComboboxOption value="a">Option A</ComboboxOption>
+                  <ComboboxOption value="b">Option B</ComboboxOption>
+                  <ComboboxOption value="c">Option C</ComboboxOption>
+                </ComboboxOptions>
+              </template>
+            </Combobox>
+          `,
+          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
@@ -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 })
 

Original file line number	Diff line number	Diff line change
`@@ -445,7 +445,7 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<`
`445`	`445`	`} else {`
`446`	`446`	`data.inputRef.current.value = ''`
`447`	`447`	`}`
`448`		`- }, [value, data.inputRef, inputPropsRef])`
	`448`	`+ }, [value, data.inputRef, inputPropsRef.current?.displayValue])`
`449`	`449`
`450`	`450`	`let selectOption = useEvent((id: string) => {`
`451`	`451`	`let option = data.options.find((item) => item.id === id)`