Combobox triggerMode="focus" does not hide content on click away

[paularmstrong]

Describe the bug
Setting Combobox to use triggerMode="focus" retains focus when clicking outside of the input & combobox list, making it not possible to hide the list

To Reproduce
Steps to reproduce the behavior:

https://stackblitz.com/edit/github-1j1ryx-qnhe3l?file=src%2Froutes%2Findex.tsx

<Combobox
	defaultFilter={() => true}
	onInputChange={(value) => setInput(value)}
	options={['tacos', 'burritos']}
	triggerMode="focus"
	placeholder="Search…"
	sameWidth
	fitViewport
	itemComponent={(props) => (
		<Combobox.Item item={props.item}>
			<Combobox.ItemLabel>{props.item.textValue}</Combobox.ItemLabel>
			<Combobox.ItemIndicator>✅</Combobox.ItemIndicator>
		</Combobox.Item>
	)}
>
	<Combobox.Label>Sample</Combobox.Label>
	<Combobox.Control>
		<Combobox.Input />
	</Combobox.Control>
	<Combobox.Portal>
		<Combobox.Content>
			<Combobox.Listbox />
		</Combobox.Content>
	</Combobox.Portal>
</Combobox>

1. Render a combobox with triggerMode="focus"
2. Focus the combobox input element, verify the dropdown appears
3. Click outside of the input element and dropdown (not on another focusable element)

Expected behavior
the dropdown should be hidden

Screenshots

Screenflick.Movie.36.mp4

Desktop (please complete the following information):

• OS: any
• Browser all
• Version 0.13.4

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[paularmstrong]

Please re-open. This is still reproducible with 0.13.5

[paularmstrong]

I've updated the stackblitz to show the repro as well

[jer3m01]

Testing in Edge it seems like its fixed. There is a smaller flicker however.

[paularmstrong]

Are we testing the same thing? This is in Chrome latest.

Repro:

1. tab into or click on the input field.
2. Try to click out of the input field to make it lose focus and make the list go away.

Result:
Cannot remove focus from the input field at all. List will not disappear.

When hitting TAB, it blurs for a frame or two, then re-focuses on its own.

Screenflick.Movie.40.webm

[jer3m01]

You're clicking inside the boundaries of the Combobox, here's a demo with distinct backgrounds:

msedge_jo1iBtEWX9.mp4

The flicker isn't consistent though.

[paularmstrong]

Ah, I found the cause of the issue. Attaching a CSS animation to open/close seems to cause it.

See the updated stackblitz: https://stackblitz.com/edit/github-1j1ryx-qnhe3l?file=src/routes/index.tsx,src/app.css

[paularmstrong]

I think it's worth noting that the input element does not lose focus when clicking elsewhere on the page. This is an unexpected behavior. Clicking outside twice or clicking into another focusable element will make it lose focus, however.