Dont't clear Input on onBlur

I noticed that when Select is blurred, the onBlur event clears the input text field: https://github.com/JedWatson/react-select/blob/master/src/Select.js#L215

How can I disable this behaviour and keep whatever the user has started typing ?

[AlexLomm]

A little less hacky way would be to watch for the actual user-initiated input changes by checking the action argument of the onInputChange().

Example:

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

  const options = [
    { label: "first option", value: 1 },
    { label: "second option", value: 2 },
    { label: "third option", value: 3 }
  ];

  return (
    <Select
      options={options}
      inputValue={input}
      onInputChange={(value, action) => {
        // only set the input when the action that caused the
        // change equals to "input-change" and ignore the other
        // ones like: "set-value", "input-blur", and "menu-close"
        if (action.action === "input-change") setInput(value); // <---
      }}
    />
  );
}

[alexmuzenhardt]

If anybody else experienced the same problem I have written above, try this. The code below worked for me.

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

  const options = [
    { label: "first option", value: 1 },
    { label: "second option", value: 2 },
    { label: "third option", value: 3 }
  ];

  return (
    <Select
      options={options}
      inputValue={input}
      onInputChange={(value, action) => {
       if (action?.action !== 'input-blur' && action?.action !== 'menu-close') {
	setInput(value);
       }
      }}
    />
  );
}