Prevent input from being cleared when selecting an option with React-Select

Question

Prevent input from being cleared when selecting an option with React-Select

Unfortunately, there was no satisfactory solution to this question so I will provide an answer:

The issue arises when trying to utilize React-Select with a persistent input value that remains even after selection or blurring. Regrettably, this functionality is not currently built into the component, thus necessitating a workaround.

I also addressed this matter in response to one of the several discussions on this topic: https://github.com/JedWatson/react-select/issues/588
https://github.com/JedWatson/react-select/issues/3210

javascript reactjs react-select

Answer 1

Answer №1

you can add to this by using this method for the desired outcome

const Component = () => {
  const [inputValue, setInputValue] = useState("");
  const [savedInput, setSavedInput] = useState("");
  
  return (
    <Select
      placeholder={savedInput} // displays when input is empty and blurred 
      value="" // always shows the placeholder
      inputValue={inputValue} // allows you to continue typing where you left off
      onInputChange={setInputValue} // enables actual typing
      onMenuClose={() => setSavedInput(inputValue)} // saves input before clearing it
      onFocus={() => {
        setInputValue(savedInput);
        setSavedInput(""); // avoids displaying undesired placeholder value
      }} 
      blurInputOnSelect  // makes above functionality possible
    />
  )
}

https://codesandbox.io/s/sharp-pike-rnjbr?autoresize=1&fontsize=14&hidenavigation=1&theme=dark

Answer 2

you can add to this by using this method for the desired outcome

const Component = () => {
  const [inputValue, setInputValue] = useState("");
  const [savedInput, setSavedInput] = useState("");
  
  return (
    <Select
      placeholder={savedInput} // displays when input is empty and blurred 
      value="" // always shows the placeholder
      inputValue={inputValue} // allows you to continue typing where you left off
      onInputChange={setInputValue} // enables actual typing
      onMenuClose={() => setSavedInput(inputValue)} // saves input before clearing it
      onFocus={() => {
        setInputValue(savedInput);
        setSavedInput(""); // avoids displaying undesired placeholder value
      }} 
      blurInputOnSelect  // makes above functionality possible
    />
  )
}

https://codesandbox.io/s/sharp-pike-rnjbr?autoresize=1&fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

To effectively tackle this issue, it is recommended to manually configure the input value (manage the onInputChange() event) only during active user input.

In essence, we should override ReactSelect's default behavior of clearing the input value when losing focus, closing the menu, or selecting a value.

For instance:

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 update the input if the action triggering the change is
        // "input-change," while disregarding others like: "set-value,"
        // "input-blur," and "menu-close"
        if (action.action === "input-change") setInput(value); // <---
      }}
    />
  );
}

https://codesandbox.io/s/relaxed-beaver-e15x0?fontsize=14&hidenavigation=1&theme=dark

Answer 4

To effectively tackle this issue, it is recommended to manually configure the input value (manage the onInputChange() event) only during active user input.

In essence, we should override ReactSelect's default behavior of clearing the input value when losing focus, closing the menu, or selecting a value.

For instance:

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 update the input if the action triggering the change is
        // "input-change," while disregarding others like: "set-value,"
        // "input-blur," and "menu-close"
        if (action.action === "input-change") setInput(value); // <---
      }}
    />
  );
}

https://codesandbox.io/s/relaxed-beaver-e15x0?fontsize=14&hidenavigation=1&theme=dark

Prevent input from being cleared when selecting an option with React-Select

Answer №1

Answer №2

Similar questions

I am converting a class component to a functional component within a React-Redux-Firebase project

Reflection of three.js CSS3D sprite on the z-axis

employing flush for lodash's throttle wrapper

Validate fields by iterating through an object and considering three data points for each field

Using the Jquery accordion function within google maps is limited to running only one time

Production Server experiencing issues with sending Large Lists via Http Post

Pull the Bootstrap radio value from hyperlink buttons

In the world of Angular, whitespace is simply treated as non-existent when it comes

Using jQuery to duplicate elements by copying and pasting

Safeguard your Firebase database listeners against potential web DOS attacks and unauthorized access to sensitive credentials

Incorrect font displayed on Bootstrap button after inserting hyperlink

What are the steps involved in manipulating objects within an asynchronous result object?

Browserify is having trouble locating the npm module

Having issues with the onclick() function not functioning properly with Jquery?

Having trouble with preventDefault() not working during a keyup event?

Even though credentials are provided, req.user remains undefined within passportjs

Oops! Looks like there's an issue with reading the property 'value' of undefined in React-typeahead

Unique React Router Custom Prompt: Only one prompt can be supported by a single history object

Issue encountered: Inability to implement asynchronous functionality within a forEach loop while making an API request

`What purpose does the data-view attribute serve in Durandal JS?`