While using the keyboard to navigate a webpage, tabbing through the controls skips a disabled button on a Grid Component.

[Ilya Zlochisty]

Steps to Repro:

1. Navigate to the webpage containing the a button on the tool bar of a grid component.

2. Tab through the interactive elements on the page

3. When the button on the tool bar of the grid component is disabled the focus moves to columns on the grid component.

Example: Bndez4px (forked) - StackBlitz

When the Delete button is toggled to be inactive, and the user tabs through the controls its only the first time the disabled delete button gets selected and in focus before moving to the columns in the grid. When the process is repeated the delete button is skipped.

[Sivaranjani Rajasekaran]

Hi Ilya Zlochisty,

Thank you for your patience and for bringing this to our attention. 

By default, when an element is disabled, it should not receive focus, and the focus should automatically skip to the next interactive element. However, on the first attempt, the focus incorrectly moves to the disabled toolbar button.

We have confirmed the reported scenario as a bug from our end and logged it as “Focus Incorrectly Moves to Disabled Toolbar Button on First Tab Attempt”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our weekly patch release scheduled for April 1st , 2025.

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

 

Feedback: https://www.syncfusion.com/feedback/66181/focus-incorrectly-moves-to-disabled-toolbar-button-on-first-tab-attempt

 

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

We appreciate your support and patience. 

Regards,

Sivaranjani R.

[Sivaranjani Rajasekaran]

Ilya Zlochisty,

Thank you for your patience.

As previously confirmed, we have logged the reported scenario as a bug: “Focus Incorrectly Moves to Disabled Toolbar Button on First Tab Attempt.”  Due to a dependent team issue, we need to postpone the fix to the April 8th, 2025.

We sincerely appreciate your understanding and patience as we work on resolving this issue

[Sivaranjani Rajasekaran]

Ilya Zlochisty,

We are glad to announce that, we have included the fix for the issue "Focus Incorrectly Moves to Disabled Toolbar Button on First Tab Attempt .” in our 29.1.37 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

Root cause: When using the enableItems method to disable and enable elements, the tabindex value was not updating and retained its previous state. As a result, even after disabling an element, it remained focusable, causing incorrect behavior.

Solution : When an element is disabled, its tabindex value is set to -1. Then, using the updateTabindex method, the first non-disabled element is assigned a tabindex of 0 to ensure proper focus behavior. Additionally, logic was added to correctly restore the tabindex when the element is enabled again.

If you are dynamically enabling or disabling toolbar buttons and need to reset the grid focus properly, we recommend using the focusModule-> setFirstFocusableTabIndex method of the Grid. This will ensure that the focus works as expected.

Sample Link : O9wsdcrp (forked) - StackBlitz

Feedback Link : https://www.syncfusion.com/feedback/66181/focus-incorrectly-moves-to-disabled-toolbar-button-on-first-tab-attempt

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance.