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

liamdebeasi · jthoms1 · commit f9f177524111 · 2019-02-20T10:20:23.000-06:00
* 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
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
@@ -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();
+      }
+
     }
   }
 
diff --git a/core/src/components/select/test/async/e2e.ts b/core/src/components/select/test/async/e2e.ts
@@ -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();
+});
diff --git a/core/src/components/select/test/async/index.html b/core/src/components/select/test/async/index.html
@@ -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>
