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

fix(select): Account for when options are not loaded immediately (#17405)

Browse Source 
* Added logging to begin debugging issue

* identify potential fix, add test

* fix(select): render when options are loaded after a delay

* fix linter issues

* fix e2e test

* fix edge case with if statement
This commit is contained in:
Liam DeBeasi
2019-02-13 08:34:55 -05:00
committed by GitHub
parent f832de5f4a
commit 1c9c18b5ea
3 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -133,8 +133,21 @@ export class Select implements ComponentInterface {
@Listen('ionSelectOptionDidUnload')
async selectOptionChanged() {
await this.loadOptions();
if (this.didInit) {
this.updateOptions();
/**
* In the event that options
* are not loaded at component load
* this ensures that any value that is
* set is properly rendered once
* options have been loaded
*/
if (this.value !== undefined) {
this.el.forceUpdate();
}
}
}

10
core/src/components/select/test/async/e2e.ts Normal file
View File

@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('select: async', async () => {
const page = await newE2EPage({
url: '/src/components/select/test/async?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

37
core/src/components/select/test/async/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Select - Async</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/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<ion-select id="animals" placeholder="Select One"></ion-select>
<script>
let select = document.getElementById('animals');
const options = ['bird', 'dog', 'shark', 'lizard'];
setTimeout(() => {
options.forEach(option => {
let o = document.createElement('ion-select-option');
o.value = option;
o.textContent = option;
select.appendChild(o);
});
select.value = options[0];
}, 500);
</script>
</body>
</html>