convert to immediate prop on the Combobox itself

tailwindlabs · Aug 31, 2023 · 6a36fba · 6a36fba
1 parent 4577735
commit 6a36fba
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 40 deletions.
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
@@ -4699,11 +4699,11 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to open the combobox by focusing the input with openOnFocus enabled',
+    'should be possible to open the combobox by focusing the input with immediate mode enabled',
     suppressConsoleLogs(async () => {
       render(
-        <Combobox value="test">
-          <Combobox.Input onChange={NOOP} openOnFocus />
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
           <Combobox.Button>Trigger</Combobox.Button>
           <Combobox.Options>
             <Combobox.Option value="a">Option A</Combobox.Option>
@@ -4739,7 +4739,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not be possible to open the combobox by focusing the input with openOnFocus disabled',
+    'should not be possible to open the combobox by focusing the input with immediate mode disabled',
     suppressConsoleLogs(async () => {
       render(
         <Combobox value="test">
@@ -4772,11 +4772,11 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not be possible to open the combobox by focusing the input with openOnFocus enabled when button is disabled',
+    'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
     suppressConsoleLogs(async () => {
       render(
-        <Combobox value="test" disabled>
-          <Combobox.Input onChange={NOOP} openOnFocus />
+        <Combobox value="test" disabled immediate>
+          <Combobox.Input onChange={NOOP} />
           <Combobox.Button>Trigger</Combobox.Button>
           <Combobox.Options>
             <Combobox.Option value="a">Option A</Combobox.Option>
@@ -4805,11 +4805,11 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to close a combobox on click with openOnFocus enabled',
+    'should be possible to close a combobox on click with immediate mode enabled',
     suppressConsoleLogs(async () => {
       render(
-        <Combobox value="test">
-          <Combobox.Input onChange={NOOP} openOnFocus />
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
           <Combobox.Button>Trigger</Combobox.Button>
           <Combobox.Options>
             <Combobox.Option value="a">Option A</Combobox.Option>
@@ -4836,11 +4836,11 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to close a focused combobox on click with openOnFocus enabled',
+    'should be possible to close a focused combobox on click with immediate mode enabled',
     suppressConsoleLogs(async () => {
       render(
-        <Combobox value="test">
-          <Combobox.Input onChange={NOOP} openOnFocus />
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
           <Combobox.Button>Trigger</Combobox.Button>
           <Combobox.Options>
             <Combobox.Option value="a">Option A</Combobox.Option>
@@ -5529,11 +5529,11 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to click a combobox option, which closes the combobox with openOnFocus enabled',
+    'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
     suppressConsoleLogs(async () => {
       render(
-        <Combobox value="test">
-          <Combobox.Input onChange={NOOP} openOnFocus />
+        <Combobox value="test" immediate>
+          <Combobox.Input onChange={NOOP} />
           <Combobox.Button>Trigger</Combobox.Button>
           <Combobox.Options>
             <Combobox.Option value="a">Option A</Combobox.Option>

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -298,6 +298,7 @@ let ComboboxDataContext = createContext<
       mode: ValueMode
       activeOptionIndex: number | null
       nullable: boolean
+      immediate: boolean
       compare(a: unknown, z: unknown): boolean
       isSelected(value: unknown): boolean
       __demoMode: boolean
@@ -395,6 +396,7 @@ export type ComboboxProps<
   __demoMode?: boolean
   form?: string
   name?: string
+  immediate?: boolean
 }
 
 function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
@@ -429,6 +431,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
     __demoMode = false,
     nullable = false,
     multiple = false,
+    immediate = false,
     ...theirProps
   } = props
   let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(
@@ -479,6 +482,7 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
   let data = useMemo<_Data>(
     () => ({
       ...state,
+      immediate,
       optionsPropsRef,
       labelRef,
       inputRef,
@@ -734,7 +738,6 @@ export type ComboboxInputProps<TTag extends ElementType, TType> = Props<
     defaultValue?: TType
     displayValue?(item: TType): string
     onChange?(event: React.ChangeEvent<HTMLInputElement>): void
-    openOnFocus?: boolean
   }
 >
 
@@ -749,7 +752,6 @@ function InputFn<
     id = `headlessui-combobox-input-${internalId}`,
     onChange,
     displayValue,
-    openOnFocus = false,
     // @ts-ignore: We know this MAY NOT exist for a given tag but we only care when it _does_ exist.
     type = 'text',
     ...theirProps
@@ -1080,7 +1082,7 @@ function InputFn<
     if (data.optionsRef.current?.contains(event.relatedTarget as HTMLElement)) return
     if (data.disabled) return
 
-    if (!openOnFocus) return
+    if (!data.immediate) return
     if (data.comboboxState === ComboboxState.Open) return
 
     actions.openCombobox()

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -5004,12 +5004,12 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to open the combobox by focusing the input with openOnFocus enabled',
+    'should be possible to open the combobox by focusing the input with immediate mode enabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
-          <Combobox v-model="value" as="div">
-            <ComboboxInput openOnFocus />
+          <Combobox v-model="value" as="div" immediate>
+            <ComboboxInput />
             <ComboboxButton>Trigger</ComboboxButton>
             <ComboboxOptions>
               <ComboboxOption value="a">Option A</ComboboxOption>
@@ -5050,7 +5050,7 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not be possible to open the combobox by focusing the input with openOnFocus disabled',
+    'should not be possible to open the combobox by focusing the input with immediate mode disabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
@@ -5086,12 +5086,12 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should not be possible to open the combobox by focusing the input with openOnFocus enabled when button is disabled',
+    'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
-          <Combobox v-model="value" as="div" disabled>
-            <ComboboxInput openOnFocus />
+          <Combobox v-model="value" as="div" disabled immediate>
+            <ComboboxInput />
             <ComboboxButton>Trigger</ComboboxButton>
             <ComboboxOptions>
               <ComboboxOption value="a">Option A</ComboboxOption>
@@ -5122,12 +5122,12 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to close a combobox on click with openOnFocus enabled',
+    'should be possible to close a combobox on click with immediate mode enabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
-          <Combobox v-model="value">
-            <ComboboxInput openOnFocus />
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
             <ComboboxButton>Trigger</ComboboxButton>
             <ComboboxOptions>
               <ComboboxOption value="a">Option A</ComboboxOption>
@@ -5156,12 +5156,12 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to close a focused combobox on click with openOnFocus enabled',
+    'should be possible to close a focused combobox on click with immediate mode enabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
-          <Combobox v-model="value">
-            <ComboboxInput openOnFocus />
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
             <ComboboxButton>Trigger</ComboboxButton>
             <ComboboxOptions>
               <ComboboxOption value="a">Option A</ComboboxOption>
@@ -5891,12 +5891,12 @@ describe('Mouse interactions', () => {
   )
 
   it(
-    'should be possible to click a combobox option, which closes the combobox with openOnFocus enabled',
+    'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
     suppressConsoleLogs(async () => {
       renderTemplate({
         template: html`
-          <Combobox v-model="value">
-            <ComboboxInput openOnFocus />
+          <Combobox v-model="value" immediate>
+            <ComboboxInput />
             <ComboboxButton>Trigger</ComboboxButton>
             <ComboboxOptions>
               <ComboboxOption value="alice">alice</ComboboxOption>

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -140,6 +140,7 @@ export let Combobox = defineComponent({
     name: { type: String, optional: true },
     nullable: { type: Boolean, default: false },
     multiple: { type: [Boolean], default: false },
+    immediate: { type: [Boolean], default: false },
   },
   inheritAttrs: false,
   setup(props, { slots, attrs, emit }) {
@@ -223,6 +224,7 @@ export let Combobox = defineComponent({
       },
       defaultValue: computed(() => props.defaultValue),
       nullable,
+      immediate: computed(() => props.immediate),
       inputRef,
       labelRef,
       buttonRef,
@@ -536,6 +538,7 @@ export let Combobox = defineComponent({
               'defaultValue',
               'nullable',
               'multiple',
+              'immediate',
               'onUpdate:modelValue',
               'by',
             ]),
@@ -700,7 +703,6 @@ export let ComboboxInput = defineComponent({
     displayValue: { type: Function as PropType<(item: unknown) => string> },
     defaultValue: { type: String, default: undefined },
     id: { type: String, default: () => `headlessui-combobox-input-${useId()}` },
-    openOnFocus: { type: Boolean, default: false },
   },
   emits: {
     change: (_value: Event & { target: HTMLInputElement }) => true,
@@ -1038,7 +1040,7 @@ export let ComboboxInput = defineComponent({
       if (dom(api.optionsRef)?.contains(event.relatedTarget as HTMLElement)) return
       if (api.disabled.value) return
 
-      if (!props.openOnFocus) return
+      if (!api.immediate.value) return
       if (api.comboboxState.value === ComboboxStates.Open) return
 
       api.openCombobox()

diff --git a/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx b/packages/playground-react/pages/combobox/combobox-open-on-focus.tsx
@@ -53,6 +53,7 @@ export default function Home() {
               setActivePerson(value)
               setQuery('')
             }}
+            immediate
             as="div"
           >
             <Combobox.Label className="block text-sm font-medium leading-5 text-gray-700">
@@ -64,7 +65,6 @@ export default function Home() {
                 <Combobox.Input
                   onChange={(e) => setQuery(e.target.value)}
                   className="border-none px-3 py-1 outline-none"
-                  openOnFocus
                 />
                 <Combobox.Button as={Button}>
                   <span className="pointer-events-none flex items-center px-2">

diff --git a/packages/playground-vue/src/components/combobox/combobox-open-on-focus.vue b/packages/playground-vue/src/components/combobox/combobox-open-on-focus.vue
@@ -67,7 +67,7 @@ export default defineComponent({
         Selected person: {{ activePerson?.name ?? 'Nobody yet' }}
       </div>
       <div class="space-y-1">
-        <Combobox v-model="activePerson" as="div">
+        <Combobox v-model="activePerson" as="div" immediate>
           <ComboboxLabel class="block text-sm font-medium leading-5 text-gray-700">
             Assigned to
           </ComboboxLabel>
@@ -77,7 +77,6 @@ export default defineComponent({
               <ComboboxInput
                 @change="query = $event.target.value"
                 :displayValue="(person) => person?.name ?? ''"
-                :open-on-focus="true"
                 class="border-none px-3 py-1 outline-none"
               />
               <ComboboxButton