Input defaults to previously entered value when dropdown clicked

When using react-select to select between values, clicking the dropdown, entering a value with 2 or more characters, and then entering a value with only the first character, the select defaults to the previously entered value.

For example, in a select with options 1 to 50, click the dropdown, type 20 and press enter to select 20. Then click the dropdown, type just 2 and press enter. The select component will have defaulted to 20 instead of the entered value of 2.

When the select component is highlighted by tabbing into it and a value is entered, the first option is focused and submits normally. Clicking the dropdown instead, removes the focus from the first option. This causes it to submit as the previously selected option if the entered value's first character matches the previously selected ones'.

After having selected Green,
TABBING into the component and typing highlights the first matching option:

CLICKING the component and typing highlights only the previously selected option:

Reproduce the behavior in the react-select component using the issue's 1–50 example: select 20, reopen the dropdown, type 2, and press Enter. Compare that result with the tab-focused interaction, where the first matching option is focused. Done means clicking the component and entering a shorter matching value selects that entered value rather than the previously selected option.