Optionally control Combobox.Input value

[jtomaszewski]

Currently passing value prop to Combobox.Input in React does nothing. I'd expect that I can optionally control the input value by passing value prop to it.

This would let me accomplish two things:

1. I want to reset the input value to Combobox value when user leaves the input

2. I want to reset the Combobox value when user clicks a "Reset" button (rendered somewhere next to the combobox)

Example:

import { Combobox } from "@headlessui/react";
import React, { ReactElement, useState } from "react";

export function ItemInput({
  value,
  onChange,
}: {
  value: Item | undefined;
  onChange(value: Item | undefined): void;
}): ReactElement {
  const [inputValue, setInputValue] = useState("");

  return (
    <Combobox value={value} onChange={onChange}>
      <Combobox.Input
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
        onBlur={() => setInputValue('')}
      />

      {!!value && (
        <button
          type="button"
          onClick={() => onChange(undefined)}
        >
          Reset
        </button>
      )}
    </Combobox>
  );
}

@RobinMalfait , would you accept a PR for that?

[jtomaszewski]

Forget it, it actually works, as long as you make sure that Combobox.props.value uses null instead of undefined for an empty value (e.g. <Combobox value={value || null}). So I don't really need it.

On the other hand, maybe we could add a warning when user switches uncontrolled Combobox to a controlled one, similarly to what <input /> does in React ( https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro ).

[jonasboardwalker]

@jtomaszewski I think it would make sense to make this as default behavior: clear input when the value is undefined. It just feels natural to me. And in my case I can't set null because I'm using typscript and value accepts only the type inferred from the displayValue prop