We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Default Tab Not Working Properly

Dear Team,

Focus not going to next control on single Tab press in latest version of 20.4.40. When I press second time then It goes to next control.

Problem is occurred when I put ejs-tooltip on up on any control like numberbox , textbox and e.t.c.

We are sharing stabilize example for better understanding.

https://stackblitz.com/edit/angular-auepkw?file=src%2Fapp.component.html,src%2Fapp%2Fapp.module.ts


Regards

Nagendra Gupta



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team January 10, 2023 02:28 PM UTC

By removing the Tooltip component tab index value in Tooltip created & afterOpen the event you can directly focus the Numeric TextBox component as per your requirement.


Please refer to the shared sample and code snippet for more information.


[ app.component.html ]

      <ejs-tooltip

        #tooltip

        (created)="created($event)"

        (afterOpen)="afterOpen($event)"

      >

        <ejs-numerictextbox

          format="p2"

          value="0.5"

          min="0"

          max="1"

          step="0.01"

        ></ejs-numerictextbox>

      </ejs-tooltip>

[ app.component.ts ]

created(args) {

    document.getElementsByClassName('e-tooltip')[0].removeAttribute('tabindex');

    document

      .getElementsByClassName('e-tooltip')[0]

      .querySelectorAll('[tabindex]')[0]

      .removeAttribute('tabindex');

  }

  afterOpen(args) {

    document.getElementsByClassName('e-tooltip')[0].removeAttribute('tabindex');

  }

Sample :
https://stackblitz.com/edit/angular-auepkw-bd3ase?file=src%2Fapp.component.html

[ Output ]


Loader.
Up arrow icon