Skip to content

Combobox: can't click to place cursor, can't type spaces #2483

Closed
@david-crespo

Description

@david-crespo

I think the button is eating the event that should be going to the input. Headless's example doesn't have this problem, so it must be something we're doing.

2024-10-01-click-combobox.mp4

Ok, haha. Turns out we are using ComboboxInput inside of ComboboxButton, but you're only supposed to need one or the other. The styles will need some untangling, but I was able to confirm immediately that changing ComboboxButton to a div does in fact fix clicking to place the cursor and typing spaces.

<ComboboxButton
className={cn(
`flex h-10 w-full grow items-center justify-between rounded border text-sans-md ring-accent-secondary data-[open]:ring-2`,
hasError
? 'focus-error border-error-secondary hover:border-error'
: 'border-default hover:border-hover',
hasError && 'data-[open]:ring-error-secondary',
disabled
? 'cursor-not-allowed text-disabled bg-disabled !border-default'
: 'bg-default',
disabled && hasError && '!border-error-secondary'
)}
>
<ComboboxInput
aria-label={ariaLabel}
displayValue={() => (selected ? selected : query)}
onChange={(event) => {
setQuery(event.target.value)
onInputChange?.(event.target.value)
}}
placeholder={placeholder}
disabled={disabled || isLoading}
className={cn(
`w-full rounded !border-none px-3 py-[0.5rem] !outline-none text-sans-md text-default placeholder:text-quaternary`,
disabled
? 'cursor-not-allowed text-disabled bg-disabled !border-default'
: 'bg-default',
hasError && 'focus-error'
)}
/>
{items.length > 0 && (
<div className="flex items-center border-l px-3 border-secondary" aria-hidden>
<SelectArrows6Icon title="Select" className="w-2 text-tertiary" />
</div>
)}
</ComboboxButton>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions