[Bug]: Click events on `<fluent-accordion-item>` elements are intermittently applied

[radium-v]

Library

Web Components (@fluentui/web-components)

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1011.00 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 127.0.6533.100
    Edge: 127.0.2651.98
    Safari: 17.6

Are you reporting an Accessibility issue?

None

Reproduction

https://cdpn.io/pen/debug/JjQOONL/975d58a6db3353f8c370692059fcde27

Bug Description

Actual Behavior

Sometimes, when clicking on a <fluent-accordion-item> element after it and its parent <fluent-accordion> are connected, nothing happens. The issue seems to be intermittent and largely dependent on the tooling environment or conditions under which the <fluent-accordion> and its slotted <fluent-accordion-item>s are added to the DOM.

We're experiencing this bug in a project which uses the @storybook/web-components-vite framework in Storybook 8, where the behavior is more prevalent.

Expected Behavior

Clicking on a <fluent-accordion-item> within a <fluent-accordion> will expand or collapse the element.

Logs

No response

Requested priority

Low

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[chrisdholt]

Assigning to @davatron5000 to investigate.

[radium-v]

I found the issue. This was caused by setting the wrong target in our tsconfig, which affects how class fields are handled. Dropping our target to ES2021 fixed it.

I think there are still some improvements that can be made in Accordion/Accordion Item around the click events. The accordion currently attaches a click event to each accordion item when slotted items change, but that could be handled with one event on the parent accordion.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".