fix(accordion): value can now be set as string when using multiple is…

… true (#23581) resolves #23550
ionic-team · Jul 6, 2021 · 8f172de · 8f172de
1 parent e5a7b34
commit 8f172de
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 5 deletions.
diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
@@ -150,10 +150,11 @@ export class AccordionGroup implements ComponentInterface {
        * to the array.
        */
       if (multiple) {
-        const groupValue = (value || []) as string[];
-        const valueExists = groupValue.find(v => v === accordionValue);
+        const groupValue = value || [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        const valueExists = processedValue.find(v => v === accordionValue);
         if (valueExists === undefined && accordionValue !== undefined) {
-          this.value = [...groupValue, accordionValue];
+          this.value = [...processedValue, accordionValue];
         }
       } else {
         this.value = accordionValue;
@@ -164,8 +165,9 @@ export class AccordionGroup implements ComponentInterface {
        * out of the values array or unset the value.
        */
       if (multiple) {
-        const groupValue = (value || []) as string[];
-        this.value = groupValue.filter(v => v !== accordionValue);
+        const groupValue = value || [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        this.value = processedValue.filter(v => v !== accordionValue);
       } else {
         this.value = undefined;
       }

diff --git a/core/src/components/accordion/test/multiple/e2e.ts b/core/src/components/accordion/test/multiple/e2e.ts
@@ -0,0 +1,55 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('accordion: multiple - open', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/accordion/test/multiple?ionic:_testing=true'
+  });
+
+  const screenshotCompares = [];
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  const accordionGroup = await page.find('ion-accordion-group');
+  const diningAccordion = await page.find('ion-accordion[value="dining"] ion-item[slot="header"]');
+  const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+  const groupValue = await accordionGroup.getProperty('value');
+  expect(groupValue).toEqual('attractions');
+
+  await diningAccordion.click();
+  await page.waitForChanges();
+
+  const groupValueAgain = await accordionGroup.getProperty('value');
+  expect(groupValueAgain).toEqual(['attractions', 'dining']);
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  for (const screenshotCompare of screenshotCompares) {
+    expect(screenshotCompare).toMatchScreenshot();
+  }
+});
+
+test('accordion: multiple - close', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/accordion/test/multiple?ionic:_testing=true'
+  });
+
+  const screenshotCompares = [];
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  const accordionGroup = await page.find('ion-accordion-group');
+  const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]');
+
+  await attractionsAccordion.click();
+  await page.waitForChanges();
+
+  const groupValue = await accordionGroup.getProperty('value');
+  expect(groupValue).toEqual([]);
+
+  screenshotCompares.push(await page.compareScreenshot());
+
+  for (const screenshotCompare of screenshotCompares) {
+    expect(screenshotCompare).toMatchScreenshot();
+  }
+});
diff --git a/core/src/components/accordion/test/multiple/index.html b/core/src/components/accordion/test/multiple/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Accordion - Multiple</title>
+    <meta name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Accordion - Multiple</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <h2>Multiple</h2>
+            <ion-accordion-group value="attractions" multiple="true">
+              <ion-accordion value="attractions">
+                <ion-item color="primary" slot="header" button detail="false">
+                  <ion-icon slot="start" ios="film-outline" md="film"></ion-icon>
+                  <ion-label> Attractions</ion-label>
+                </ion-item>
+                <ion-list lines="none" slot="content">
+                  <ion-item>
+                    <ion-label>Movie Theaters</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Amusement Parks</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Mini Golf</ion-label>
+                  </ion-item>
+                </ion-list>
+              </ion-accordion>
+              <ion-accordion value="dining">
+                <ion-item color="warning" slot="header" button detail="false">
+                  <ion-icon slot="start" name="pizza"></ion-icon>
+                  <ion-label>Dining</ion-label>
+                </ion-item>
+                <ion-list lines="none" slot="content">
+                  <ion-item>
+                    <ion-label>Breakfast & Brunch</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>New American</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Sushi Bars</ion-label>
+                  </ion-item>
+                </ion-list>
+              </ion-accordion>
+              <ion-accordion value="games">
+                <ion-item color="danger" slot="header" button detail="false">
+                  <ion-icon slot="start" ios="game-controller-outline" md="game-controller"></ion-icon>
+                  <ion-label>Games</ion-label>
+                </ion-item>
+
+                <ion-list lines="none" slot="content">
+                  <ion-item>
+                    <ion-label>Xbox</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Playstation</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Switch</ion-label>
+                  </ion-item>
+                </ion-list>
+              </ion-accordion>
+              <ion-accordion value="exercise">
+                <ion-item color="success" slot="header" button detail="false">
+                  <ion-icon slot="start" ios="bicycle-outline" md="bicycle"></ion-icon>
+                  <ion-label>Exercise</ion-label>
+                </ion-item>
+
+                <ion-list lines="none" slot="content">
+                  <ion-item>
+                    <ion-label>Jog</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Swim</ion-label>
+                  </ion-item>
+                  <ion-item>
+                    <ion-label>Nap</ion-label>
+                  </ion-item>
+                </ion-list>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>