Is it possible to not clear the value and keep menu open when I click outside the component?

[pavloburchak]

I use Creatable, SingleValue select. Would like to have an ability to keep the value, when user clicks outside.

[manjushsh]

Hi @pavloburchak, Yes it is possible to do so.

Please checkout this sandbox for working example

Code:

import React, { useState } from "react";
import CreatableSelect from "react-select/creatable";
import "./styles.css";

const createOption = (label) => ({
  label,
  value: label.toLowerCase().replace(/\W/g, "")
});

const allOptions = [
  createOption("One"),
  createOption("Two"),
  createOption("Three")
];

export default function App() {
  const [input, setInput] = useState("");
  const [inputSave, setSave] = useState("");
  const [value, setValue] = useState();

  const [isLoading, setIsLoading] = useState(false);
  const [options, setOptions] = useState(allOptions);

  const handleCreate = (inputValue) => {
    setIsLoading(true);
    setTimeout(() => {
      const newOption = createOption(inputValue);
      setIsLoading(false);
      setOptions((prev) => [...prev, newOption]);
      setValue(newOption);
    }, 1000);
  };

  return (
    <div className="p-2">
      <CreatableSelect
        isClearable
        menuIsOpen
        isDisabled={isLoading}
        isLoading={isLoading}
        onChange={(newValue) => setValue(newValue)}
        onCreateOption={handleCreate}
        placeholder={inputSave || "Search Something"} // when blurred & value == "" this shows
        value={value}
        // value="" // use this to always show placeholder
        inputValue={input} // allows you continue where you left off
        onInputChange={setInput} // allows for actually typing
        options={options}
        onMenuClose={() => setSave(input)} // saves the input before it's cleared
        onFocus={() => {
          setInput(inputSave); // keeps the state
          setSave(""); // prevents keeping initial value as placeholder
        }} // input will be cleared regardless
        blurInputOnSelect // actually allows for ^^ to work
      />

      <div
        className={`my-3 alert ${
          value?.label ? "alert-success" : "alert-danger"
        }`}
        role="alert"
      >
        {value?.label
          ? `You selected the ${value?.label} with the value ${value?.value}`
          : "You haven't selected any option"}
      </div>
    </div>
  );
}

[WagnerMoreira]

@JedWatson I'd love to make a contribution and make this work with a prop, like keepValueOnBlur.
Would you accept a PR for that? I'm having this exact same issue, and I see a lot of folks have the same need.