Started a draft PR here: https://github.com/theforeman/foreman/pull/6724
in this PR I am refactoring the old implementation of multiple_selects to mount the Patternfly-react’s Dual list,
and removing the jquery.multi-select dependency.
2 Likes
I really love the way! I really like to obsolete the jquery dependencies and the component looks great.
I would like to ensure the components are mature enough though. We should not bring worse UX. The patternfly pattern states it is for cases with > 30 items[1]. And I believe it actually makes the UX worse for cases with less items. My biggest concern is, that moving item is now two clicks away instead of one. Another thing is that the MultiSelect is bit more usable with keybord. These both could be problem for selecting organizations/locations in some cases.
I would like to see some lightweight version (no sort, no filter, no counts, no kebab, possibly no checkboxes), what would prevent us from using Bootstrap Select advertised by patternfly, as we would end up with yet another jquery dependency as ManageIQ did[2].
Than on the other hand for more complex scenarios (what is over a scope of replacing MultiSelect) I would love to see ajax loadable item list, custom ordering (if the final order matters) possibly with the Drag&Drop.
Would you please share what do you think about it? I know it is complex issue, so I just want to open the discussion as soon as possible. Maybe I am wrong and this will be no concern for us, nor the users.
[1] https://www.patternfly.org/pattern-library/forms-and-controls/dual-list-selector/#overview
[2] https://github.com/ManageIQ/manageiq-v2v/pull/148/files
1 Like
Thanks Ondrej !
For our use case I think we will use the component in the same manner we used the multiple_select.
My biggest concern is, that moving item is now two clicks away instead of one.
I think it would be an easy feature to add to patternfly, for example:
- double click on the item would move it between the lists
- we could also add some icon to the list item, like: >>, so with one click it would be moved.
this one would actually makes sense to add to this PR before it will get merge…
Another thing is that the MultiSelect is bit more usable with keybord.
Tab works pretty nice, but I will investigate the current keyboard, or maybe we can add in a following PR our own cool shortcuts, like arrow keys actually will move the items between the lists.
what would prevent us from using Bootstrap Select advertised by patternfly,
can you explain more about the Bootstrap select ?
I don’t think it is being used here.
for more complex scenarios (what is over a scope of replacing MultiSelect) I would love to see ajax loadable item list,
I would love to see some of this stuff in the future, cool ideas 
No we are not, but PF pattern for Dual List states “for < 30 items use Bootstrap multiple select”[1] what they did in ManageIQ, but if you go to [2], they figured the react implementation is obsolete, so they had to go with the jquery one. I believe it would deserve some pattern for such cases as well, but I haven’t found one.
Yeah I would love such improvements and I would love to even help with that, but my UX sense is pretty poor, so I like PF is giving us the patterns and we can just implement those. Adding features, which are not in PF, seems like we will have to do the UX thinking/testing ourselves and that’s something I can’t do 
But if we are able to, let’s do that! 