create a new option on enter

[egreb]

Hello.

I want to make a component with react-select-search where I can create and select a new option when the user clicks enter. Is something like this possible with the current api?

[tbleckert]

Hi @egreb , sorry for the delay, trying to catch some sun hehe. It's possible if you use the headless mode (useSelect hook). So by using your own components you can setup your own event on enter and modify your options array.

This feature should be directly built-in though I think, will look into it.

[egreb]

No problem at all.

I did not think of headless mode! I'll try to work something it out, if/when I have a solution I will post it here.

thanks for the reply!

[egreb]

How do I "manually" select an item from the options list?

I got it working almost, I just want the new option to be selected when the user presses enter. It sets the correct value, but the input is not updated correctly.

export function SelectSearchOnEnterCreate({ onCreate, value, ...rest }: Props) {
  const [snapshot, valueProps, optionProps] = useSelect({
    ...rest,
    value: value,
    search: true,
    multiple: false,
    filterOptions: fuzzySearch,
  });

  const handleKeyPress = (event: any) => {
    if (event.key === "Enter" && !snapshot.options.length) {
      event.preventDefault();
      onCreate(snapshot.search);
      return;
    }
    valueProps.onKeyPress(event);
  };

  return (
    <StyledSelectSearch>
      <div className="select-search" tw="flex">
        <div className="select-search__value" tw="flex flex-col gap-y-1">
          <input
            {...(valueProps as any)}
            type="text"
            onKeyPress={handleKeyPress}
            className="select-search__input"
            value={snapshot.focus ? snapshot.search : snapshot.displayValue}
          ></input>
          {!snapshot.options.length && (
            <small tw="text-gray-500 font-medium px-1">Press enter to create value</small>
          )}
        </div>
        {snapshot.focus && (
          <div className="select-search__select">
            <ul className="select-search__options">
              {snapshot.options.map((option) => (
                <li key={option.value} className="select-search__row">
                  <button
                    {...(optionProps as any)}
                    className="select-search__option"
                    value={option.value}
                  >
                    {option.name}
                  </button>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </StyledSelectSearch>
  );
}

This is what I got so far.