Skip to content

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

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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