ComboBox.Input add additional API props

[saulflores95]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example v1.5.0

What browser are you using?

Chrome

Currently using headless UI Combo Box we are using it to be able to select existing 'tags' and if a tag does not exist we create it by clicking on an icon that was added. This onClick event triggers a method called addOnClick.

The functionality we want is to detect when the 'Enter is pressed I want to trigger the same addOnClick Method.

The component looks as such.

const SelectInputWithSearch: FC<SelectInputWithSearchProps> = ({
  data,
  label,
  handleInputChange,
  handleSelect,
  addOnClick,
  ...inputProps
}) => {
  const [selectedData, setSelectedData] = useState("");

  const handleSelection = (selected: string) => {
    setSelectedData(selected);
    handleSelect(selected);
  };

  return (
    <Combobox as="div" value={selectedData} onChange={handleSelection}>
      <Combobox.Label className="block text-sm font-medium text-gray-700 ">
        {label}
      </Combobox.Label>
      <div className="relative mt-1 w-full">
        <Combobox.Button className="absolute inset-y-0 left-0 flex items-center rounded-r-md px-2 focus:outline-none">
          <SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
        </Combobox.Button>

        <Combobox.Input
          className="w-full text-black rounded-md border border-gray-300 bg-white py-2 pl-8 pr-10 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
          onChange={handleInputChange}
          displayValue={(tag: string) => tag}
        />

        <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
          {data.length > 0 ? (
            <SelectorIcon
              className="h-5 w-5 text-gray-400"
              aria-hidden="true"
            />
          ) : (
            <PlusIcon
              className="h-5 w-5 text-gray-400"
              aria-hidden="true"
              onClick={(e) => {
                e.preventDefault();
                addOnClick();
                setSelectedData("");
              }}
            />
          )}
        </Combobox.Button>

        {data.length > 0 && (
          <Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
            {data.map((tag) => (
              <Combobox.Option
                key={tag}
                value={tag}
                className={({ active }) =>
                  classNames(
                    "relative cursor-default select-none py-2 pl-3 pr-9",
                    active ? "bg-indigo-600 text-white" : "text-gray-900",
                  )
                }
              >
                {({ active, selected }) => (
                  <>
                    <span
                      className={classNames(
                        "block truncate",
                        `${selected && "font-semibold"}`,
                      )}
                    >
                      {tag}
                    </span>
                  </>
                )}
              </Combobox.Option>
            ))}
          </Combobox.Options>
        )}
      </div>
    </Combobox>
  );
};
export default SelectInputWithSearch;

Currently, it is not shown in the docks if it's possible to expand the current onKeyDown functionality that headless UI already provides.

By taking a look at headless UI we can see there is an interface that defines the two possible props to pass down

interface InputRenderPropArg {
    open: boolean;
    disabled: boolean;
}

and a type where we can see the onKeyDown event being an option.

declare type InputPropsWeControl = 'id' | 'role' | 'type' | 'aria-labelledby' | 'aria-expanded' | 'aria-activedescendant' | 'onKeyDown' | 'onChange' | 'displayValue';

Is there any possible way of augmenting/expanding the keyDown prop? For example, just wanting to trigger the addOnClick method when a key down event is detected an enter key being pressed?

For example

        <Combobox.Input
          className="w-full text-black rounded-md border border-gray-300 bg-white py-2 pl-8 pr-10 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
          onChange={handleInputChange}
          displayValue={(tag: string) => tag}
          onKeyDown={() => {console.log('Extra things happening on keydown}}
        />

[chase]

At the very least it would be nice to be able to pass an onKeyDown handler. For example, I'd like to be able to change what key opens/closes the list.

One way of keeping the existing behavior for some cases but not all cases is for the exposed onKeyDown, if the event's default is prevented, then the HeadlessUI implementation is not called. Obviously the downside is that the event will also be prevented on the native event.

Alternatively, having onKeyDown return false could prevent the HeadlessUI implementation from being called.