[$150] Country selection - select by keyboard

[gondzo]

• Country selection doesn't support selecting by keyboard
• Country selection dropdown should not have horizontal scroll

[maxceem]

@RishiRajSahu should we include it in the next CF?

[RishiRajSahu]

@maxceem sure.

[maxceem]

We have two places where we select country:

• Account registration page https://accounts.topcoder-dev.com/connect/registration (source: https://github.com/appirio-tech/react-components/blob/feature/connectv2/components/RegistrationScreen/index.jsx#L137)
• Profile settings page http://local.topcoder-dev.com:3000/settings/profile (source: https://github.com/appirio-tech/connect-app/blob/dev/src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx#L151)

As I understand we should support the next things:

• We should be able to navigate from/to counry field using Tab, as for other fields
• If country field is focused, pressing Space or keys Up/Down should open it
• When country selection is opened we should be able to select next/previous country using arrow Up/Down
• When county selection is open we should be able to select a country by starting typing its name like it works in a native select

Check native select example https://jsfiddle.net/ywpvj643/

Implementation note

In both places we use https://github.com/appirio-tech/react-components/blob/feature/connectv2/components/Dropdown/Dropdown.jsx component.
Dropdown component is being used in different places as a styled <select> or as a drop-down menu, so I think it's better to keep this keyboard navigation optional.
Dropdown component should have some property which we can set to enable support for the keyboard navigation.

[suppermancool]

@maxceem pls assign this to me