React-select: Edit the selcted value

[magdalko]

Hi,

What I would like to do is to edit the selected value. I am passing the value as a state to the value attribute. And it shows the text, but when I try to edit it, I cant because the cursor is in the beginning. So I am forced to type the name form the beginning even though the thing i am searching for is containing the part of the selected value (ex. Selected: exampleName1; want to search: example2; I would just use the backspace and edit the text but can't). Is there any work around for this issue? :)

Thanks for help!

[yuri-sakharov]

Hi,
It looks like related to https://github.com/JedWatson/react-select/issues/2277 and there is solution.

[speedo-sp7]

Same issue here

[mohsinhere]

Still appears to be an issue...

[mohsinhere]

Hi,

What I would like to do is to edit the selected value. I am passing the value as a state to the value attribute. And it shows the text, but when I try to edit it, I cant because the cursor is in the beginning. So I am forced to type the name form the beginning even though the thing i am searching for is containing the part of the selected value (ex. Selected: exampleName1; want to search: example2; I would just use the backspace and edit the text but can't). Is there any work around for this issue? :)

Thanks for help!

Did you find any work around for this?

Thanks!

[kikill95]

I have the same problem with version 2.2.0

[ebonow]

Greetings all, I have addressed this in several other places and started a discussion about making this potentially easier but the approach is fairly straight forward to roll your own.

1. Create a custom Input to ensure isHidden is always false

const Input = props => <components.Input {...props, isHidden: false } />

1. Make the input controlled so we can override the inputValue when an option is selected or the input is blurred.

  const [value, setValue] = useState();
  const [inputValue, setInputValue] = useState("");

  const onInputChange = (inputValue, { action }) => {
    // onBlur => setInputValue to last selected value
    if (action === "input-blur") {
      setInputValue(value ? value.label : "");
    }

    // onInputChange => update inputValue
    else if (action === "input-change") {
      setInputValue(inputValue);
    }
  };

  const onChange = (option) => {
    setValue(option);
    setInputValue(option ? option.label : "");
  };

1. Hide the rendered value component with the prop controlShouldRenderValue

Putting this all together looks like this...

const Input = props => <components.Input {...props, isHidden: false } />

const [value, setValue] = useState();
const [inputValue, setInputValue] = useState("");

const onInputChange = (inputValue, { action }) => {
    // onBlur => setInputValue to last selected value
    if (action === "input-blur") {
      setInputValue(value ? value.label : "");
    }

    // onInputChange => update inputValue
    else if (action === "input-change") {
      setInputValue(inputValue);
    }
};

const onChange = (option) => {
    setValue(option);
    setInputValue(option ? option.label : "");
};

return (<Select
  value={value}
  inputValue={inputValue}
  onInputChange={onInputChange}
  onChange={onChange}
  controlShouldRenderValue={false}
  components={{ Input }}
  ...
/>)

Here is the corresponding sandbox which allows the user to freely type and edit into the input as would be expected behavior of an input.

That said, there is a dedicated discussion to share more thoughts if this were to be an internal prop to manage this, but in lieu of that, it is possible to accomplish this nonetheless.

As such, I will be closing this issue as more discussion about this can be had in the discussions channel with the provided link above.