don’t clear input on select using React-Select

There wasn’t a good answer to this question so I’ll answer it:

The problem is if you want to use the React-Select and you want persistent input value that doesn’t get cleared on select or blur. This is not currently supported within the component, so a work-around is necessary.

I also answered this on one of the several issues raised on this topic


you can also augment this with this to get desired effects

const App = () => {
  const [input, setInput] = useState("");
  const [inputSave, setSave] = useState("");
  return (
      placeholder={inputSave} // when blurred & value == "" this shows
      value="" // always show placeholder
      inputValue={input} // allows you continue where you left off
      onInputChange={setInput} // allows for actually typing
      onMenuClose={() => setSave(input)} // before the input is cleared, save it
      onFocus={() => {
        setSave(""); // prevents undesired placeholder value
      blurInputOnSelect  // actually allows for ^^ to work

Edit sharp-pike-rnjbr