Skip to content

Commit 856e541

Browse files
committed
[combobox] Fix input focus on close
1 parent 573f3a7 commit 856e541

File tree

2 files changed

+40
-2
lines changed

2 files changed

+40
-2
lines changed

packages/react/src/combobox/root/ComboboxRoot.test.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,40 @@ describe('<Combobox.Root />', () => {
3535
combobox: true,
3636
});
3737

38+
it('does not focus input when closing via trigger click (input inside popup)', async () => {
39+
const { user } = await render(
40+
<Combobox.Root items={['One', 'Two', 'Three']}>
41+
<Combobox.Trigger data-testid="trigger">
42+
<Combobox.Value />
43+
</Combobox.Trigger>
44+
<Combobox.Portal>
45+
<Combobox.Positioner>
46+
<Combobox.Popup aria-label="Demo">
47+
<Combobox.Input data-testid="input" />
48+
<Combobox.List>
49+
{(item: string) => (
50+
<Combobox.Item key={item} value={item}>
51+
{item}
52+
</Combobox.Item>
53+
)}
54+
</Combobox.List>
55+
</Combobox.Popup>
56+
</Combobox.Positioner>
57+
</Combobox.Portal>
58+
</Combobox.Root>,
59+
);
60+
61+
const trigger = screen.getByTestId('trigger');
62+
63+
await user.click(trigger);
64+
expect(await screen.findByRole('listbox', { hidden: false })).not.to.equal(null);
65+
const input = await screen.findByTestId('input');
66+
expect(input).to.equal(document.activeElement);
67+
68+
await user.click(trigger);
69+
expect(trigger).toHaveFocus();
70+
});
71+
3872
describe('selection behavior', () => {
3973
describe('single', () => {
4074
it('should auto-close popup after selection when open state is uncontrolled', async () => {

packages/react/src/combobox/trigger/ComboboxTrigger.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,9 +138,13 @@ export const ComboboxTrigger = React.forwardRef(function ComboboxTrigger(
138138
return;
139139
}
140140

141-
store.state.setOpen(!open, createBaseUIEventDetails('trigger-press', event.nativeEvent));
141+
const nextOpen = !open;
142+
store.state.setOpen(
143+
nextOpen,
144+
createBaseUIEventDetails('trigger-press', event.nativeEvent),
145+
);
142146

143-
if (currentPointerTypeRef.current !== 'touch') {
147+
if (nextOpen && currentPointerTypeRef.current !== 'touch') {
144148
store.state.inputRef.current?.focus();
145149
}
146150
},

0 commit comments

Comments
 (0)