I am trying to:
I have a Post Form which consists for various field, textboxes, selection dropdowns and checkboxes etc etc. Users would like to tab through the Form however when they reach the dropdown (JQuery select) they lost tab focus and it jumps back to the top of the page.
Link to a page where the issue can be seen: hidden link
I expected to see: tab order maintained even after using JQuery select to make selection with keyboard.
Instead, I got: Tab focus is lost or reset.
To see the Form. Login to our test site and click on Enter New Referral from Navigation.
I'm using the Astra Child Theme.
The Select2 doesn't react when activated with tab - this is visible when you load the page you mention and start tabbing.
You'll be lead thru the entire menu, until the form, where it'll reach the Select2 as a valid tab event but it won't' react. One more tab and you'll be on the next field.
Then it tabs thru the form and the selects following also are tabbed but do not react.
So you never know when you need to press option+arrow-down or Enter to open the select2 instance with the keyboard.
And yes, after you chose an option it loses focus and goes back to the top of the page
I see there are many similar issues of Select/Select2 like https://stackoverflow.com/questions/30630964/select2-v4-unable-to-tab-into-press-enter-and-then-select-with-firefox-aka-m
On the Select2 Documentation when tabbing the Select field gets visually activated and note, it's also staying on focus after opening its options:
hidden link
So I think what we see on hidden link is what we should expect from Forms Select2 Fields as well.
Select Fields should behave similarly.
I can replicate the issue you show as well on a local install when using Toolset Forms with Select2.
It does not happen with a clean Select2 instance (not using Toolset Forms).
Note, the issue that the Select2 is not "visually activated" when tabbed into as seen on your site was not replicable locally, only the issue where it tabs back to the top after you chose an option.
I'll escalate this as a usability issue that seems particular to Forms implementation of Select2.
I hope we can push a solution for this soon.
Thanks Beda, for the feedback on confirmation of the issue with your in-depth testing. It will be great for our users if the development team is able to fix or provide a workaround we can implement. It will save time in data entry.
Looking for to hearing from you soon.
Thanks
Mukesh
I'll update you here once I know more and/or we have adjustments to apply (patch, or update.)
There is an erratum with explanation and solution now:
https://toolset.com/errata/tabbing-through-toolset-select2-inputs-will-reset-the-tab-focus-if-an-option-in-a-select2-instance-is-chosen/
You can close this ticket here if you want, and follow the erratum to get notified when it's resolved in the core, or, I can update you here if you wish, however given the BUG is in Select2, and we currently haven't the latest version in Toolset this may take a while
My issue is resolved now. Thank you!