Feature/new selector

[edbrett]

The problem

We were using react-select-me, a selector library that handles the majority of use cases for a dropdown selector. This selector doesn't support keyboard events, and in order to add grouping and interaction to the options list we would need to do significant work to handle all the use cases.

The solution

Thanks to the wonderful library Downshift we can now make truly flexible selectors, autocompletes, etc etc. Downshift gives us the control over the data returned, and we build the render. In this PR, I have created a react-select like dropdown using Downshift which accounts for all the edge cases that GFW requires:

• Clearable
• Searchable
• Acts as dropdown
• Grouping (with custom navigation)
• Control over when the selector should close
• Custom keyboard events and controls

BONUS

Instead of using ./bin/server you can now use npm start to start the server

Demo

Notes

This is a starting point. It would be good if we can work on improving this selector and any bugs you can find.

[pjosh]

wow Downshift!! Great choise @edbrett 😄
It only worries me that the dropdown component is so complex now. I've see that you are encapsulating some parts of the dropdown logic in differents functions. What do you think about make individual sub-components with that? That should be reduce quite the component complexity.

[pjosh]

We must remove this line: import 'react-select-me/lib/ReactSelectMe.css'; in app/javascript/pages/country/index.js

[edbrett]

You are completely right! I will try to make it more modular :)

[pjosh]

Much better now! Thx @edbrett 👏 👏