[Bug]: Select.ComboBox doesn't open on click after item is selected

[mattiasw]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

In the Select.ComboBox, after having selected an item and the popover has closed, as long as the input field is focused the popover doesn't open again when clicking in the field. I expected it to open.

Steps to reproduce

1. Go to https://www.untitledui.com/react/components/select#search
2. Click the input field and select an item in the list in the popover
3. Click the input field again with the goal to to select another item

Expected behavior

The popover with the item list would open up so that I can select another item.

Actual behavior

The popover did not open.

Code example

Browser

Firefox, Chrome

Device type

Desktop

Component version

0.1.54

Environment details

• OS: Ubuntu 25.10
• Node.js version: 24.12.0
• React version: 19.2.3
• Next.js version: 16.1.6
• Tailwind CSS version: 4.1.16

Screenshots/Videos

No response

Console errors

Additional context

No response

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility

[deebov]

Hey @mattiasw, the popover opens again once you blur and focus again. Isn't this what you're expecting?

[mattiasw]

@deebov No, I (and others here) was expecting it to open without having to blur it first, just like how a regular select element works.

[benjyAuthi]

Crap I just spent the past 2 hours trying to understand why this was happening...

Here is a small repro:

const SelectCompanyInput = ({ value, onSelected}:{value:Company|null, onSelected:(company:Company)=>void})=>{

	const [search,setSearch] = useState('')

	// query companies to pre-fill options
	const {data:fetchedCompanies, isPending, isFetching} = useQuery({
		queryKey: ['fetch-companies-for-terminal-move',search||''],
		queryFn: async ()=>{
			const res = await fetchAPICompanies({page:0, pageSize:50, query:search})
			
			return res.companies as Company[]
		},
		staleTime: 5*60*1000, // 5 minutes
		refetchOnWindowFocus: false,
		refetchOnReconnect: false,
	})

	const debouncedSearch = useDebouncedCallback((value: string) => {
		setSearch(value)
	}, 300)

	const onSearch = (value: string) => {
		console.log("search", value)
		debouncedSearch(value)
		if(!value){
			onSelected(null!)
		}
	}

	const onSelect = (key:Key|null)=>{
		console.log("onSelect")
		if(key){
			const company = fetchedCompanies?.find(c=>String(c.id) === String(key))
			if(company){
				onSelected(company)
				return
			}
		}
		onSelected(null!)
	}

	return (
		<div className="relative">

			<Select.ComboBox isRequired label="Search" onBlur={null!} autoFocus onFocusChange={null!} tooltip="Select a company" value={value ? String(value.id) : null}  shortcut={null!} onChange={onSelect} onInputChange={onSearch} placeholder="Search" items={fetchedCompanies?.map(c=>({id: String(c.id), supportingText: c.agreementType, label: c.name})) || []} >
				{(item) => (
					<Select.Item id={item.id} supportingText={item.supportingText} isDisabled={item.isDisabled} icon={item.icon} >
						{item.label}
					</Select.Item>
				)}
			</Select.ComboBox>
			{(isPending||isFetching)&&<div className="pointer-events-none absolute top-9 z-10 right-3 flex items-center">
				<LoadingIndicator size="xs" />
				</div>}
		</div>
)

after selecting a value, it triggers the onInputChange which then overrides the value and therefore the selection is gone.

@mattiasw did you figure out a hack in the meantime?

[mattiasw]

@benjyAuthi Nope, but I never looked into that either, was just hoping there would be a fix coming.

[deebov]

Hey all, I'll get back to this tomorrow!