kobaltedev
Elements in Accordion Content loose focus
Describe the bug When the initial focus is not already in the accordion content, clicking on a child element of accordion content (e.g. an input) will focus it, but then instantly will focus the accordion trigger instead.
To Reproduce Steps to reproduce the behavior:
- Go to https://stackblitz.com/edit/github-324i4c-kfz11q?file=src%2FApp.tsx
- Open one of the accordion items
- Click on the page body
- Click on one of the input elements (focus is instantly lost)
- Click again on that input (now it gets proper focus)
Expected behavior When focusing elements in the accordion content, the focus should not be moved to the accordion trigger.
Screenshots
https://github.com/kobaltedev/kobalte/assets/4012401/8f0cf4aa-205f-4639-9925-d336ab859eef
Desktop (please complete the following information):
- OS: Linux Masterrace
- Browser: Cutting Edge Firefox and Chrome
- Kobalte Version: v0.9.8
Minor update on this. I figured out the lines which result in the accordion trigger being focused instead of the proper accordion content element:
- https://github.com/kobaltedev/kobalte/blob/5dd86f7f557fcb9f00b7b004aa0686ee61769330/packages/core/src/selection/create-selectable-item.ts#L208
- https://github.com/kobaltedev/kobalte/blob/5dd86f7f557fcb9f00b7b004aa0686ee61769330/packages/core/src/selection/create-selectable-collection.ts#L381
- https://github.com/kobaltedev/kobalte/blob/5dd86f7f557fcb9f00b7b004aa0686ee61769330/packages/core/src/selection/create-selectable-collection.ts#L382
If all of these lines are commented out, then the bug is fixed ':). Obviously thats not the way we can ultimately solve this issue...
I took another look at this and think I understand it better now. The source of this problem is, that the accordion is based on the concept, that the triggers (button) are the managed selection items, instead of the accordion items themselves. Afaik the selection manager seems to know nothing about the accordion items. It only knows about the triggers.
createSelectableItem in accordion trigger: https://github.com/kobaltedev/kobalte/blob/2f5802af077f0bb66d507ee6f38163d33a1b4f84/packages/core/src/accordion/accordion-trigger.tsx#L63
no createSelectableItem in accordion item: https://github.com/kobaltedev/kobalte/blob/2f5802af077f0bb66d507ee6f38163d33a1b4f84/packages/core/src/accordion/accordion-item.tsx
And because of this, the selection manager has neither a way to know that the accordion item is already focused, nor a method to focus it. Instead it will try to find the first selectable key, which only can be a trigger: https://github.com/kobaltedev/kobalte/blob/2f5802af077f0bb66d507ee6f38163d33a1b4f84/packages/core/src/selection/create-selectable-collection.ts#L366
Summary: I could not find a way to fix this bug, without changing the fundamental concept of the accordion 🙈.
Try this workaround...
function stopPropagation(e) {
e.stopPropagation();
};
<Accordion.Content
onKeyDown={stopPropagation}
onClick={stopPropagation}
onPointerDown={stopPropagation}
onMouseDown={stopPropagation}
onFocusIn={stopPropagation}>
