Notable things that make this implementation useful:
pressing up/down arrow while the filter textfield is focused will navigate through the entries
Pressing enter (while the text field is focused) will select the highlighted entry
Then when the dropdown gets closed the focus returns to the activator button.
Now polaris has a Popover + ActionList component that is similar to this, but its implementation has been largely neglected.
When the filter textfield is focused, we cannot navigate through the entries using up/down arrows
When the filter textfield is focused, we cannot press enter to activate an entry
instead we have to press tab (twice if there is text because the first press on tab will focus the cross icon to clear the textfield). That’s a major UX problem
When we select an entry, the focus does not return to the activator button. That’s a major UX problem, despite the fact that the documentation states “When the popover is closed, focus returns to the element that launched it”
We really need this component to remain compliant with shopify admin while having something easy to use, but at the moment it makes the usage of keyboard impossible.
Hey again @Soufiane_Ghzal - hope all’s well with you! Would you be able to share a recording of what this behaviour looks like on your end? I’m happy to take a look at this internally, but just want to see if I’m able to replicate exactly.
Hi @Alan_G , unfortunately not. I assumed that Polaris team stopped working on the react implementation of polaris, and just focuses on the web components leaving us in a in-between period where we dont get fixes, but at the same time we don’t have an alternative for at least a few months. I cannot afford waiting for so long - users of our app need to be able to work efficiently. So I went ahead and fixed it internally by forking some components so now all is working for me.
But if you take the example here: Action list — Shopify Polaris React and add the property “allowFiltering” to true, you will see that the keyboard interactions are not great compared to what Shopify has done on the native admin.
Does that help?
Just fyi - there is one more thing that is not great on the component compared to the implementation of the admin. Pressing tab while the menu is opened will move to the next entry in the menu, while the version in the admin it moves to the next form item. I think that is a lot more intuitive and consistent with native form elements
Hey @Soufiane_Ghzal - I think I was able to replicate what you mentioned in Polaris React. Just want to confirm if this is what you’re seeing:
When the filter textfield is focused, UP/DOWN arrows don’t navigate through entries (so for example, when I’m typing in something, I can’t arrow down during the typing process)
When the filter textfield is focused, ENTER doesn’t select highlighted entry (again while in the midst of typing)
After selecting an item, focus doesn’t return to the activator button (it just selects the item and “kicks” the user out of the button interface)
TAB moves to next menu entry (for example if I’m typing “import” and I have 10 “import” menu items, it just scrolls through them until I get to the end) instead of next form element (unlike native admin)
Just wanted to make sure I’m seeing exactly what you’re seeing there. Once I hear back from you, I’ll definitely do some more digging on our end to see if we can escalate your feedback on this at the very least since I do get where you’re coming from, especially from an accessibility perspective.
Hey @Soufiane_Ghzal - just following up here as I was able to do some more looking into this for you.
At the moment, my understanding is that you are correct about Polaris-React not seeing as much attention as it has in the past as we are ramping up our Unified Polaris framework: Polaris
I was able to speak with some folks on our Polaris team though and they are aware of the limitations in Polaris-React and we hope to improve things in the new version of Polaris.
That said, I also set up a formal feature request on my end so that we have the specific issues you mentioned tracked on our end here.
I can’t guarantee if/when those improvements will be rolled out in Polaris-React or the new version of Polaris, but did just want to share that our product team is aware of the limitations you mentioned and we do have them on our radar.
Hope this helps a little bit, I’ll close out our thread here, but let me know if I can clarify anything at all on my end
- hope all’s well with you! Would you be able to share a recording of what this behaviour looks like on your end? I’m happy to take a look at this internally, but just want to see if I’m able to replicate exactly.