formio
[BUG] Unable to focus select menu search input using keyboard
Environment
- Formio.js version: 4.11.0
- Browser: Chrome
Steps to Reproduce
- Please see this fiddle using Formio
- And this one using only Choices (same version)
Expected behaviour
It should be possible to enter text into the search input of a select menu at all times without needing to click on it with the mouse.
Observed behaviour
This is only possible with the Choices version.
I wonder if you have any idea what might be the problem behind this? At the moment our work can't pass accessibility requirements because of it.
Hello @gavinorland,
Thank you for reaching out and providing JSFiddle of the 2 versions of the select component. However, we are not experiencing any issues with the select menu JSFiddle.
Here is a recording of testing both: https://share.getcloudapp.com/jkuQBbvx
We incorporate choices.js in our select component. We also have an option to use an HTML5 widget as well. Here are our examples of our select component:https://formio.github.io/formio.js/app/examples/select.html
I hope that this helps.
Thank you!
Thanks for getting back to me so quickly @wag110894. I've looked at your video but I'm not sure we're looking for the same thing here. Did you see the instructions in the fiddles, too?
The issue is that in the Choices select menu a cursor remains in its search input box at all times, whereas in the Formio version this focus is lost when an item is selected, and can't be regained using the keyboard. (The same issue occurs in your own example, too.)
Update: I've clarified the description here and the instructions in the fiddles.
@travist It looks like you have worked on this specific area of the Select component code, but I'm not entirely clear on where/what is causing this.
@gavinorland Apologies for the confusion. We are able to replicate this issue and have added it to our backlog. For reference, the ticket number is FJS-1073. We welcome a pull request and also have a process to expedite if you are interested.
Please contact [email protected] for more information on expediting.
We will let you know once this issue has been resolved.
Thank you.
Many thanks @wag110894 - I'll get in touch if I can see what the issue is at this end or if we wish to expedite.
@wag110894 Any update on whether this particular ticket is being worked on at the moment or has since been resolved?
Hello @SalTor,
This item is currently in our backlog. We welcome a pull request or we have an option to expedite this item if this is needed sooner rather than later.
Please let me know if you are interested by contacting [email protected].
Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!
@Tatsiana8 @wag110894 please reopen the issue again, the bug is still reproducible: https://formio.github.io/formio.js/app/examples/select.html
but it works without formio: https://choices-js.github.io/Choices
@lane-formio When do you think you could deal with the problem and solve it? It would be very important to us because of accessibility.
We will be creating a new ticket as the original one referenced above was archived and we'll get it in for resource planning, but I can't guarantee it will be prioritized, so in that regard the response more or less is the same.
This item is currently in our backlog. We welcome a pull request or we have an option to expedite this item if this is needed sooner rather than later.
Please let me know if you are interested by contacting [email protected].
@istvan-szerletics
Can you add widget: "choicesjs" to the form definition and try again?
@lane-formio
We have already used "widget": "choicesjs" for every select, but it did not work. We also tried it without the "widget", and nothing changed. It is likely that "choicesjs" is the default.
Using "html5" made the select work and it was accessible, but our clients want to style the select themselves. With the default HTML5 select, our styling options are limited, and it lacks a search field. Therefore, we would like a solution that ChoicesJS offers.
We looked at the default NgForm Viewer. It is built with Angular and uses ChoicesJS. The select was accessible, and the bug where we lose focus when using the up or down arrow keys in the select was also resolved.
Could you tell us where to find the template for the select in Angular or how it is built?
Do you have any other ideas on how we can solve this problem? Have you made any progress with the bug?
This is very important to us, especially for people who use the select with the keyboard, as the ChoicesJS selects in Formio are currently not accessible.