Need help regarding TAB press event on Checkout page

  • Resolved vivek6298

    (@vivek6298)


    7 months ago

    The technical issue is that when i use single TAB press the cursor moves to next field in input type=text fields .

    But when i want to go from text type fields to dropdowns that is select fields the issue is that on single press the cursor doesn’t move directly to the next dropdown field next to the input text field. what do i need to do is press the TAB field twice to get the cursor move to the next immediate dropdown field next to it . So help me with the solution, I already tried using JavaScript and jQuery solution to implement but still it is not working.
    So please help me with this , looking forward to hear from your side at the earliest

    Check the image attached to understand easily
    The link to the image is here https://mydemothemes.com/rkpsimmign/wp-content/uploads/2023/12/rkpstabissue.png

    • This topic was modified 7 months ago by vivek6298.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support hrn1995 (woo-hc)

    (@aguinaldodarla)

    7 months ago

    Hi @vivek6298

    We appreciate your patience and understand your concern about the TAB press event on the checkout page.

    What you’re experiencing seems to be a common behavior in many browsers, where certain form elements like dropdowns (select fields) require an extra TAB press to gain focus. This is because the first TAB press is used to focus on the dropdown, and the second TAB press is used to select an option within the dropdown. First, could you try a different browser to see if the problem persists?

    Let us know how it goes!

    Thread Starter vivek6298

    (@vivek6298)

    7 months ago

    Hello Support,

    Thanks for taking into the notice , but as i checked out on different browsers the problem persists the same with even chrome or even microsft edge browsers. so what can be the solution for this is there any solution you can suggest me now ?

    Plugin Support Sean O))) a11n

    (@seanomattic)

    6 months, 2 weeks ago

    Hi @vivek6298,

    Just to get a little more clarity on your question, when you tab to an input with a dropdown, are you able to user your arrow keys to scroll through the selections? This is the default behaviour.

    Thread Starter vivek6298

    (@vivek6298)

    6 months, 2 weeks ago

    I think you didn’t properly understand my question. I don’t have an issue in using arrow.

    My concern is that why does on pressing TAB the cursor immediately doesnot move from input field to dropdown , why do i have to press TAb twice to get the dropdown element into the focus . That is my concern

    Hope you finds this question proper and reply me regarding the above issue

    Plugin Support Sean O))) a11n

    (@seanomattic)

    6 months, 2 weeks ago

    Thanks for your reply!

    You are correct, I don’t think I’m understanding the question. When I’m on the checkout page, it takes a single tab for the curser to move between fields.

    Please see: https://d.pr/i/zDjTQi

    Please send a screengrab of the behaviour you are asking about so we’ll have a better idea of what you are after.

    Thanks!

    Thread Starter vivek6298

    (@vivek6298)

    6 months, 2 weeks ago

    You can check over this page link i have attached see and tell me if you find the same thing you sent me because i didn’t find the single tab from Last name to Select Country file.

    Live website checkout page link
    Checkout – RKPS (mydemothemes.com)

    Plugin Support Sean O))) a11n

    (@seanomattic)

    6 months, 1 week ago

    Thanks for the link! It looks like there may have been some modifications to the checkout form.

    The default form tabs to Company after the last name field: https://d.pr/i/8yarF4

    Whereas the form on your site skips from last name to Country, but the field must be hidden because the tab is making an extra stop: https://d.pr/i/5LP7Uj

    To avoid this extra tab, you can use the default checkout page using the shortcode [woocommerce_checkout]. You can remove the unwanted fields using a checkout field editor.

    Hope this helps!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Need help regarding TAB press event on Checkout page’ is closed to new replies.