Create new option on blur with Creatable

First of of all, thanks for the great work on react-select.

So, I needed to create a new option on blur with the Creatable component, even if the the user didn’t executed one of the defaults triggers for the creation (e.g: click on"Create option ‘foo’", hit TAB or ENTER).

I was able to achieve this using refs and invoking createNewOption in my parent component, something like this:

...
handleBlur(){
    let { inputValue } = this.selector;
    this.selector.createNewOption(inputValue)
}

render(){
   <Creatable props={...this.props} onBlur={this.handleBlur} onBlurResetsInput={false} 
   ref={s => this.selector = s}/>
}

I’d like to know if there is any intention of adding a more intuitive support for this, like a createNewOptionOnBlur prop for the Creatable. I will be glad to open a PR if that’s the case.

[githubdoramon]

Plus one for this… would also use it

[ebonow]

@sagar-ranglani

My mistake, I was blurring by tabbing out of the field which of course, selects the value. Here is an updated codesandbox based on your observations.

Codesandbox demo

  const [options, setOptions] = useState([
    { label: "Option 1", value: 1 },
    { label: "Option 2", value: 2 },
    { label: "Option 3", value: 3 }
  ]);

  const [value, setValue] = useState();
  const [inputValue, setInputValue] = useState();

  const handleBlur = () => {
    const label = inputValue?.trim() || "";
    const optionExists = options.find((opt) => opt.label === label);

    if (!label || optionExists) {
      return;
    }

    const option = { label, value: label };

    // Add new option to menu list
    setOptions([...options, option]);
    // Add value to selected options
    setValue([...(value || []), option]);
    // Clear input value
    setInputValue("");
  };

  const onInputChange = (textInput, { action }) => {
    if (action === "input-change") {
      setInputValue(textInput);
    }
    if (action === "input-blur") {
      handleBlur();
    }
  };

  const onChange = (selected) => {
    setValue(selected);
    setInputValue("");
  };

  return (
    <Createable
      isMulti
      inputValue={inputValue}
      value={value}
      options={options}
      onChange={onChange}
      onInputChange={onInputChange}
    />
  );