Merge pull request #1796 from patternfly/autosomepleat

feat: adds custom event for clear search event, adds an aria label for search button (when applicable), and resolves dupe "x" with input[type="search"]

Author: Djfaucette

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.html

@@ -42,5 +42,5 @@
 
 <!-- Search button (when [button-text] attr provided) -->
 <pfe-button class="search-button--textual" hidden>
-  <button class="search-button__text" disabled></button>
+  <button class="search-button__text" aria-label="Search" disabled></button>
 </pfe-button>

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

@@ -69,6 +69,7 @@ class PfeAutocomplete extends PFElement {
       search: `${this.tag}:search-event`,
       select: `${this.tag}:option-selected`,
       optionsShown: `${this.tag}:options-shown`,
+      optionCleared: `${this.tag}:option-cleared`,
       slotchange: `slotchange`,
     };
   }
@@ -146,6 +147,11 @@ class PfeAutocomplete extends PFElement {
     this._input.setAttribute("autocorrect", "off");
     this._input.setAttribute("autocapitalize", "off");
     this._input.setAttribute("spellcheck", "false");
+
+    this._input.setAttribute(
+      "style",
+      `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }`
+    );
   }
 
   disconnectedCallback() {
@@ -254,6 +260,11 @@ class PfeAutocomplete extends PFElement {
     this._searchBtn.setAttribute("disabled", "");
     this._searchBtnTextual.setAttribute("disabled", "");
     this._input.focus();
+    this.emitEvent(PfeAutocomplete.events.optionCleared, {
+      bubbles: true,
+      composed: true,
+      detail: { searchValue: "" },
+    });
   }
 
   _search() {
@@ -412,6 +423,7 @@ class PfeAutocomplete extends PFElement {
 * pfe-autocomplete:option-selected | Fires when an option is selected.
   event.details.optionValue contains the selected value.
 */
+
 class PfeSearchDroplist extends PFElement {
   static get tag() {
     return "pfe-search-droplist";

elements/pfe-autocomplete/src/pfe-autocomplete.scss

@@ -28,7 +28,8 @@ $LOCAL-VARIABLES: (
   }
 
   button.clear-search {
-    right: 10px;
+    width: 40px;
+    right: 0px;
   }
 }
 
@@ -50,7 +51,7 @@ $LOCAL-VARIABLES: (
     flex: 1;
     box-shadow: pfe-local(BoxShadow) !important;
     padding-left: 10px;
-    padding-right: 30px;
+    padding-right: 0;
     border-radius: pfe-var(ui--border-radius);
     background-color: pfe-local(BackgroundColor);
     border: pfe-local(Border);
@@ -113,7 +114,9 @@ button {
       color: pfe-var(ui-base);
     }
     svg {
-      width: 12px;
+      width: 14px;
+      position: relative;
+      top: 2px;
       stroke: pfe-var(surface--border);
     }
     &:hover svg,
@@ -129,12 +132,18 @@ button {
   }
 
   &.search-button {
+    margin-top: 1px;
+    margin-bottom: 1px;
     right: 1px;
     width: 30px;
-
+    background-color: pfe-var(surface--lightest);
     svg {
       fill: pfe-var(link);
-      width: 16px;
+      // width: 16px;
+      width: 18px;
+      position: relative;
+      top: 2px;
+      stroke: pfe-var(surface--border);
     }
 
     &:hover svg,

elements/pfe-autocomplete/test/pfe-autocomplete_test.js

@@ -177,6 +177,25 @@ describe('<pfe-autocomplete>', () => {
     });
   });
 
+  it('should fire a pfe-autocomplete:option-cleared event when the input is cleared', done => {
+    flush(() => {
+      const items = ['option 1', 'option 2'];
+
+      autocompleteElem.autocompleteRequest = function (params, callback) {
+        const regx = new RegExp("\^" + params.query, "i");
+        callback(items.filter(function (item) {
+          return regx.test(item);
+        }));
+      };
+
+      autocompleteElem.addEventListener("pfe-autocomplete:option-cleared", function (event) {
+        assert.isTrue(true); // the event listener was called
+        done();
+      });
+      autocompleteElem._clear();
+    });
+  });
+
   it('should set selected-value attribute after user click on an option', done => {
     flush(() => {
       droplistElem.data = ['option 1', 'option 2'];