Add prevInputValue to action meta

[Rall3n]

Until now if you want to do a feature like keeping the inputValue after an option has been selected you would have to manage the inputValue prop on your own to have access to the previous value.

With this PR the need for the extra state would be removed as the current value would be available trough the meta object in the onInputChange handler, offering a much better un-controlled behaviour.

Before:

const [inputValue, setInputValue] = useState('');

const onInputChange = useCallback((val, { action }) => {
  if (action === 'set-value') return inputValue;

  setInputValue(val);
  return val;
}, [inputValue]);

<Select
  inputValue={inputValue}
  onInputChange={onInputChange}
  closeMenuOnSelect={false}
/>

After:

<Select
  onInputChange={(value, { action, prevInputValue }) => action === 'set-value' ? prevInputValue : value}
  closeMenuOnSelect={false}
/>

[changeset-bot]

🦋 Changeset detected

Latest commit: a694069

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a694069:

Sandbox	Source
react-codesandboxer-example	Configuration

[ebonow]

Adding to discussion here to give more transparency. This was discussed internally on a Slack channel. There is some conversation about the naming of the object properties in the actionMeta.

While value or prevValue might make sense in this particular context, there is already confusion about what constitutes a "value" in react-select as it would now mean either

1. The prop "value" of an option
2. The current "value" (ie: selected options) of the select
3. The "value" attribute of the Input component (which is normally represented as inputValue)

The idea of these changes makes sense, and while not necessarily required as a part of this PR, it may be useful to introduce the Select value (definition 2 from above) as a means that users can have an editable Select that doesn't wipe out the value onBlur or onChange without requiring it to be a controlled input.

Currently, it would need to be done similar to this:

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

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

    if (action === "input-change") {
      setInputValue(inputValue);
    }
  };

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

Where as I was thinking it could become this:

const onInputChange = (inputValue, { action, value }) =>
  (action === "input-blur" || action === "set-value")
    ? (value?.label || '')
    : inputValue

Introducing the value of the Select into the actionMeta would likely be better named as value, so perhaps a more understandable name would be prevInputValue or some other deviation of the name ___InputValue

[Rall3n]

It's prevInputValue now.

[JedWatson]

Thanks @Rall3n!