Results 1 to 4 of 4

Thread: How to disable the Masked element in Tab Key

  1. #1
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    42

    Default How to disable the Masked element in Tab Key

    Hi all,

    I have a dialog to show with mask.
    However, I found that I can tab the masked element using Tab Key.
    How to ensure only Tab the dialog component?

    Thanks

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Thanks for your question- I have passed it on to a team member to get you an answer.

  3. #3
    Sencha - Support Team
    Join Date
    Sep 2017
    Posts
    67

    Default

    The simplest way to achieve this would be to add tabindex="-1" to all elements you don't wish to be tabbed to - but you'd obviously have to dynamically add and remove this depending on when the modal was shown.


    i.e. Add/remove tabindex=-1 to all links and form inputs except inside your modal window.
    You can do this using react state variables.

    https://stackoverflow.com/questions/...a-specific-div

    Regards,
    Joe.

  4. #4
    Sencha Premium User
    Join Date
    Jul 2014
    Posts
    42

    Default

    Quote Originally Posted by Jaraj View Post
    The simplest way to achieve this would be to add tabindex="-1" to all elements you don't wish to be tabbed to - but you'd obviously have to dynamically add and remove this depending on when the modal was shown.


    i.e. Add/remove tabindex=-1 to all links and form inputs except inside your modal window.
    You can do this using react state variables.

    https://stackoverflow.com/questions/...a-specific-div

    Regards,
    Joe.
    Thanks for your reply.
    I tried to add tabindex=-1 to the container like below but still can press tab key to Text Field 1 and 2 after the dialog shown.
    May I have any advise?
    Also, may I have any other solution instead of adding tabindex =-1?

    Code:
    <Container  tabindex=-1>
    <TextField label="field 1" />
    <TextField label="field 2" />
    
    
     </Container>

Similar Threads

  1. How to disable TAB in masked elements
    By santosr666 in forum Ext: Q&A
    Replies: 2
    Last Post: 23 Oct 2012, 3:00 AM
  2. How to disable TAB in masked elements
    By santosr666 in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 17 Oct 2012, 5:23 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •