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