[combobox] clearing value using the input-inside-popup pattern

[cgatian]

Bug report

Current behavior

When you build a Combobox that uses the input-inside-popup pattern, the ESC key does not clear the selection.

Clearing the value of the Combobox with the ESC key is currently managed by the Combobox.Input. If you are using Combobox.Input with the popup pattern, the behavior closes the popup, which is expected. If youre using this outside the popup, it also clears the value. However, there doesnt seem to be a clean way to clear the value when using a Combobox.Trigger, as this component does not have keyboard event handlers for Escape.

As a workaround you can render a Combobox.Clear element and manually invoke the click action on the Combobox.Clear element.

  const clearRef = useRef<HTMLButtonElement | null>(null); 
  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {
    if (event.key === 'Escape' && event.target === event.currentTarget && clearRef.current) {
      clearRef.current?.click();
      event.stopPropagation();
    }
  };

return (
   <>
      <Combobox.Trigger
        ref={ctx.ref}
        onKeyDown={handleKeyDown}
      />
      <Combobox.Clear ref={clearRef} /> // Style it with display: none
   </>
);

This could be by design perhaps. But it does seem odd that the "input-inside-popup" behaves slightly different than the other variants of the Combobox.

Expected behavior

Pressing the ESC key on a Combobox.Trigger clears the input.

Reproducible example

https://base-ui.com/react/components/combobox#input-inside-popup

Base UI version

1.5.0

Which browser are you using?

Edge

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

Voiceover

Additional context

Edit: My workaround is too aggressive by using event.stopPropagation. This prevents dialogs from closing

[mj12albert]

Alternative workaround with controlled mode instead of a hidden ComboboxClear:

const [value, setValue] = React.useState<Country | null>(null);

<Combobox.Root items={countries} value={value} onValueChange={setValue}>
  <Combobox.Trigger
    onKeyDown={(event) => {
      if (event.key !== 'Escape' || value == null) {
        return;
      }

      setValue(null);
      event.stopPropagation();
    }}
  >
    <Combobox.Value placeholder="Select country" />
  </Combobox.Trigger>
  {/* popup */}
</Combobox.Root>