You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If the first button in a toolbar is disabled after rerender, it does not cause the data-active-item and roving tabindex to update, so the disabled button remains as the he data-active-item and the rest of the buttons have a tabindex=-1, so no button in the toolbar is able to be focused.
I believe this is because Ariakit doesn't automatically shift focus to another composite item when the current one becomes disabled or is removed from the DOM. This is because elements might be temporarily removed from the DOM due to React Suspense, virtualization, and so on. Plus, the active item id might point to an item that's not yet rendered, but will be soon. I'm planning to introduce a new feature to handle removable elements in the near future.
However, we could likely build something for disabled items directly into the composite item component.
In the meantime, here are two alternatives that can be implemented in userland:
Current behavior
If the first button in a toolbar is disabled after rerender, it does not cause the
data-active-item
and roving tabindex to update, so the disabled button remains as the hedata-active-item
and the rest of the buttons have atabindex=-1
, so no button in the toolbar is able to be focused.Steps to reproduce the bug
Expected behavior
The toolbar will rerender and allow focus to be placed on the next available non-disabled button.
Workaround
#3232 (comment)
Possible solutions
No response
The text was updated successfully, but these errors were encountered: