Skip to content

Commit ac64a80

Browse files
RobinMalfaitRobinMalfait
committed
disable immediate and virtual feature for Combobox component in patch release
1 parent 279356b commit ac64a80

File tree

4 files changed

+327
-313
lines changed

4 files changed

+327
-313
lines changed

‎packages/@headlessui-react/src/components/combobox/combobox.test.tsx‎

Lines changed: 141 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1832,7 +1832,7 @@ describe('Composition', () => {
18321832
)
18331833
})
18341834

1835-
describe.each([{ virtual: true }, { virtual: false }])(
1835+
describe.each([{ virtual: false }, { virtual: false }])(
18361836
'Keyboard interactions %s',
18371837
({ virtual }) => {
18381838
let data = ['Option A', 'Option B', 'Option C']
@@ -4309,7 +4309,7 @@ describe.each([{ virtual: true }, { virtual: false }])(
43094309
}
43104310
)
43114311

4312-
describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s', ({ virtual }) => {
4312+
describe.each([{ virtual: false }, { virtual: false }])('Mouse interactions %s', ({ virtual }) => {
43134313
let data = ['Option A', 'Option B', 'Option C']
43144314
function MyCombobox<T>({
43154315
options = data.slice() as T[],
@@ -4411,126 +4411,126 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s',
44114411
})
44124412
)
44134413

4414-
it(
4415-
'should be possible to open the combobox by focusing the input with immediate mode enabled',
4416-
suppressConsoleLogs(async () => {
4417-
render(<MyCombobox comboboxProps={{ immediate: true }} label={false} />)
4418-
4419-
assertComboboxButton({
4420-
state: ComboboxState.InvisibleUnmounted,
4421-
attributes: { id: 'headlessui-combobox-button-2' },
4422-
})
4423-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4424-
4425-
// Focus the input
4426-
await focus(getComboboxInput())
4427-
4428-
// Verify it is visible
4429-
assertComboboxButton({ state: ComboboxState.Visible })
4430-
assertComboboxList({
4431-
state: ComboboxState.Visible,
4432-
attributes: { id: 'headlessui-combobox-options-3' },
4433-
})
4434-
assertActiveElement(getComboboxInput())
4435-
assertComboboxButtonLinkedWithCombobox()
4436-
4437-
// Verify we have combobox options
4438-
let options = getComboboxOptions()
4439-
expect(options).toHaveLength(3)
4440-
options.forEach((option) => assertComboboxOption(option))
4441-
})
4442-
)
4443-
4444-
it(
4445-
'should not be possible to open the combobox by focusing the input with immediate mode disabled',
4446-
suppressConsoleLogs(async () => {
4447-
render(<MyCombobox />)
4448-
4449-
assertComboboxButton({
4450-
state: ComboboxState.InvisibleUnmounted,
4451-
attributes: { id: 'headlessui-combobox-button-3' },
4452-
})
4453-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4454-
4455-
// Focus the input
4456-
await focus(getComboboxInput())
4457-
4458-
// Verify it is invisible
4459-
assertComboboxButton({
4460-
state: ComboboxState.InvisibleUnmounted,
4461-
attributes: { id: 'headlessui-combobox-button-3' },
4462-
})
4463-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4464-
})
4465-
)
4466-
4467-
it(
4468-
'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
4469-
suppressConsoleLogs(async () => {
4470-
render(<MyCombobox comboboxProps={{ immediate: true, disabled: true }} />)
4471-
4472-
assertComboboxButton({
4473-
state: ComboboxState.InvisibleUnmounted,
4474-
attributes: { id: 'headlessui-combobox-button-3' },
4475-
})
4476-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4477-
4478-
// Focus the input
4479-
await focus(getComboboxInput())
4480-
4481-
// Verify it is invisible
4482-
assertComboboxButton({
4483-
state: ComboboxState.InvisibleUnmounted,
4484-
attributes: { id: 'headlessui-combobox-button-3' },
4485-
})
4486-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4487-
})
4488-
)
4489-
4490-
it(
4491-
'should be possible to close a combobox on click with immediate mode enabled',
4492-
suppressConsoleLogs(async () => {
4493-
render(<MyCombobox comboboxProps={{ immediate: true }} />)
4494-
4495-
// Open combobox
4496-
await click(getComboboxButton())
4497-
4498-
// Verify it is visible
4499-
assertComboboxButton({ state: ComboboxState.Visible })
4500-
4501-
// Click to close
4502-
await click(getComboboxButton())
4503-
4504-
// Verify it is closed
4505-
assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4506-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4507-
assertActiveElement(getComboboxInput())
4508-
})
4509-
)
4510-
4511-
it(
4512-
'should be possible to close a focused combobox on click with immediate mode enabled',
4513-
suppressConsoleLogs(async () => {
4514-
render(<MyCombobox comboboxProps={{ immediate: true }} />)
4515-
assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4516-
4517-
// Open combobox by focusing input
4518-
await focus(getComboboxInput())
4519-
assertActiveElement(getComboboxInput())
4520-
4521-
// Verify it is visible
4522-
assertComboboxButton({ state: ComboboxState.Visible })
4523-
4524-
// Click to close
4525-
await click(getComboboxButton())
4526-
4527-
// Verify it is closed
4528-
assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4529-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4530-
assertActiveElement(getComboboxInput())
4531-
})
4532-
)
4533-
4414+
// it(
4415+
// 'should be possible to open the combobox by focusing the input with immediate mode enabled',
4416+
// suppressConsoleLogs(async () => {
4417+
// render(<MyCombobox comboboxProps={{ immediate: true }} label={false} />)
4418+
//
4419+
// assertComboboxButton({
4420+
// state: ComboboxState.InvisibleUnmounted,
4421+
// attributes: { id: 'headlessui-combobox-button-2' },
4422+
// })
4423+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4424+
//
4425+
// // Focus the input
4426+
// await focus(getComboboxInput())
4427+
//
4428+
// // Verify it is visible
4429+
// assertComboboxButton({ state: ComboboxState.Visible })
4430+
// assertComboboxList({
4431+
// state: ComboboxState.Visible,
4432+
// attributes: { id: 'headlessui-combobox-options-3' },
4433+
// })
4434+
// assertActiveElement(getComboboxInput())
4435+
// assertComboboxButtonLinkedWithCombobox()
4436+
//
4437+
// // Verify we have combobox options
4438+
// let options = getComboboxOptions()
4439+
// expect(options).toHaveLength(3)
4440+
// options.forEach((option) => assertComboboxOption(option))
4441+
// })
4442+
// )
4443+
//
4444+
// it(
4445+
// 'should not be possible to open the combobox by focusing the input with immediate mode disabled',
4446+
// suppressConsoleLogs(async () => {
4447+
// render(<MyCombobox />)
4448+
//
4449+
// assertComboboxButton({
4450+
// state: ComboboxState.InvisibleUnmounted,
4451+
// attributes: { id: 'headlessui-combobox-button-3' },
4452+
// })
4453+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4454+
//
4455+
// // Focus the input
4456+
// await focus(getComboboxInput())
4457+
//
4458+
// // Verify it is invisible
4459+
// assertComboboxButton({
4460+
// state: ComboboxState.InvisibleUnmounted,
4461+
// attributes: { id: 'headlessui-combobox-button-3' },
4462+
// })
4463+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4464+
// })
4465+
// )
4466+
//
4467+
// it(
4468+
// 'should not be possible to open the combobox by focusing the input with immediate mode enabled when button is disabled',
4469+
// suppressConsoleLogs(async () => {
4470+
// render(<MyCombobox comboboxProps={{ immediate: true, disabled: true }} />)
4471+
//
4472+
// assertComboboxButton({
4473+
// state: ComboboxState.InvisibleUnmounted,
4474+
// attributes: { id: 'headlessui-combobox-button-3' },
4475+
// })
4476+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4477+
//
4478+
// // Focus the input
4479+
// await focus(getComboboxInput())
4480+
//
4481+
// // Verify it is invisible
4482+
// assertComboboxButton({
4483+
// state: ComboboxState.InvisibleUnmounted,
4484+
// attributes: { id: 'headlessui-combobox-button-3' },
4485+
// })
4486+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4487+
// })
4488+
// )
4489+
//
4490+
// it(
4491+
// 'should be possible to close a combobox on click with immediate mode enabled',
4492+
// suppressConsoleLogs(async () => {
4493+
// render(<MyCombobox comboboxProps={{ immediate: true }} />)
4494+
//
4495+
// // Open combobox
4496+
// await click(getComboboxButton())
4497+
//
4498+
// // Verify it is visible
4499+
// assertComboboxButton({ state: ComboboxState.Visible })
4500+
//
4501+
// // Click to close
4502+
// await click(getComboboxButton())
4503+
//
4504+
// // Verify it is closed
4505+
// assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4506+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4507+
// assertActiveElement(getComboboxInput())
4508+
// })
4509+
// )
4510+
//
4511+
// it(
4512+
// 'should be possible to close a focused combobox on click with immediate mode enabled',
4513+
// suppressConsoleLogs(async () => {
4514+
// render(<MyCombobox comboboxProps={{ immediate: true }} />)
4515+
// assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4516+
//
4517+
// // Open combobox by focusing input
4518+
// await focus(getComboboxInput())
4519+
// assertActiveElement(getComboboxInput())
4520+
//
4521+
// // Verify it is visible
4522+
// assertComboboxButton({ state: ComboboxState.Visible })
4523+
//
4524+
// // Click to close
4525+
// await click(getComboboxButton())
4526+
//
4527+
// // Verify it is closed
4528+
// assertComboboxButton({ state: ComboboxState.InvisibleUnmounted })
4529+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
4530+
// assertActiveElement(getComboboxInput())
4531+
// })
4532+
// )
4533+
//
45344534
it(
45354535
'should be possible to open the combobox on click',
45364536
suppressConsoleLogs(async () => {
@@ -5031,25 +5031,25 @@ describe.each([{ virtual: true }, { virtual: false }])('Mouse interactions %s',
50315031
assertActiveComboboxOption(getComboboxOptions()[1])
50325032
})
50335033
)
5034-
5035-
it(
5036-
'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
5037-
suppressConsoleLogs(async () => {
5038-
render(<MyCombobox comboboxProps={{ immediate: true }} />)
5039-
5040-
// Open combobox by focusing input
5041-
await focus(getComboboxInput())
5042-
assertActiveElement(getComboboxInput())
5043-
5044-
assertComboboxList({ state: ComboboxState.Visible })
5045-
5046-
let options = getComboboxOptions()
5047-
5048-
// We should be able to click the first option
5049-
await click(options[1])
5050-
assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
5051-
})
5052-
)
5034+
//
5035+
// it(
5036+
// 'should be possible to click a combobox option, which closes the combobox with immediate mode enabled',
5037+
// suppressConsoleLogs(async () => {
5038+
// render(<MyCombobox comboboxProps={{ immediate: true }} />)
5039+
//
5040+
// // Open combobox by focusing input
5041+
// await focus(getComboboxInput())
5042+
// assertActiveElement(getComboboxInput())
5043+
//
5044+
// assertComboboxList({ state: ComboboxState.Visible })
5045+
//
5046+
// let options = getComboboxOptions()
5047+
//
5048+
// // We should be able to click the first option
5049+
// await click(options[1])
5050+
// assertComboboxList({ state: ComboboxState.InvisibleUnmounted })
5051+
// })
5052+
// )
50535053

50545054
it(
50555055
'should be possible to click a disabled combobox option, which is a no-op',

‎packages/@headlessui-react/src/components/combobox/combobox.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -605,11 +605,6 @@ export type ComboboxProps<
605605
__demoMode?: boolean
606606
form?: string
607607
name?: string
608-
immediate?: boolean
609-
virtual?: {
610-
options: TValue[]
611-
disabled?: (value: TValue) => boolean
612-
} | null
613608
}
614609

615610
function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
@@ -644,10 +639,22 @@ function ComboboxFn<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_T
644639
__demoMode = false,
645640
nullable = false,
646641
multiple = false,
647-
immediate = false,
648-
virtual = null,
642+
// @ts-expect-error
643+
immediate: _immediate = false,
644+
// @ts-expect-error
645+
virtual: _virtual = null,
649646
...theirProps
650647
} = props
648+
649+
// Disabling immediate mode feature for patch release v1.7.x
650+
let immediate = false
651+
652+
// Disabling virtual feature for patch release v1.7.x
653+
let virtual = null as {
654+
options: TValue[]
655+
disabled?: (value: TValue) => boolean
656+
} | null
657+
651658
let [value = multiple ? [] : undefined, theirOnChange] = useControllable<any>(
652659
controlledValue,
653660
controlledOnChange,

0 commit comments

Comments
 (0)