Skip Navigation

[Résolu] Tabbing thru Select2 Inputs in a Toolset Form resets Tab Focus to last item on the page

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:
When you have Select2 inputs in a Toolset form (e.g. parent post selectors in a one-to-many relationship, where the form applies to the child post), and use the TAB key to move through the form on the front-end, then selecting an option in the Select2 inputs will provoke the next TAB click to reset the current location.

This means after selecting the option in Select2, pressing TAB will not lead to the next input but back to the top of the page.

Solution:
You can follow this erratum which will update about workarounds, fixes and more.
https://toolset.com/errata/tabbing-through-toolset-select2-inputs-will-reset-the-tab-focus-if-an-option-in-a-select2-instance-is-chosen/

This support ticket is created Il y a 4 années et 11 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 5 réponses, has 2 voix.

Last updated by Mukesh Il y a 4 années et 10 mois.

Assisted by: Beda.

Auteur
Publications
#1262685

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.

#1262947

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.

#1264363

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

#1265011

I'll update you here once I know more and/or we have adjustments to apply (patch, or update.)

#1267819

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

#1270139

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.