Added onBlurResetsInput property to clear input onBlur or leave parti…

[redheadedstep]

Updated Select.js with onBlurResetsInput prop to not clear input onBlur
Updated tests to check that onBlurResetsInput does not call onInputChange if set to false
Updated documentation with onBlurResetsInput property

[redheadedstep]

Committed for PR #3189

[redheadedstep]

When will this be released? It's been almost 2 months?

[dfuruya]

^^^ +1

I tried #3189 (comment) but that still didn't work for me....

[redheadedstep]

@JedWatson any update on this update?

[trixtar]

@JedWatson it would be great if you reviewed and merged this one

[Rall3n]

I don´t think this PR is necessary because you can achieve the same result with the current state of react-select. Please see #3189 (comment) for an example.

[trixtar]

That's one of the first things I tried, but it doesn't work.

…

On Fri, Mar 8, 2019 at 7:11 AM Rall3n ***@***.***> wrote: I don´t think this PR is necessary because you can achieve the same result with the current state of react-select. Please see #3189 (comment) <#3189 (comment)> for an example. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#3242 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AVnu9dfzA6k-HBT500TxgzFJNV87wUMgks5vUjdCgaJpZM4Y4Vn-> .

-- "Our life is twofold; Sleep hath its own world, A boundary between the things misnamed Death and existence." Lord Byron - The Dream

---Long live the new flesh---

[follower90]

It seems that solution in #3189 (comment) has problems with last react-select (2.4.1), cursor position stays in the end of input and doesn't move on click.

But it works fine on 2.1.1 (follow code sandbox link from the comment).

[Rall3n]

It seems that solution in #3189 (comment) has problems with last react-select (2.4.1), cursor position stays in the end of input and doesn't move on click.

But it works fine on 2.1.1 (follow code sandbox link from the comment).

The original issue was to keep the value of the input when blurring, not to set the cursor (@follower90). For that you have to do a little more, like overwriting Input component to stop onMouseDown event from bubbling.

const Input = (props) => <components.Input {...props} onMouseDown={(e) => e.stopPropagation()} />;

But that is not the issue this PR is addressing. It is addressing the problem for which I have provided a solution given by the library, which still works in v2.4.1.

[barbalex]

@Rall3n please see my comments in #3189 (comment) on why that does not work in a real world case where you need to save values to the database and also need to know when the user has deleted a value that was only typed, not choosen from an option

[sacummings91]

What happened with this? Would be nice to have an easy way to stop the blur from resetting the input

[ebonow]

What happened with this? Would be nice to have an easy way to stop the blur from resetting the input

It's currently possible, though not entirely straightforward (more on this below).

Regarding rolling up into one prop, one complexity I've encountered is that this wouldn't solve everyone's use case. There seems to be a bit of disagreement on what should happen if there is an existing selected value, and the user blurs with some inputValue that does not represent the selected value.

Should onBlur retain the inputValue or revert back to the label of the selectedOption? It seems that both use cases are valid in different contexts so a boolean may not be adequate in solving this.

As to how to implement this, here's a codesandbox example.
https://codesandbox.io/s/react-select-editable-and-selectable-6nfdv

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

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

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

  const onChange = (option) => {
    setValue(option);
    setInputValue(option?.label || "");
  };
  
  return (
    <Select value={value} 
      inputValue={inputValue} 
      onChange={onChange} 
      onInputChange={onInputChange} 
      {...otherProps...}
    />
  );

There's been some conversation in a different PR that talks about how this can potentially be done with a single onInputChange prop that doesn't require a controlled input. This would require adding the value to the actionMeta of the onInputChange, which seems like it could make this much easier to do by default.

[sacummings91]

I appreciate the thorough response. I have something similar to what you posted but not quite working right. I think I see why now thanks to your post. Thanks for sharing!