consolidate dropdown implementations
So this is a big one! We have 2 different types of dropdown appearing in various different xpub apps:
- single 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
- EPMC has created
Select- see code here, which is far more accessible as it's based on the HTML
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
SubjectAreaDropdown- code | styleguidist - tags appear within the input field
Note: uses a 3rd party component called
react-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 on
react-selectbut 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
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?