From 3cbc592154a2b76cf63dfef67cb63de94dcec887 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 12 May 2023 12:02:56 -0400
Subject: [PATCH] fix(accordion): state updates if value changes (#27463)

Issue number: resolves #27461

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

If an accordion group has a value, and an accordion updates its value to
equal the accordion group value then the state of the accordion does not
change.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- If an accordion value changes it will call `this.updateState` to see
if it should open in the event its value now matches the value of the
parent accordion group.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.0.7-dev.11683898881.13edb102`
---
 core/src/components/accordion/accordion.tsx   |  6 ++-
 .../accordion/test/accordion.spec.ts          | 38 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 41d1449400..fd65ffcd3e 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -56,6 +56,10 @@ export class Accordion implements ComponentInterface {
    * value.
    */
   @Prop() value = `ion-accordion-${accordionIds++}`;
+  @Watch('value')
+  valueChanged() {
+    this.updateState();
+  }
 
   /**
    * If `true`, the accordion cannot be interacted with.
diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts
index 56c5162d93..8f4b7b9141 100644
--- a/core/src/components/accordion/test/accordion.spec.ts
+++ b/core/src/components/accordion/test/accordion.spec.ts
@@ -4,7 +4,7 @@ import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
 import { Item } from '../../item/item.tsx';
 import { Accordion } from '../accordion.tsx';
 
-it('should open correct accordions', async () => {
+it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
@@ -40,6 +40,42 @@ it('should open correct accordions', async () => {
   expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
 });
 
+it('should open correct accordions when accordion value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false" value="first">
+        <ion-accordion>
+          <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>
+        <ion-accordion value="third">
+          <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 accordions = accordionGroup.querySelectorAll('ion-accordion');
+
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+
+  accordions[0].value = 'first';
+  await page.waitForChanges();
+
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+
 it('should open more than one accordion when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],