Combobox - Display value as empty when open

[deerawan]

Hi everyone,

I've been trying to follow this autocomplete pattern below where display value is set as empty when the options are opened. The benefit is user can start typing right away.

I've tried these solution but didn't work

{open ? (
  <Combobox.Input    
    displayValue={(person) => ''}
  />
) : (
  <Combobox.Input
    displayValue={(person) => person.name }
  />
)}

or

<Combobox.Input
    displayValue={(person) => {
      if (open) {
        return "";
      }

      return person.name;
    }}
  />

CodeSandbox

Any idea on how to achieve that?

[harrygr]

IMO this should be the default behaviour of a combobox, or at least have the selected value highlighted so typing will clear it. There are very few cases where a user, when typing in the Input will want to append to the currently selected value.

[harrygr]

OK, I've put together a sandbox which I think achieves the desired behaviour.

I think the solution is to render the children of the Combobox in a separate component and pass the open state in, which allows us to useEffect it to reset the query value when the combobox is closed. We then return either the selected value or the query value for the displayValue depending on whether the combobox is open or not.

https://codesandbox.io/s/react-tailwind-headless-ui-forked-8fr569?file=/src/App.js