diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx index 92d28848d20..e4cef31933d 100644 --- a/core/src/components/accordion/accordion.tsx +++ b/core/src/components/accordion/accordion.tsx @@ -381,12 +381,22 @@ export class Accordion implements ComponentInterface { return previousSibling as HTMLIonAccordionElement; }; - private toggleExpanded() { + private toggleExpanded(event: MouseEvent) { const { accordionGroupEl, disabled, readonly, value, state } = this; if (disabled || readonly) return; if (accordionGroupEl) { + /** + * We check if the element that was clicked has the attribute + * skip-accordion-toggle. In case the element has it, then the accordion + * won't request an accordion toggle if it's inside an accordion group + */ + const target = event.target as HTMLInputElement; + if (target.hasAttribute('skip-accordion-toggle') && target.getAttribute('skip-accordion-toggle') !== 'false') { + return; + } + /** * Because the accordion group may or may * not allow multiple accordions open, we @@ -428,7 +438,7 @@ export class Accordion implements ComponentInterface { }} >
this.toggleExpanded()} + onClick={($event) => this.toggleExpanded($event)} id="header" part={headerPart} aria-controls="content" diff --git a/core/src/components/accordion/test/basic/accordion.e2e.ts b/core/src/components/accordion/test/basic/accordion.e2e.ts index b1b855e9797..e40102e3613 100644 --- a/core/src/components/accordion/test/basic/accordion.e2e.ts +++ b/core/src/components/accordion/test/basic/accordion.e2e.ts @@ -30,6 +30,20 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
Third Content
+ + + Skip Toggle + Header + +
Fourth Content
+ + + + Skip Toggle + Header + +
Fifth Content
+ `, config @@ -49,6 +63,24 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => { await expect(ionChange).toHaveReceivedEventDetail({ value: 'third' }); }); + test('should not fire ionChange when click comes from an element with skip-accordion-toggle', async ({ page }) => { + const ionChange = await page.spyOnEvent('ionChange'); + const skipAccordionToggles = page.locator('[skip-accordion-toggle]'); + + await skipAccordionToggles.nth(0).click(); + await expect(ionChange).not.toHaveReceivedEvent(); + }); + + test('should fire ionChange when click comes from an element with skip-accordion-toggle set to false', async ({ + page, + }) => { + const ionChange = await page.spyOnEvent('ionChange'); + const skipAccordionToggles = page.locator('[skip-accordion-toggle="false"]'); + + await skipAccordionToggles.nth(0).click(); + await expect(ionChange).toHaveReceivedEventDetail({ value: 'fourth' }); + }); + test('should not fire when programmatically setting a valid value', async ({ page }) => { const ionChange = await page.spyOnEvent('ionChange'); const accordionGroup = page.locator('ion-accordion-group'); diff --git a/core/src/components/accordion/test/basic/index.html b/core/src/components/accordion/test/basic/index.html index 0307c164aa3..53558b724a6 100644 --- a/core/src/components/accordion/test/basic/index.html +++ b/core/src/components/accordion/test/basic/index.html @@ -344,6 +344,87 @@

Compact

+ +
+

Radio Group with skip-accordion-toggle

+ + + + + + + Attractions + + + + Movie Theaters + + + Amusement Parks + + + Mini Golf + + + + + + + + Dining + + + + Breakfast & Brunch + + + New American + + + Sushi Bars + + + + + + + + Games + + + + + Xbox + + + Playstation + + + Switch + + + + + + + This radio button toggles accordion + + + + + Jog + + + Swim + + + Nap + + + + + +