Merge pull request #982 from patternfly/issue-981-pfe-autocomplete-option-selected-event

fix: fire pfe-autcomplete:option-selected event on click and enter key

Author: kelsS

CHANGELOG-prerelease.md

@@ -1,5 +1,6 @@
 ## Prerelease 52 ( TBD )
 
+- [](https://github.com/patternfly/patternfly-elements/commit/) fix: fire pfe-autcomplete:option-selected event on click and enter key
 - [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add support for empty local variables
 
 ## Prerelease 51 ( 2020-07-16 )

elements/pfe-autocomplete/README.md

@@ -83,20 +83,31 @@ This is an optional attribute string that you can provide on the input tag in th
 </pfe-autocomplete>
 ```
 
-## Get selected item
-User can select an item by clicking on search button, type press enter or select an item by using keyboard and press enter. The selected item can be captured by listening to an event(`pfe-search-event`) or observing attribute(`selected-value`) change.
+**`selected-value`**
+By observing `selected-value` attribute you can detect autocomplete selected value.
+
+## Events
 
-### pfe-search-event
-When user performs search, `pfe-search-event` event is fired. By listening to this event you can get selected phrase by getting `e.detail.searchValue`.
+### pfe-autocomplete:search-event
+Fires when a user performs search. By listening to this event you can get selected phrase by getting `e.detail.searchValue`.
 
 ```
-searchAutocomplete.addEventListener('pfe-search-event', function(e) {
-  console.log('do search= ' + e.detail.searchValue);
-});
+detail: {
+  searchValue: String
+}
 ```
 
-### selected-value attribute
-By observing `selected-value` attribute you can detect autocomplete selected value.
+### pfe-autocomplete:option-selected
+Fires when a user selects an option from the dropdown list.
+
+```
+detail: {
+  optionValue: String
+}
+```
+
+## Get selected item
+User can select an item by clicking on search button, type press enter or select an item by using keyboard and press enter. The selected item can be captured by listening to an event(`pfe-autocomplete:search-event`) or observing attribute(`selected-value`) change.
 
 ## Dependencies
 

elements/pfe-autocomplete/demo/index.html

@@ -82,7 +82,7 @@ <h2 class="pfe-headline-2">Disabled</h2>
         }));
       };
 
-      staticAutocomplete.addEventListener('pfe-search-event', function(e) {
+      staticAutocomplete.addEventListener('pfe-autocomplete:search-event', function(e) {
         document.querySelector("#staticSelectedValue").textContent = e.detail.searchValue;
       });
 
@@ -118,7 +118,7 @@ <h2 class="pfe-headline-2">Disabled</h2>
 
       // when user performs search, this event is fired
       // search phrase is passed to e.detail.searchValue
-      searchAutocomplete.addEventListener('pfe-search-event', function(e) {
+      searchAutocomplete.addEventListener('pfe-autocomplete:search-event', function(e) {
         document.querySelector("#ajaxSelectedValue").textContent = e.detail.searchValue;
       });
     </script>

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

@@ -29,8 +29,8 @@ class PfeAutocomplete extends PFElement {
 
   static get events() {
     return {
-      search: `pfe-search-event`,
-      select: `pfe-option-selected`,
+      search: `${this.tag}:search-event`,
+      select: `${this.tag}:option-selected`,
       slotchange: `slotchange`
     };
   }
@@ -41,7 +41,10 @@ class PfeAutocomplete extends PFElement {
     this._slotchangeHandler = this._slotchangeHandler.bind(this);
 
     this._slot = this.shadowRoot.querySelector("slot");
-    this._slot.addEventListener("slotchange", this._slotchangeHandler);
+    this._slot.addEventListener(
+      PfeAutocomplete.events.slotchange,
+      this._slotchangeHandler
+    );
   }
 
   connectedCallback() {
@@ -391,6 +394,12 @@ class PfeAutocomplete extends PFElement {
 
       this._input.value = this._activeOption(activeIndex);
     } else if (key === KEYCODE.ENTER) {
+      if (this._activeOption(activeIndex)) {
+        this.emitEvent(PfeAutocomplete.events.select, {
+          detail: { optionValue: this._activeOption(activeIndex) }
+        });
+      }
+
       let selectedValue = this._input.value;
       this._doSearch(selectedValue);
       return;
@@ -417,8 +426,8 @@ class PfeAutocomplete extends PFElement {
 * reflow             | Re-renders the dropdown
 
 * - Events ----------------------------------------
-* pfe-option-selected | Fires when an option is selected.
-  event.detailes.selectedValue contains the selected value.
+* pfe-autocomplete:option-selected | Fires when an option is selected.
+  event.details.optionValue contains the selected value.
 */
 class PfeSearchDroplist extends PFElement {
   static get tag() {

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

@@ -109,12 +109,12 @@
           });
         });
 
-        it('should fire pfe-search-event after click on search icon', (done) => {
+        it('should fire pfe-autocomplete:search-event after click on search icon', (done) => {
           flush(() => {
             const input = autocompleteElem._input;
             input.value = "test";
 
-            autocompleteElem.addEventListener("pfe-search-event", function(event) {
+            autocompleteElem.addEventListener("pfe-autocomplete:search-event", function(event) {
               assert.equal(event.detail.searchValue, "test");
               done();
             });
@@ -133,14 +133,14 @@
           });
         });
 
-        it('should fire pfe-search-event after user click on an option', done => {
+        it('should fire pfe-autocomplete:search-event after user click on an option', done => {
           flush(() => {
             droplistElem.data = ['option 1', 'option 2'];
             droplistElem.reflow = true;
             droplistElem.open = true;
             let option = droplistElem.shadowRoot.querySelector('li:nth-child(2)');
 
-            autocompleteElem.addEventListener("pfe-search-event", function(event) {
+            autocompleteElem.addEventListener("pfe-autocomplete:search-event", function(event) {
               assert.equal(event.detail.searchValue, "option 2");
               done();
             });
@@ -149,6 +149,40 @@
           });
         });
 
+        it('should fire a pfe-autocomplete:option-selected event when a user selects an option in the droplist with the enter key', done => {
+          flush(() => {
+            const input = autocompleteElem._input;
+            droplistElem.data = ['option 1', 'option 2'];
+            droplistElem.reflow = true;
+            droplistElem.open = true;
+            input.focus();
+
+            autocompleteElem.addEventListener("pfe-autocomplete:option-selected", function(event) {
+              assert.equal(event.detail.optionValue, "option 1");
+              done();
+            });
+
+            MockInteractions.keyUpOn(input, 40);
+            MockInteractions.keyUpOn(input, 13);
+          });
+        });
+
+        it('should fire a pfe-autocomplete:option-selected event when a user selects an option in the droplist with the mouse', done => {
+          flush(() => {
+            droplistElem.data = ['option 1', 'option 2'];
+            droplistElem.reflow = true;
+            droplistElem.open = true;
+            let option = droplistElem.shadowRoot.querySelector('li:nth-child(2)');
+
+            autocompleteElem.addEventListener("pfe-autocomplete:option-selected", function(event) {
+              assert.equal(event.detail.optionValue, "option 2");
+              done();
+            });
+
+            MockInteractions.tap(option);
+          });
+        });
+
         it('should set selected-value attribute after user click on an option', done => {
           flush(() => {
             droplistElem.data = ['option 1', 'option 2'];