javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): value is selected when given array (#24687)

Browse Source 
Resolves #24742
This commit is contained in:
Adam Duren
2022-02-08 21:56:48 -06:00
committed by GitHub
parent 59bbd52e35
commit 6ee7d159ec
3 changed files with 112 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/select/select.tsx
View File

@ -248,7 +248,7 @@ export class Select implements ComponentInterface {
const optClass = `${OPTION_CLASS} ${copyClasses}`;
return {
role: (isOptionSelected(value, selectValue, this.compareWith) ? 'selected' : ''),
role: (isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : ''),
text: option.textContent,
cssClass: optClass,
handler: () => {
@ -282,7 +282,7 @@ export class Select implements ComponentInterface {
cssClass: optClass,
label: option.textContent || '',
value,
checked: isOptionSelected(value, selectValue, this.compareWith),
checked: isOptionSelected(selectValue, value, this.compareWith),
disabled: option.disabled
};
});
@ -302,7 +302,7 @@ export class Select implements ComponentInterface {
text: option.textContent || '',
cssClass: optClass,
value,
checked: isOptionSelected(value, selectValue, this.compareWith),
checked: isOptionSelected(selectValue, value, this.compareWith),
disabled: option.disabled,
handler: (selected: any) => {
this.value = selected;

37
core/src/components/select/test/compare-with/e2e.ts Normal file
View File

@ -0,0 +1,37 @@
import { newE2EPage } from '@stencil/core/testing';
test('select: compareWith', async () => {
const page = await newE2EPage({
url: '/src/components/select/test/compare-with?ionic:_testing=true'
});
const compares = [];
compares.push(await page.compareScreenshot());
const selectMultiple = await page.find('#multiple');
await selectMultiple.click();
let alert = await page.find('ion-alert');
await alert.waitForVisible();
await page.waitForTimeout(250);
compares.push(await page.compareScreenshot('should open select[multiple] with option selected'));
await alert.callMethod('dismiss');
const selectSingle = await page.find('#single');
await selectSingle.click();
alert = await page.find('ion-alert');
await alert.waitForVisible();
await page.waitForTimeout(250);
compares.push(await page.compareScreenshot('should open select with option selected'));
await alert.callMethod('dismiss');
for (const compare of compares) {
expect(compare).toMatchScreenshot();
}
});

72
core/src/components/select/test/compare-with/index.html Normal file
View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Select - compareWith</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Select - compareWith</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Select multiple using objects and compareWith</ion-label>
<ion-select id="multiple"></ion-select>
</ion-item>
<ion-item>
<ion-label>Select using objects and compareWith</ion-label>
<ion-select id="single" multiple="true"></ion-select>
</ion-item>
</ion-list>
</ion-content>
<script>
function compareWithFn(a, b) {
return a.value === b.value;
}
let objectOptions = [{
label: 'selected by default', value: '1'
}, {
label: 'not selected by default', value: '2'
}];
document.querySelectorAll('ion-select').forEach(select => {
select.compareWith = compareWithFn;
objectOptions.forEach((option) => {
let selectOption = document.createElement('ion-select-option');
selectOption.value = option;
selectOption.textContent = option.label;
select.appendChild(selectOption)
});
});
let objectSelectMultipleElement = document.getElementById('multiple');
objectSelectMultipleElement.value = [objectOptions[0]];
let objectSelectElement = document.getElementById('single');
objectSelectElement.value = objectOptions[0];
</script>
</ion-app>
</body>
</html>