consolidate dropdown implementations
So this is a big one! We have 2 different types of dropdown appearing in various different xpub apps:
- single selection
- multi-selection
There are many instances (in multiple xpub apps), where we also want a user to be able to type a suggestion into the text field & filter the dropdown's results accordingly.
AND there are many situations in which the dropdown list needs to be dynamically generated.
For single selection:
- eLife & Hindawi are using Pubsweet's
Menu
component - EPMC has created
Select
- see code here, which is far more accessible as it's based on the HTMLselect
&option
elements
eLife is looking for alternatives, as pubsweet's Menu
is not particularly accessible & making it accessible is not a trivial amount of work. As far as I understand it, the styling for an HTML select
element is down to the OS, which isn't going to work for eLife - @audrey did you have problems with this? In general, our feeling is that others must have solved this problem already, so we'll be looking into 3rd party components.
For multi-selection & filter on type
- EMPC -
SearchSelect
- code - tags appear above the input field - eLife
-
SubjectAreaDropdown
- code | styleguidist - tags appear within the input field
Note: uses a 3rd party component calledreact-select
& is built for a specific use case and not yet generic enough for sharing back - also in the middle of implementing
SearchBox
- code in a PR, which is also based onreact-select
but the product requirements & design specs are still TBD at the moment
-
- Collabora - tags appear inside the input field
- Hindawi - nothing in UI Components but there may be something in one of the other component sections?
Personally, I went looking through a few different 3rd party components back when we were creating SubjectAreaDropdown
. Wish I had written down the comparisons online already react-select
.
At the moment it's looking quite likely that eLife will be going with react-select
for all types of dropdown. But we would definitely welcome other viable options if people have tips to share?