mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(accordion): value can now be set as string when using multiple is true (#23581)
resolves #23550
This commit is contained in:
Liam DeBeasi
@@ -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;
|
||||
}
|
||||
|
||||
55
core/src/components/accordion/test/multiple/e2e.ts
Normal file
55
core/src/components/accordion/test/multiple/e2e.ts
Normal file
@@ -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();
|
||||
}
|
||||
});
|
||||
118
core/src/components/accordion/test/multiple/index.html
Normal file
118
core/src/components/accordion/test/multiple/index.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user