bug: accordion does not expand on multiple opens when using angular binding

[akshay199414]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

I have a page from which I can open a modal component.
However when the app loads, the first time I open the detailed modal the accordion works as expected with those 2 tabs open. However when I close the modal and re open the modal then it does not render correctly and all the tabs remain shut. This behaviours occurs after I open any accordion for the first time on the page. After which any accordion in the modal does not render correctly

Expected Behavior

When the modal reopens the accordion should re render. Note that this is not just for one page, the issue will occcure to all accordians in the app after first use

Steps to Reproduce

I have added a reproducable example to the git repo in the ticket.
If you run the app then click on open modal. Then close and reopen the modal the accordion tabs will remain shut

Code Reproduction URL

https://github.com/akshay199414/AccordionExample

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.6
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.6.0

System:

NodeJS : v16.14.2 (/usr/bin/node)
npm : 8.5.0
OS : Linux 5.10

─────────────────────────────────────────────────

 Ionic CLI update available: 6.19.0 → 6.19.1
      Run npm i -g @ionic/cli to update

─────────────────────────────────────────────────

Additional Information

No response

[liamdebeasi]

Thanks for the issue. This happens when binding to value. Passing in a string instead does not reproduce the issue. cc @sean-perkins Can you take a look when you get a chance?

[sean-perkins]

When the modal opens the second time, the accordion state acts like the first two accordion items are expanded, but visually does not paint it correctly. When you interact with an accordion item other than the "Test 1" or "Test 2", you will see the ion-accordion-group re-renders correctly with the initial accordion items expanded.

Based on the logic of ion-accordion, I would assume that the internal state reference (this.state), is not being set correctly. It looks like that behavior is executed in the connected callback for the accordion item, but maybe that condition doesn't return true when the modal is presented multiple times.

ion-accordion-group has the correct value when presented multiple times in the modal, so I would point at it being a race condition for how this.state is set within ion-accordion.

[liamdebeasi]

The first time the modal opens this.updateState(true) is called. The true argument means this is the initial update of the accordion. This bypasses any animations/DOM calculations and simply shows the accordion. At this point none of the refs have been setup either.

The second time the modal opens, this.updateState(true) is called again. However, at that moment the value has not been set by Angular so value is undefined. As a result, we assume the accordion should be collapsed.

Once Angular sets the value, this.updateState() is called only this time it is not the initial update. As a result, the component thinks it needs to animate in. However, it needs the content ref we have inside of ion-accordion. Since the refs have not been setup yet, it just returns early.

One idea here is to set the state to Expanded in the event we do not have our refs yet.

[liamdebeasi]

Can you try the following dev build, and let me know if it resolves the issue?

npm install @ionic/angular@6.1.7-dev.11652991291.10db09e4

[akshay199414]

Can you try the following dev build, and let me know if it resolves the issue?

npm install @ionic/angular@6.1.7-dev.11652991291.10db09e4

Hey, just tried this and it seems to have fixed the issue :)

[liamdebeasi]

Thanks for the issue. This has been resolved via #25322, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.