Ability to use Input instead of SingleValue to display selected value

[quanphm]

I think this idea may require the whole library to change and it will cost a lot of effort to refactor. But while working on PR #4823, I think this is worth a discussion.

Currently, react-select is using a div which is called SingleValue component to display the selected value and an auto-size input to receive users' input. The input width scales with value inside it. This seems quite tricky actually. We have to use 3rd library or some genius CSS trick to have this behavior.

I think that the input should be stretched to the full width of the select box, we can keep the user's selected value as input value and we can remove the SingleValue component.

Why should we do this?

• The first thing is we can get rid of auto-size input. Replace it with an actual HTML Input. We can bring some native behaviors of a text field to users such as select, copy & paste what they selected, autofill on Chrome Support Chrome autofill #2395 maybe.
• With multiple select values, we can simply use Flex layout to display input and all selected values side by side. Input can still take all remaining space on the same line with selected values without us doing extra work.
• We might simplify the HTML output.
• It might be easier to manage form value since react-select selected value is just an input value.

What about a11y?

We can re-use what we already had or we can have a basic setup like this - I draw this while I was researching about A11y 😬

What do we lose?

Since we remove SingleValue and replace it with a native input, we will lose some features, one of them is the ability to customize the selected value which I hope we can find some alternative solutions.

Thank you for reading this.

[ebonow]

@mikunpham I agree in principle and I would conjecture that this would be a more common use case than using a SingleValue. I have at least one code sample pinned in the discussions area showing how to keep an input visible and editable.
https://codesandbox.io/s/react-select-editable-and-selectable-6nfdv

As for why it is the way that it is currently to my understanding, once an option is selected, that label would become the input's text value. For a default value, this means that the dropdown would only show the single option matching the text, so the full menu of options wouldn't be apparent unless the user cleared the input.

I recently worked on an issue that asked to replicate another library that did manage to present a text input and show a full menu of options when opening the menu that already had the selected options text in the input. I believe I came up with an adequate solution which would be able to indicate whether the user just opened the menu or if they are attempting to type more characters and filter.

Please feel free to take a look at the example here: https://codesandbox.io/s/react-select-show-all-options-when-input-matches-value-label-6l0g6?file=/src/App.js

Regarding the autosize input, it exists solely for the purpose of the MultiSelect so it can exist inline with the MultiValues as they are added. The Input component was recently refactored as it previously existed as a monorepo dependency which used javascript to calculate the width of the input. The refactoring that I worked on keeps a container around the input for the purposes of resizing but uses a pseudo element to do the autosizing.

The input was originally expanding to the width of the available space in my testing when I merged but I believe that there may have been some conflict introduced when the absolute positioning was removed.

Hope this provides both a solution and an explanation.