feat: pfe-autocomplete - fire custom event when dropdown is shown (#1046)

Fixes #1045

Author: kylebuch8

CHANGELOG-prerelease.md

@@ -1,5 +1,6 @@
 ## Prerelease 55 ( TBD )
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) feat: pfe-autocomplete - fire custom event when dropdown is shown
 - [](https://github.com/patternfly/patternfly-elements/commit/) fix: pfelement - restore pfelement tests (#1018)
 - [fbe4423](https://github.com/patternfly/patternfly-elements/commit/fbe442396f06b0a097366512b698dc0b6d5e1f9f) fix: improve CLS rating in lighthouse (#1020)
 

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

@@ -31,6 +31,7 @@ class PfeAutocomplete extends PFElement {
     return {
       search: `${this.tag}:search-event`,
       select: `${this.tag}:option-selected`,
+      optionsShown: `${this.tag}:options-shown`,
       slotchange: `slotchange`
     };
   }
@@ -293,6 +294,9 @@ class PfeAutocomplete extends PFElement {
     this.activeIndex = null;
     this._dropdown.setAttribute("open", true);
     this._dropdown.setAttribute("active-index", null);
+    this.emitEvent(PfeAutocomplete.events.optionsShown, {
+      composed: true
+    });
   }
 
   _optionSelected(e) {

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

@@ -133,6 +133,26 @@
           });
         });
 
+        it('should fire a pfe-autocomplete:options-shown event when the droplist is shown to the user', 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:options-shown", function(event) {
+              assert.equal(droplistElem.getAttribute("open"), "true");
+              done();
+            });
+
+            autocompleteElem._sendAutocompleteRequest("o");
+          });
+        });
+
         it('should fire pfe-autocomplete:search-event after user click on an option', done => {
           flush(() => {
             droplistElem.data = ['option 1', 'option 2'];