How to clear the input value on blur?

[omermecitoglu]

I want to clear the input text if nothing selected when a user focus out from the component. There is a prop called onInputChange but I couldn't find how to make the input value controllable. I don't want to use ref and assign events for this.

[ericgio]

Using a ref is the right way to achieve this behavior. Use onBlur to check whether there are any selections, and clear the component if not:

const Example = () => {
  const typeaheadRef = useRef(null);
  const [selected, setSelected] = useState([]);

  return (
    <Typeahead
      id="clear-on-blur"
      onBlur={() => {
        if (!selected.length) {
          typeaheadRef.current.clear();
        }
      }}
      onChange={setSelected}
      options={options}
      ref={typeaheadRef}
      selected={selected}
    />
  );
};

Working sandbox