Elements in Accordion Content loose focus

[katywings]

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:

1. Go to https://stackblitz.com/edit/github-324i4c-kfz11q?file=src%2FApp.tsx
2. Open one of the accordion items
3. Click on the page body
4. Click on one of the input elements (focus is instantly lost)
5. 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

Bildschirmaufzeichnung.vom.2023-07-06.11-28-53.mp4

Desktop (please complete the following information):

• OS: Linux Masterrace
• Browser: Cutting Edge Firefox and Chrome
• Kobalte Version: v0.9.8

[katywings]

Minor update on this. I figured out the lines which result in the accordion trigger being focused instead of the proper accordion content element:

• kobalte/packages/core/src/selection/create-selectable-item.ts

  Line 208 in 5dd86f7

  focusWithoutScrolling(refEl);

• kobalte/packages/core/src/selection/create-selectable-collection.ts

  Line 381 in 5dd86f7

  focusWithoutScrolling(element as HTMLElement);

• kobalte/packages/core/src/selection/create-selectable-collection.ts

  Line 382 in 5dd86f7

  scrollIntoView(scrollEl, element as HTMLElement);

If all of these lines are commented out, then the bug is fixed ':). Obviously thats not the way we can ultimately solve this issue...

[katywings]

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:

kobalte/packages/core/src/accordion/accordion-trigger.tsx

Line 63 in 2f5802a

const selectableItem = createSelectableItem(

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:

kobalte/packages/core/src/selection/create-selectable-collection.ts

Line 366 in 2f5802a

navigateToFirstKey(manager.firstSelectedKey() ?? delegate.getFirstKey?.());

Summary: I could not find a way to fix this bug, without changing the fundamental concept of the accordion 🙈.

[SreeniIO]

Try this workaround...

function stopPropagation(e) {
  e.stopPropagation();
};

<Accordion.Content
  onKeyDown={stopPropagation}
  onClick={stopPropagation}
  onPointerDown={stopPropagation}
  onMouseDown={stopPropagation}
  onFocusIn={stopPropagation}>

[jer3m01]

fixed by #483