Country selection - select by keyboard #2540

[suppermancool]

Country selection - select by keyboard #2540

[maxceem]

Thanks, @suppermancool works great!

A few things:

1. When we focus select, after choosing any option with keyword and pressing Enter (to choose the option) select is closed as expected, but it loses focus. Can we keep the focus on the select as for native elements after chosing some option with a keyboard? See screencast https://monosnap.com/file/t5d0FDneKDf1hnUMNeNx8VR5xLkCqT

2. Selecting a country with typing currently supports only the first letter. While the native supports typing several letters as long as we type them fast. For example, if I want to choose Ukraine I can type fast ukr and native select will choose Ukraine. While in the current implementation if I type ukr it will choose Reunion - by the last letter I typed. What do you think? Can we make it work same in our dropdown?

3. Sorry, I didn't specify the exact way of getting rid of the scrollbar. But the excpected way was that dropdown has to adjust its width so all the countries can fit in and be displayed in one line. As it's hard to read them when they wrapped to several lines:
   

4. Could you please make the focus style same like for input here:
   

   While the current focus style is different:

   

Thanks.

[suppermancool]

@maxceem done in topcoder-platform/react-components#309 .

[maxceem]

Thanks @suppermancool

Just one issue. When I type the name of a country with a keyboard it is selected as expected. But when I press Enter to apply my selection and close the select Select is not closed and there is an error in console:

Uncaught TypeError: Cannot read property 'click' of undefined

See screencast https://monosnap.com/file/fPk38bIqfD4KxHj9n0tQMkPVSpRVxb

[suppermancool]

@maxceem done in topcoder-platform/react-components#309 .

[maxceem]

@suppermancool

Sorry, looks like I've missed one more small issue before:

• when we open select and press UP it jumps to the last option, but it shouldn't same like for native select. It should ignore keypress and stay on the first option as we cannot go up.
• when we select the last option by keyboard and after press DOWN. First nothing will happen and error will be shown in console:

   Dropdown.jsx?aa69:37 Uncaught TypeError: Cannot read property 'focus' of undefined
  

  If we press DOWN the second time, it will jump to the first option, but it shouldn't same like for the first option.

See screencast https://monosnap.com/file/uq7Ykv2HYv81AhLPhphcdwTGAkL5TG

[suppermancool]

@maxceem done in topcoder-platform/react-components#309 .

[maxceem]

Works great, thank you @suppermancool