-
-
Notifications
You must be signed in to change notification settings - Fork 366
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No focusable buttons when first toolbar item is disabled #3232
Comments
Thanks for reporting, @jeryj! 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:
|
Thank you for the workaround ideas, @diegohaz! Those are super helpful. |
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: