Skip to content

feat: add skip-accordion-toggle attribute #30291

Open
@eduardoRoth

Description

@eduardoRoth
Contributor

Prerequisites

  • I have read the Contributing Guidelines.
    I agree to follow the Code of Conduct.
    I have searched for existing issues that already include this feature request, without success.

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

Activity

thetaPC

thetaPC commented on Apr 2, 2025

@thetaPC
Contributor

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.

ionitron-bot

ionitron-bot commented on Apr 2, 2025

@ionitron-bot

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.

eduardoRoth

eduardoRoth commented on Apr 3, 2025

@eduardoRoth
ContributorAuthor

@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

added and removed on Apr 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @eduardoRoth@thetaPC

      Issue actions

        feat: add skip-accordion-toggle attribute · Issue #30291 · ionic-team/ionic-framework