javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(accordion-group): fixing animation in react

Browse Source
This commit is contained in:
ShaneK
2025-10-16 13:29:58 +01:00
parent 58c2a8accb
commit 761d06f168
2 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/accordion-group/accordion-group.tsx
View File

@ -73,6 +73,8 @@ export class AccordionGroup implements ComponentInterface {
*/
@Event() ionValueChange!: EventEmitter<AccordionGroupChangeEventDetail>;
private hasEmittedInitialValue = false;
@Watch('value')
valueChanged() {
this.emitValueChange(false);
@ -163,7 +165,9 @@ export class AccordionGroup implements ComponentInterface {
* We work around this by manually emitting a value change when the component
* has loaded and the watcher is configured.
*/
this.emitValueChange(true);
if (!this.hasEmittedInitialValue) {
this.emitValueChange(true);
}
}
/**
@ -273,10 +277,16 @@ export class AccordionGroup implements ComponentInterface {
}
/**
* Do not use `value` here as that will not account
* for the adjustment we make above.
* Track if this is the initial value update so accordions
* can skip transition animations when they first render.
*/
this.ionValueChange.emit({ value: this.value, initial });
const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined);
this.ionValueChange.emit({ value, initial: shouldMarkInitial });
if (value !== undefined) {
this.hasEmittedInitialValue = true;
}
}
render() {

37
core/src/components/accordion/test/accordion.spec.ts
View File

@ -236,6 +236,43 @@ it('should not animate when initial value is set before load', async () => {
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
});
it('should not animate when initial value is set after load', async () => {
const page = await newSpecPage({
components: [Item, Accordion, AccordionGroup],
});
const accordionGroup = page.doc.createElement('ion-accordion-group');
accordionGroup.innerHTML = `
<ion-accordion value="first">
<ion-item slot="header">Label</ion-item>
<div slot="content">Content</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header">Label</ion-item>
<div slot="content">Content</div>
</ion-accordion>
`;
const details: AccordionGroupChangeEventDetail[] = [];
accordionGroup.addEventListener('ionValueChange', (event: CustomEvent<AccordionGroupChangeEventDetail>) => {
details.push(event.detail);
});
page.body.appendChild(accordionGroup);
await page.waitForChanges();
accordionGroup.value = 'first';
await page.waitForChanges();
const firstDetail = details.find((detail) => detail.value === 'first');
expect(firstDetail?.initial).toBe(true);
const firstAccordion = accordionGroup.querySelector('ion-accordion[value="first"]')!;
expect(firstAccordion.classList.contains('accordion-expanded')).toEqual(true);
expect(firstAccordion.classList.contains('accordion-expanding')).toEqual(false);
});
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
it('should not have animated class when animated="false"', async () => {
const page = await newSpecPage({