Merge pull request #177 from rackerlabs/issue-174

fix(events): Correct 'change' event logic

Author: CITguy

docs/components/search/index.html

@@ -17,7 +17,7 @@ <h3>Basic Search Box</h3>
              :placeholder="placeholder"
              :value="searchValue"
              @input="onSearchUpdate"
-             @change="onSearchUpdate"
+             @clear="onSearchUpdate"
           ></hx-search>
         </div>
 

docs/components/search/search-demo.js

@@ -10,7 +10,7 @@ if (document.getElementById('vue-searchDemo')) {
             placeholder: '',
         },
         methods: {
-            // Used on "input" and "change" events
+            // fires on 'input' and 'clear' events
             onSearchUpdate: function (evt) {
                 this.searchValue = evt.target.value;
             },

docs/elements/hx-search/index.html

@@ -25,7 +25,7 @@
           Any of the following:
           <ul>
             <li><code>input</code> as user types</li>
-            <li><code>change</code> on clear</li>
+            <li><code>clear</code> on clear</li>
           </ul>
         </hx-dd>
       </hx-def>

src/helix-ui/elements/HXCheckboxElement.js

@@ -100,11 +100,13 @@ export class HXCheckboxElement extends HXElement {
     }
 
     _onChange (evt) {
+        // Update internal state
         this.checked = evt.target.checked;
 
-        // Chrome doesn't emit 'input' events for checkboxes and native 'change'
-        // events do not bubble out of the ShadowDOM. Emit a custom event to
-        // ensure a 'change' event makes it out of the ShadowDOM.
+        // Prevent 'change' listeners from firing twice in polyfilled browsers.
+        evt.stopImmediatePropagation();
+
+        // Emit a new 'change' event from the custom element
         this.$emit('change');
     }
 }//HXCheckboxElement

src/helix-ui/elements/HXElement.js

@@ -85,11 +85,6 @@ export class HXElement extends HTMLElement {
     }//$preventScroll()
 
     $emit (evtName, details) {
-        if (window.ShadyCSS && evtName === 'change') {
-            // Let native 'change' events bubble naturally.
-            return;
-        }
-
         let evt = new CustomEvent(evtName, {
             bubbles: true,
             detail: details,

src/helix-ui/elements/HXSearchElement.js

@@ -7,7 +7,7 @@ const template = document.createElement('template');
 template.innerHTML = `
     <style>${shadowStyles}</style>
     <label id="wrapper">
-        <input type="text" role="search" id="search" />
+        <input type="text" role="search" id="search" autocomplete="off" />
         <button id="clear" hidden aria-label="Clear search">
             <hx-icon type="times"></hx-icon>
         </button>
@@ -144,10 +144,8 @@ export class HXSearchElement extends HXElement {
     _clearValue () {
         this.value = '';
 
-        // Modifying the value property of the native input doesn't trigger
-        // an event. So, we have to emit our own 'change' event to communicate
-        // the change of internal state.
-        this.$emit('change');
+        // Emit a 'clear' event to communicate state change.
+        this.$emit('clear');
 
         this._elSearch.focus();
     }

test/regression/generateRegressionTests.js.md

@@ -695,7 +695,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search>␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -710,7 +710,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search placeholder="Search...">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" placeholder="Search..." type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" placeholder="Search..." type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -725,7 +725,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search value="kittens">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -743,7 +743,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -758,7 +758,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="" placeholder="Search...">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" placeholder="Search..." type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" placeholder="Search..." type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -773,7 +773,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="" value="kittens">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -791,7 +791,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search disabled="">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -806,7 +806,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search disabled="" placeholder="Search...">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" placeholder="Search..." type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" placeholder="Search..." type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -821,7 +821,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search disabled="" value="kittens">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -839,7 +839,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="" disabled="">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -854,7 +854,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="" disabled="" placeholder="Search...">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" placeholder="Search..." type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" placeholder="Search..." type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search" hidden="">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊
@@ -869,7 +869,7 @@ Generated by [AVA](https://ava.li).
                 <hx-search invalid="" disabled="" value="kittens">␊
         ␊
         <label id="wrapper" class="style-scope hx-search">␊
-            <input role="search" id="search" class="style-scope hx-search" disabled="" type="text">␊
+            <input role="search" id="search" autocomplete="off" class="style-scope hx-search" disabled="" type="text">␊
             <button id="clear" aria-label="Clear search" class="style-scope hx-search">␊
                 <hx-icon type="times" class="style-scope hx-search" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="style-scope hx-search"><path d="M9.414 8l4.293-4.293a.999.999 0 1 0-1.414-1.414L8 6.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L6.586 8l-4.293 4.293a.999.999 0 1 0 1.414 1.414L8 9.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L9.414 8z" class="style-scope hx-search"></path></svg></hx-icon>␊
             </button>␊