[Bug]: Accordion freezes children disappear when switching between accordion items in force-popover rendered in tray on iOS

[ktmellow]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Accordion

Expected behavior

User should be able to click between AccordionItem children, which opens/closes AccordionItems based on which one is most recently clicked.

Actual behavior

In iOS, newly opened AccordionItem freezes and opened AccordionItem shows rendered height but not content. Also, accordion dropdown icon disappears.

Screenshots

Before:

After clicking a different AccordionItem dropdown:

What browsers are you seeing the problem in?

iOS Safari

How can we reproduce this issue?

1. On iOS device, create a Tray with a DropdownButton (with force-popover property) in content slot, which opens up an ActionMenu with Accordion to display MenuGroup and MenuItems (see code sandbox https://stackblitz.com/edit/vitejs-vite-bfzvkqe1)
2. Click on an AccordionItem to select a MenuItem and close
3. Open again and click between collapsible AccordionItems
4. AccordionItems freeze and children disappear

Notes:

• No console statements.
• Not reproducible in android or desktop.
• Must be in tray and using force-popover prop on DropdownButton.

Sample code or abstract reproduction which illustrates the problem

Reproducible in code sandbox: https://stackblitz.com/edit/vitejs-vite-bfzvkqe1

Severity

SEV 3

Logs taken while reproducing problem

No logs seen in inspector after render issue occurs

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!