[Bug]: Accordion: click into open (non-modal) overlay in accordion-item closes the overlay

[spdev3000]

Code of conduct

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

Impacted component(s)

accordion-item, overlay

Expected behavior

If a click occurs in a default (non-modal) overlay content which is inside an accordion-item should not close the accordion-item (toggle) - it should keep the accordion item open.

Actual behavior

If a user clicks into a default (non-modal) overlay (and its content) which is inside an open accordion-item - that overlay closes immediately.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to studio example
2. See first accordion item is open
3. Click on button to trigger overlay
4. Click into contained slider and try to adjust slider
5. See overlay closes immediately

Sample code or abstract reproduction which illustrates the problem

I think due to the click inside of an accordion-item the focus is shifted back to accordion-item which causes the (type=auto) overlay to close. A click inside an open overlay should not trigger the overlay content of the accordion-item to close.

Severity

None

Logs taken while reproducing problem

No response

[Rajdeepc]

Do you feel that an overlay-trigger can be used since you are directly interacting with an persistent trigger element. I have readdressed your repro with overlay-trigger and i see the focus is getting trapped inside the slider and not closing the overlay. https://studio.webcomponents.dev/edit/ADqqGnUgtfXZ49v7fal4/src/index.ts?p=stories

[spdev3000]

Yes a "modal" overlay can be used without loosing focus as this is the goal of a "modal" one. But our use case would require a default (type="auto") overlay to stay open even if clicked inside that overlay (or its content). Isn't there a way to evaluate which element is dispatching the click event and do nothing in case when it's coming from an overlay?

I have re-added my example in second accordion-item to see the difference. Using sp-overlay or overlay-trigger doesn't matter if having the same types (auto or modal).

[Rajdeepc]

Currently type="auto" will not allow you to trap focus on any other element in focus. This was not designed to be a part of this api contract. You can use type="manual" instead like this:

<sp-overlay trigger="trigger@click" type="manual" placement="bottom">

https://opensource.adobe.com/spectrum-web-components/components/overlay/#manual

[spdev3000]

Yes we could use that, but what is the idea behind clicking in a open overlay and moving focus to the underlying accordion-item? I don't think users expect this behavior and I still see this as a bug of accordion-item.

[Rajdeepc]

There was more traction and work done on this in overlay-trigger where this was solved in the new Overlay API v2. I reverified how it works in overlay-trigger and it seems like this was added to the API contract for type="auto" as you can overlayType: "auto" is now gated and i see its failing in the studio environment for non-compatibility. But feel free to add it as an bug in sp-overlay so that we can surface up a fix for this!

[spdev3000]

@Rajdeepc is there any plan on how to fix this (and when)? We are still experiencing this bug in accordion with popover content and would need to patch this otherwise.

[Rajdeepc]

@spdev3000 PR is up! https://github.com/adobe/spectrum-web-components/pull/5248

[spdev3000]

Thanks @Rajdeepc