bug: IonAccordion closes when clicking on content

[DavAnaton]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

<IonAccordionGroup value={accordion}>
  <IonAccordion value="first">
    <IonItem
      slot="header"
      color="light"
    >
      <IonLabel>First</IonLabel>
    </IonItem>
    <div slot="content">
      // ... Code with buttons
    </div>
  </IonAccordion>
  <IonAccordion value="second">
    <IonItem
      slot="header"
      color="light"
    >
      <IonLabel>Second</IonLabel>
    </IonItem>
    <div slot="content">
      // ... Code with buttons
    </div>
  </IonAccordion>
  // ... More accordions
</IonAccordionGroup>

When opening one of them, and clicking on the button inside, it triggers the button's action, but it also closes the accordion. After deeper investigation, it looks like this only happens when the value passed in IonAccordionGroup.value is an empty string.

Expected Behavior

The empty string should be ignored, and the code should work the same way as when the value prop is not passed in.

Steps to Reproduce

1. Use the code provided above.
2. Set accordion to "".
3. Open the

Code Reproduction URL

https://stackblitz.com/edit/bcdz4j?file=src%2Fmain.tsx

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/davidanaton/.nvm/versions/node/v20.18.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 8.3.2

Capacitor:

Capacitor CLI : 6.1.2 @capacitor/android : not installed @capacitor/core : 6.1.2 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v20.18.0 (/Users/username/.nvm/versions/node/v20.18.0/bin/node) npm : 10.9.0 OS : macOS Unknown

Additional Information

No response

[brandyscarney]

Thanks for the issue! This occurs because setting the state in React triggers a re-render. As a result, the accordion group’s value fires its internal change event, causing the accordion to close.

If you’d like to keep the accordion open, you can set the open accordion in the button’s action. Here’s an example: https://stackblitz.com/edit/bcdz4j-quputq?file=src%2Fmain.tsx

Could you let me know if this resolves the issue for you? If not, could you provide more details on what you’re trying to achieve?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!