🐛Plugin Fix and Demo Updates for IE

Conrad Sollitt · Conrad Sollitt · commit 3ca1369a8d99 · 2022-02-08T15:48:36.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ Overall the core Framework files, React Components, and Web Components and API a
     * `app.addPage()`
     * `app.addPlugin()`
     * `app.getClassFunctionNames()` - New function
+  * Bug fix with Chosen Plugin for IE
+    * https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/chosen.js
   * New class version of the core `jsonData` page object:
     * `js/pages/classes/JsonData.js`
     * All variables and functions from the original file exist in the new one. The purpose of the new file is so that an app can extend it for custom page logic when defining pages as ES6 classes rather than ES5 objects.
diff --git a/docs/to-do-list.txt b/docs/to-do-list.txt
@@ -39,6 +39,10 @@ TODO List
         - Update Quick Docs and Playground Code (after release and CDN refreshes)
         - After release update Readme files with new gzipped size for framework:
             DataFormsJS Framework – 12.2 kB
+        - After release, verify country drop-down is fixed:
+            - List was missing on modern browsers (HTML issue)
+            - Fixed resulted in a bug with IE that has been fixed
+            https://dataformsjs.com/examples/places-demo-vue.htm#/en/search
 
 **) Update the Getting Started CSS Template used here:
         https://www.dataformsjs.com/en/getting-started
diff --git a/examples/html/npm-start-page.htm b/examples/html/npm-start-page.htm
@@ -273,6 +273,11 @@ <h1>DataFormsJS Documentation</h1>
     <!-- Comment above scripts and un-comment this version test Polyfill in Modern Browsers -->
     <!-- <script src="/js/web-components/polyfill.js"></script> -->
 
+    <!--
+        [marked] requires `trimRight` for IE
+    -->
+    <script nomodule src="/js/scripts/polyfills.js"></script>
+
     <script>
         window.lazyLoad = {
             // In the example below [nomodule] can be used, however since <markdown-content>
diff --git a/examples/markdown-hbs.htm b/examples/markdown-hbs.htm
@@ -101,6 +101,11 @@ <h1>DataFormsJS Framework &lt;markdown-content&gt; Control<br> with [<span id="s
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/controls/markdown-content.min.js"></script>
 
+        <!--
+            [marked] requires `trimRight` for IE
+        -->
+        <script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/scripts/polyfills.min.js"></script>
+
         <!--
             Pick a Markdown Library:
             https://marked.js.org/
diff --git a/examples/markdown-vue.htm b/examples/markdown-vue.htm
@@ -115,6 +115,11 @@ <h3 v-if="hasError" class="error">{{ errorMessage }}</h3>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/controls/markdown-content.min.js"></script>
 
+        <!--
+            [marked] requires `trimRight` for IE
+        -->
+        <script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/scripts/polyfills.min.js"></script>
+
         <!--
             Pick a Markdown Library:
             https://marked.js.org/
diff --git a/examples/markdown-web.htm b/examples/markdown-web.htm
@@ -106,11 +106,16 @@ <h1>DataFormsJS &lt;markdown-content&gt; Web Component<br> with [<span id="selec
             DataFormsJS Web Components
             https://www.dataformsjs.com
         -->
-        <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/url-router.js"></script>
-        <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/spa-links.js"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/url-router.min.js"></script>
+        <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/spa-links.min.js"></script>
         <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/markdown-content.min.js"></script>
         <script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script>
 
+        <!--
+            [marked] requires `trimRight` for IE
+        -->
+        <script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/scripts/polyfills.min.js"></script>
+
         <script>
             window.lazyLoad = {
                 json_data: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/json-data.min.js' },
diff --git a/js/plugins/chosen.js b/js/plugins/chosen.js
@@ -1,9 +1,9 @@
 /**
  * DataFormsJS Plugin to setup jQuery Chosen elements
- * 
+ *
  * Example usage:
  *     <select class="chosen-select" data-chosen-options="{&quot;allow_single_deselect&quot;:true}">
- * 
+ *
  * @link https://harvesthq.github.io/chosen/
  */
 
@@ -45,7 +45,14 @@
                 // By default chosen blocks the standard 'change' and 'input' events.
                 // Make sure 'input' events run so other plugins or code such as
                 // [dataBind.js] behave as expected.
-                e.target.dispatchEvent(new Event('input'));
+                var event, eventName = 'input';
+                if (typeof(Event) === 'function') {
+                    event = new Event(eventName, { bubbles: true }); // Modern Browsers
+                } else {
+                    event = document.createEvent('Event'); // IE 11
+                    event.initEvent(eventName, true, false);
+                }
+                e.target.dispatchEvent(event);
             });
         });
     }
@@ -60,5 +67,5 @@
     }
 
     // Add Plugin to App
-    app.addPlugin('chosen', setupChosen); 
+    app.addPlugin('chosen', setupChosen);
 })();
diff --git a/js/plugins/chosen.min.js b/js/plugins/chosen.min.js
