Don't clear input value after selecting option

[ravipatel2293]

Hey,
I'm enjoying working with this library.

But i need small help regarding search text value for multi select dropdown. I have tried property onSelectResetsInput to set false but it seems like it is not working in version 2.
Currently, in multi select dropdown when user select any option then it clears the text whichever user has entered previously. I don't want to cleat the entered text after selecting any option in multi select.
Is there any way to achieve this?

Thanks in Advance!

[maibono]

Same here, we too are facing the same issue after upgrading to version 2 from version 1. We will downgrade for time being.

@JedWatson please check this because we are using this in production

How can I avoid issues in the production version, is there any stable version in v2?

[Rall3n]

If I get this right, you want to keep the search string after selecting an option?

You first have to pass a function to the onInputChange prop to handle the search string. Inside the function you save the string into state only if the corresponding action is not set-value.
You also have to pass the value from state to the inputValue prop.
The props closeMenuOnSelect and blurInputOnSelect prevent the Select from closing the menu and blurring our input if a value has been selected.

/* ... */

onInputChange (query, { action }) => {
    // Prevents resetting our input after option has been selected
    if (action !== "set-value") this.setState({inputValue: query});
}

/* ... */

<Select
    isMulti
    inputValue={inputValue}
    defaultValue={[colourOptions[0]]}
    options={colourOptions}
    blurInputOnSelect={false} //set by default, but to be sure
    closeMenuOnSelect={false} //prevents menu close after select, which would also result in input blur
    onInputChange={this.onInputChange} //the function to handle our search input
/>

CodeSandbox

[gwyneplaine]

@ravipatel2293 the above is the correct way to handle this use case
thanks @Rall3n for providing a solution with a sandbox reproduction

[dlinch]

I stumbled upon this while looking for a solution to this problem, so first and foremost thank you!

However, I'm using this in conjunction with the Async Select, and when I select an item it will keep the menu open and keep the search string, but it will not refire the loadOptions promise and repopulate the options with all the available non-selected options. So I have to add another character to refire the search.

The intended UX is someone types a search, and they can use their arrow keys to move up and down selections quickly and hit enter to select them without having to retype anything. I'm hitting an API to populate the options, and I don't fire a request on an empty string as there are over 70,000 options and an empty request returns the first 15, which the odds of that being useful are basically zero.

[kasperpihl]

I ended up doing this with manipulating the inputValue onFocus for our use-case

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

class App extends React.Component {
  state = {
    selectedOption: null,
    inputValue: ""
  };
  handleInputChange = inputValue => {
    this.setState({ inputValue });
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };
  handleFocus = () => {
    const { selectedOption } = this.state;
    if (selectedOption && selectedOption.label) {
      this.setState({ inputValue: selectedOption.label });
    }
  };

  render() {
    const { selectedOption, inputValue } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        inputValue={inputValue}
        onInputChange={this.handleInputChange}
        onFocus={this.handleFocus}
        options={options}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And a codesandbox link: https://codesandbox.io/s/quirky-lehmann-nuhr0

[SomethingWrong]

@dlinch I don't know whether you've found the working solution already or need a one yet, here's my approach which derives from @Rall3n answer.

_handleInputChange(inputValue: string, { action }) {
    if (action !== "set-value") {
      this.setState({ inputValue });

      return inputValue;
    }

    return this.state.inputValue;
}

You always have to return inputValue. If you check the source code of the react-select async part (Async.js) you can notice that it tries to utilize inputValue in the following line:
const inputValue = handleInputChange(newValue, actionMeta, onInputChange);
onInputChange is your handler function. So basically all further operations will be based on that value, and when !inputValue === true it updates the state with an empty array of options.

I haven't done much testing yet, so don't rely much on this.

[willbee28]

@SomethingWrong Thank you. Very necessary fix to @Rall3n 's already great solutuion. Thank you to you both.

[alita-moore]

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

[AlexLomm]

I went with watching 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); // <---
      }}
    />
  );
}

[Adyasha8105]

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

const App = () => {
  const [name, setName] = useState('');

	return (
                <Select
                  value={{ label: formData.companyName }}
                  inputValue={name}
                  onInputChange={(value, action) => {
                    if (
                      action?.action !== 'input-blur' &&
                      action?.action !== 'menu-close'
                    ) {
                      setName(value);
                    }
                  }}
                  onFocus={() => {
                    setName(formData.companyName);
                  }}
                  onChange={(e) => {
                    setFormData((prev) => ({
                      ...prev,
                      companyName: e.label,
                    }));
                  }}
                  loadOptions={loadCompanyOptions}
                  blurInputOnSelect
                />
	)
}

[Areeb83]

This is my Reusable Component

function handleChange(selectedOption) {
props.handleDropDown(selectedOption, props.name);
}

const handleLoadMore = () => {
if (offset.offset < totalCheckers) {
setOffset((offset) => ({
append: true,
offset: offset.offset + 10,
}));
}
};

const handleInputChange = (searched) => {
setSearch(searched);
};

useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
if (!visible) {
// formikProps.setFieldTouched(props.name, true);
}
}, [visible]);
return (
); Probelm I have an button which will reset all the values which doing the state which stores selected option but now I want to clear the front end too how to to this plz... (If my way of asking question is bad i am sorry in advance, but any help would be appriciated)