Skip to content
Permalink
Browse files

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

)

* 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
  • Loading branch information...
liamdebeasi authored and jthoms1 committed Feb 13, 2019
1 parent 39fbc32 commit f9f17752411134e78439984292b90fb0b6440949
@@ -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();
}

}
}

@@ -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();
});
@@ -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>

0 comments on commit f9f1775

Please sign in to comment.
You can’t perform that action at this time.