Select component should support typing to search even when `showSearch` is false

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• Parity with features of the browser-native <select> (drop-down menu). I have seen this feature in at least Firefox, Chrome, and Safari’s implementations.
• Quick selection of an option within a Select when you already know the option’s name. For example, choosing a U.S. state from a Select with the keyboard is much faster than having to scroll through a long Select with the mouse.
• Being able to search in a Select that doesn’t have the showSearch option. It is not desirable to always enable the showSearch option because that prevents closing the options list by clicking again on the control, and it makes it harder to read the currently-selected option while the options list is shown.

What does the proposed API look like?

This would not add a new code API, but rather would change the default behavior of the Select component. For example, the Select in the “basic usage” example would have different behavior.

I am proposing the same behavior that browsers have when typing characters while a <select> is expanded. The details below are just a description of that behavior.

In the “basic usage” Select example, if you click to expand the menu you can see “Jack”, “Lucy”, “Disabled” and “yiminghe” as options, with “Lucy” selected. If you press the J key nothing happens. The feature I am talking about would change your selection to “Jack” when you pressed J, as if you had pressed the Up arrow key in this example.

If there were also a “John” option below “Jack”, typing J would select the first match, “Jack”. If you typed “jo” quickly, “John” would be selected. If you slowly typed J then O, it would select whatever option is after the letter O, “yiminghe” in this case.

[thisissami]

@afc163 i don’t think autocomplete is a solution. unless it’s straightforward for it to outwardly look like a Select and be used in a Form with getFieldDecorator for values. Is that doable?

the suggestion here is to make Select work like literally every single select on every single website in the world. It completely breaks the keyboard UX to be tabbing through a form and typing in answers, and then to press the p key to jump to the p section of the select… and then for that to not work and to instead be forced to click on the dropdown and handle this by mouse.

I don’t think this issue should have been closed. It would be one thing if this was a novel or unique suggestion - but all that @roryokane is asking is to have the behaviour work identically to how selects work everywhere.

[thisissami]

@dengfuping that’s not how a native select works. what happens is that as soon as you press v, it will jump to the first option that starts with a v. In your example, of First Value, Second Value, and Third Value - nothing will happen, because none of them start with a v. You must type F, S, or T for anything to happen.