Dont't clear Input on onBlur

[slybridges]

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 ?

[JedWatson]

I'm open to adding an onBlurResetsInput prop (default true) that prevents this behaviour... PR welcome, as I'm travelling for the next week, otherwise I'll get to it when I'm back.

[slybridges]

Hi @JedWatson, thanks, I've created the PR as suggested.
Let me know any comment.

And great job on react-select by the way! (should have started with this, how rude of me)

[joibor]

Any update in v3 ?

[gitowiec]

@JedWatson How to not clear the input value on blur?

[alita-moore]

@gitowiec:

Here's a solution that worked for me
I tried the above solutions but they weren't ideal for me, so I added a bit of extra logic here(has implementation example)

const App = () => {
	const [input, setInput] = useState("");
	const [inputSave, setSave] = useState("");
	
	return (
		<Select
			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 its value here
			onFocus={() => {
                            setInput(inputSave); // keeps the input
                            setSave(""); // prevents undesired placeholder value
                        }} 
                        blurInputOnSelect  // actually allows for ^^ to work
		/>
	)
}

This keeps the search on select, meaning that when you type input, select, the select bar will keep a placeholder of the input and then when you click on it again it will continue where you left off -- you can see an example here

[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]

@AlexLomm thanks for your solution. However, if you select a value from the options now, the value will not be displayed anymore. In your CodeSandBox and in my app is it the same behaviour.

[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);
       }
      }}
    />
  );
}

[Minozzzi]

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);
       }
      }}
    />
  );
}

@javascript-Alex it's worked for me, why works?
Thanks for solution :D

[netgfx]

any idea how to do this when usint Controller from react-hook-form?

[Dakuan]

i tried this but every keystroke blurred the input...