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): animating open if the first opening is done by the user

Browse Source
This commit is contained in:
ShaneK
2025-10-20 08:54:43 -07:00
parent 1a1dcda519
commit 2095f2f1c5
2 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,10 +74,12 @@ export class AccordionGroup implements ComponentInterface {
@Event() ionValueChange!: EventEmitter<AccordionGroupChangeEventDetail>; @Event() ionValueChange!: EventEmitter<AccordionGroupChangeEventDetail>;
private hasEmittedInitialValue = false; private hasEmittedInitialValue = false;
private isUserInitiatedChange = false;
@Watch('value') @Watch('value')
valueChanged() { valueChanged() {
this.emitValueChange(false); this.emitValueChange(false, this.isUserInitiatedChange);
this.isUserInitiatedChange = false;
} }
@Watch('disabled') @Watch('disabled')
@ -179,6 +181,7 @@ export class AccordionGroup implements ComponentInterface {
* accordion group to an array. * accordion group to an array.
*/ */
private setValue(accordionValue: string | string[] | null | undefined) { private setValue(accordionValue: string | string[] | null | undefined) {
this.isUserInitiatedChange = true;
const value = (this.value = accordionValue); const value = (this.value = accordionValue);
this.ionChange.emit({ value }); this.ionChange.emit({ value });
} }
@ -255,7 +258,7 @@ export class AccordionGroup implements ComponentInterface {
return Array.from(this.el.querySelectorAll(':scope > ion-accordion')) as HTMLIonAccordionElement[]; return Array.from(this.el.querySelectorAll(':scope > ion-accordion')) as HTMLIonAccordionElement[];
} }
private emitValueChange(initial: boolean) { private emitValueChange(initial: boolean, isUserInitiated = false) {
const { value, multiple } = this; const { value, multiple } = this;
if (!multiple && Array.isArray(value)) { if (!multiple && Array.isArray(value)) {
@ -280,7 +283,7 @@ export class AccordionGroup implements ComponentInterface {
* Track if this is the initial value update so accordions * Track if this is the initial value update so accordions
* can skip transition animations when they first render. * can skip transition animations when they first render.
*/ */
const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined); const shouldMarkInitial = initial || (!this.hasEmittedInitialValue && value !== undefined && !isUserInitiated);
this.ionValueChange.emit({ value, initial: shouldMarkInitial }); this.ionValueChange.emit({ value, initial: shouldMarkInitial });

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

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