Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add skip-accordion-toggle attribute #30291

Open
3 tasks done
eduardoRoth opened this issue Mar 21, 2025 · 3 comments · May be fixed by #30292
Open
3 tasks done

feat: add skip-accordion-toggle attribute #30291

eduardoRoth opened this issue Mar 21, 2025 · 3 comments · May be fixed by #30292
Labels
triage

Comments

@eduardoRoth
Copy link
Contributor

Prerequisites

Describe the Feature Request

For Accordion and Accordion Groups, you can use the event.stopPropagation() method to avoid toggling the accordion if something is clicked inside the header slot, but this will break anything that depends on the event bubbling up (e.g. having a Radio Group parent component). Another option is required.

Describe the Use Case

Creating a tree view with Accordions and using a Radio Group so only one item is selected. If you click on the Radio of an accordion header (which would be a folder) it will toggle the accordion, which is not exactly the expected behavior.

Describe Preferred Solution

By having a skip-accordion-toggle attribute, you can skip the Accordion toggle for any component inside the Accordion header, while letting the event bubble up.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Mar 21, 2025
@eduardoRoth eduardoRoth linked a pull request Mar 21, 2025 that will close this issue
Open
2 tasks
@thetaPC
Copy link
Contributor

thetaPC commented Apr 2, 2025

Thank you for submitting the issue!

Please provide a minimal repro that shows the use case that you are trying to implement that causes the accordion to toggle. This would give us a clear picture of why closing the accordion wouldn't be the desired outcome.

@thetaPC thetaPC added the ionitron: needs reproduction a code reproduction is needed from the issue author label Apr 2, 2025
@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Apr 2, 2025

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

@ionitron-bot ionitron-bot bot removed the triage label Apr 2, 2025
@eduardoRoth
Copy link
Contributor Author

@thetaPC you can check this Stackblitz example

https://stackblitz.com/edit/stackblitz-starters-j3hqapui?file=src%2Fmain.ts

Using ion-accordion-group with ion-radio-group to create a tree view that I can select an item, but I don't want the accordion to expand/collapse when I tap/click the ion-radio

@thetaPC thetaPC added triage and removed ionitron: needs reproduction a code reproduction is needed from the issue author labels Apr 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(accordion): add skip-accordion-toggle attribute eduardoRoth/ionic-framework
2 participants
@eduardoRoth @thetaPC