removing search event listener and firing option-cleared event on clear button click

Author: kylebuch8

elements/pfe-autocomplete/demo/index.html

@@ -25,7 +25,7 @@
   <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
   <!-- uncomment the es5-adapter if you're using the umd version -->
-  <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
+  <!-- <script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
   <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
   <script>
@@ -34,6 +34,10 @@
       '../../pfe-band/dist/pfe-band.umd.js'
     ])
 
+  </script> -->
+  <script type="module">
+    import "../dist/pfe-autocomplete.js";
+    import "../../pfe-band/dist/pfe-band.js";
   </script>
 </head>
 

elements/pfe-autocomplete/docs/index.md

@@ -145,6 +145,15 @@ detail: {
   optionValue: String
 }
 ```
+
+### pfe-autocomplete:option-cleared
+Fires when a user clears the input field using the clear button.
+
+```javascript
+detail: {
+  searchValue: ""
+}
+```
 :::
 
 ::: section

elements/pfe-autocomplete/src/pfe-autocomplete.js

@@ -130,7 +130,6 @@ class PfeAutocomplete extends PFElement {
 
     this._input.addEventListener("input", this._inputChanged.bind(this));
     this._input.addEventListener("blur", this._closeDroplist.bind(this));
-    this._input.addEventListener("search", this._searchCleared.bind(this));
 
     this._input.setAttribute("role", "combobox");
 
@@ -171,7 +170,6 @@ class PfeAutocomplete extends PFElement {
     this._clearBtn.removeEventListener("click", this._clear);
     this._searchBtn.removeEventListener("click", this._search);
     this._searchBtnTextual.removeEventListener("click", this._search);
-    this._input.removeEventListener("search", this._searchCleared.bind(this));
   }
 
   _initValueChanged(oldVal, newVal) {
@@ -262,7 +260,11 @@ class PfeAutocomplete extends PFElement {
     this._searchBtn.setAttribute("disabled", "");
     this._searchBtnTextual.setAttribute("disabled", "");
     this._input.focus();
-    this._searchCleared(this._input.value);
+    this.emitEvent(PfeAutocomplete.events.optionCleared, {
+      bubbles: true,
+      composed: true,
+      detail: { searchValue: "" },
+    });
   }
 
   _search() {
@@ -275,16 +277,6 @@ class PfeAutocomplete extends PFElement {
     this._input.setAttribute("aria-expanded", "false");
   }
 
-  _searchCleared(searchQuery = '') {
-    if (this._input.value === "") {
-      this.emitEvent(PfeAutocomplete.events.optionCleared, {
-        bubbles: true,
-        composed: true,
-        detail: { searchValue: searchQuery},
-      });
-    }
-  }
-
   _openDroplist() {
     this.activeIndex = null;
     this._dropdown.open = true;