added a click event listener

Author: MelSumner

addon/components/es-navbar/link/component.js

@@ -19,7 +19,7 @@ export default Component.extend({
     return this.isDropdownOpen ? 'true' : 'false';
   }),
 
-  navbar: service(), //TODO  also do we need this too?
+  navbar: service(),
 
   actions: {
     triggerDropdown() {
@@ -29,11 +29,16 @@ export default Component.extend({
         // once it's open, let's make sure it can do some things
         schedule('afterRender', this, function() {
 
-
           // move focus to the first item in the dropdown
           let dropdownList = this.element.querySelector('.navbar-dropdown-list');
           this.handleFirstElementFocus();
 
+          dropdownList.addEventListener('click', event =>{
+            if (this.isDropdownOpen) {
+              this.handleBlur();
+            }
+          });
+
           // add event listeners for keyboard events
           dropdownList.addEventListener('keydown', event => {
 
@@ -42,7 +47,7 @@ export default Component.extend({
               this.closeDropdown();
               this.returnFocus();
 
-            // if focus leaves the open dropdown, close it (without trying to otherwise control focus)
+            // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus)
             } else if (this.isDropdownOpen) {
               this.handleBlur();
 
@@ -60,8 +65,21 @@ export default Component.extend({
     this.set('isDropdownOpen', false);
   },
 
+  handleBlur() {
+    next(this, function() {
+      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
+      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
+      console.log(focused);
+
+      //if the dropdown isn't focused, close it
+      if (!focused) {
+        this.closeDropdown();
+      }
+    });
+  },
+
   handleFirstElementFocus() {
-    // Identify / set focus on the first item in the dropdown list automatically
+    // Identify the first item in the dropdown list & set focus on it
     let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a');
     firstFocusable.focus();
   },
@@ -74,19 +92,8 @@ export default Component.extend({
     });
   },
 
-  handleBlur() {
-    next(this, function() {
-      let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li'));
-      let focused = subItems.find(item => document.activeElement === item.querySelector('a'));
-
-      if (!focused) {
-        this.set('isDropdownOpen', false);
-      }
-    });
-  },
-
-  willDestroyElement() {
+  willDestroy() {
     document.removeEventListener('keydown', this.triggerDropdown);
+    document.removeEventListener('click', this.triggerDropdown);
   }
-
 });