Can a combobox also be used to specify a value not in the default list?

[laurenfb]

Hi Paste,

as per this earlier discussion, #3080 (comment), we are using a Combobox for a font size selector. One requested feature is the ability to type a non-listed font size (23, for instance).

Is it possible/advisable to use a Combobox in this way? Should we wrap it in a Form, or is there another way that we can use an onSubmit prop or similar? (I have tried that in development but not had success with the onSubmit actually being called when focus is tabbed off or return is pressed.)

I haven't seen anything similar in a search of previous discussions, which surprises me, so it makes me wonder if this case is inadvisable or not permitted.

Thank you!
Lauren

[laurenfb]

Hi, just an update for anyone looking at this later on, here is how we solved this (unless there is a better way).

  const comboboxRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (comboboxRef && comboboxRef.current) {
      comboboxRef.current.addEventListener('keypress', handleKeyPress);
      const refClosure = comboboxRef.current;
      return () => refClosure.removeEventListener('keypress', handleKeyPress);
    }
  }, [comboboxRef, handleKeyPress]);

  const handleKeyPress = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === 'Enter' && e.target) {
        e.preventDefault();
        const { value } = e.target as HTMLInputElement;
        applyFontSize(value);
      }
    },
    [applyFontSize],
  );

<Combobox ref={comboboxRef} (and other props)/>

[SiTaggart]

Hi @laurenfb

Did you try looking into using the useCombobox state hook?

It provides a lot of built in functionality that you can hook into and respond to changes within the combobox, that might be better than listening to events from a ref.

You are fine with a value that is not present in the list of options, being a valid combobox value though. That should totally work.

Let us know if you have more problems.