Add support for click selection when selection-follows-focus is disabled

dotherightthing · Sep 23, 2020 · a0c86fe · a0c86fe
1 parent e3203cb
commit a0c86fe
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/js/classes/keyboard-helpers.js b/js/classes/keyboard-helpers.js
@@ -40,6 +40,7 @@ class KeyboardHelpers {
         // private options
 
         this.proxyActionElements = {
+            selectFocussed: '[data-kh-proxy="selectFocussed"]',
             selectNext: '[data-kh-proxy="selectNext"]',
             selectPrevious: '[data-kh-proxy="selectPrevious"]'
         };
@@ -384,11 +385,20 @@ class KeyboardHelpers {
     registerProxyKeyboardActions() {
         const proxyActions = Object.keys(this.proxyActionElements);
 
+        if (!this.selectionFollowsFocus) {
+            this.keyboardNavigableElements.forEach((keyboardNavigableElement) => {
+                // select on click
+                keyboardNavigableElement.setAttribute('data-kh-proxy', 'selectFocussed');
+            });
+        }
+
         proxyActions.forEach((proxyAction) => {
-            const proxyActionElement = document.querySelector(`#${this.instanceId} ${this.proxyActionElements[proxyAction]}`);
+            const proxyActionElements = document.querySelectorAll(`#${this.instanceId} ${this.proxyActionElements[proxyAction]}`);
 
-            if (proxyActionElement !== null) {
-                proxyActionElement.addEventListener('click', this[proxyAction].bind(this));
+            if (proxyActionElements.length) {
+                proxyActionElements.forEach((proxyActionElement) => {
+                    proxyActionElement.addEventListener('click', this[proxyAction].bind(this));
+                });
             }
         });
     }
@@ -416,6 +426,11 @@ class KeyboardHelpers {
 
             focussed.setAttribute(selectedAttrProp, selectedAttrVal);
 
+            // if focus was result of a click action
+            if (!this.selectionFollowsFocus) {
+                this.updateRovingTabIndex(focussed);
+            }
+
             if (typeof e === 'object') {
                 if (this.toggleAfterSelected) {
                     this.toggleClosed();