feat(select a country with):

select a country from the list  with arrow keys

packages/component-faraday-ui/src/MenuCountry.js

@@ -21,6 +21,8 @@ const Menu = ({
   handleSelect,
   onTextChange,
   validationStatus,
+  handleKeyDown,
+  cursor,
 }) => (
   <Fragment>
     {open && <CloseOverlay onClick={toggleMenu} />}
@@ -28,6 +30,7 @@ const Menu = ({
       <Input
         onChange={onTextChange}
         onClick={toggleMenu}
+        onKeyDown={handleKeyDown}
         onKeyUp={onEnter}
         placeholder={placeholder}
         validationStatus={validationStatus}
@@ -35,8 +38,12 @@ const Menu = ({
       />
       {open && (
         <Options>
-          {options.map(option => (
-            <Option key={option.value} onClick={handleSelect(option.value)}>
+          {options.map((option, index) => (
+            <Option
+              active={cursor === index}
+              key={option.value}
+              onClick={handleSelect(option.value)}
+            >
               {option.label}
             </Option>
           ))}
@@ -53,7 +60,11 @@ export default compose(
     'updateUserInput',
     ({ value, countryLabel }) => (value ? countryLabel(value) : ''),
   ),
+  withState('cursor', 'setCursor', 0),
   withState('open', 'updateOptionsVisibility', false),
+  withProps(({ countries, userInput }) => ({
+    options: filteredCountries({ countries, userInput }),
+  })),
   withHandlers({
     handleSelect: ({
       onChange,
@@ -62,6 +73,7 @@ export default compose(
       updateOptionsVisibility,
     }) => value => () => {
       const country = countryLabel(value)
+
       if (country) {
         onChange(value)
         updateUserInput(country)
@@ -73,26 +85,37 @@ export default compose(
     toggleMenu: ({ updateOptionsVisibility, open }) => () => {
       updateOptionsVisibility(!open)
     },
-    onTextChange: ({ updateUserInput, countryLabel, onChange }) => event => {
+    onTextChange: ({
+      updateUserInput,
+      countryLabel,
+      onChange,
+      setCursor,
+    }) => event => {
       const inputValue = get(event, 'target.value', '')
       const country = countryLabel(inputValue)
 
+      setCursor(0)
       updateUserInput(inputValue)
       if (!country) {
         onChange('')
       }
     },
-    onEnter: ({ handleSelect, userInput, countries }) => event => {
+    onEnter: ({ handleSelect, options, cursor }) => event => {
       if (event.which === 13) {
-        handleSelect(
-          get(firstFilteredCountry({ countries, userInput }), 'value'),
-        )()
+        handleSelect(options[cursor].value)()
+      }
+    },
+    handleKeyDown: ({ setCursor, options }) => event => {
+      // arrow up
+      if (event.which === 38) {
+        setCursor(c => Math.max(0, c - 1))
+      }
+      // arrow down
+      if (event.which === 40) {
+        setCursor(c => Math.min(c + 1, options.length - 1))
       }
     },
   }),
-  withProps(({ countries, userInput }) => ({
-    options: filteredCountries({ countries, userInput }),
-  })),
 )(Menu)
 
 // #region styles