[js-embedded-discovery] 01/02: EDS-68 Allow using Tab key to cycle through typeahead entries

[Rod Widdowson]

This is an automated email from the git hooks/post-receive script.

rdw pushed a commit to branch main
in repository js-embedded-discovery.

View the commit online:
http://git.shibboleth.net/view/?p=js-embedded-discovery.git;a=commit;h=2dad37c0f0d918783056af18658fa7c74fa71cbd

commit 2dad37c0f0d918783056af18658fa7c74fa71cbd
Author: Rod Widdowson <rdw at steadingsoftware.com>
AuthorDate: Mon Jun 9 18:55:26 2025 +0100

    EDS-68 Allow using Tab key to cycle through typeahead entries
    
    https://shibboleth.atlassian.net/browse/EDS-68
    
    Apply provided patch.
---
 src/javascript/typeahead.js | 54 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/javascript/typeahead.js b/src/javascript/typeahead.js
index 6cd5775..72f7419 100644
--- a/src/javascript/typeahead.js
+++ b/src/javascript/typeahead.js
@@ -189,6 +189,27 @@ TypeAheadControl.prototype.handleKeyDown = function(event) {
         // down arrow
         //
         this.downSelect();
+    } else if (9 == key) {
+        //
+        // tab key
+        //
+        if (event.shiftKey) {
+            // Cycle back to bottom, set current past end of list
+            if (this.dropDown.current === 0) {
+                this.dropDown.childNodes[this.dropDown.current].className = '';
+                this.dropDown.current = -1;
+            }
+            this.upSelect();
+            event.preventDefault();
+        } else {
+            // Cycle back to top, set current before start of list
+            if (this.dropDown.current === (this.results.length-1)) {
+                this.dropDown.childNodes[this.dropDown.current].className = '';
+                this.dropDown.current = -1;
+            }
+            this.downSelect();
+            event.preventDefault();
+        }
     }
 };
 
@@ -363,20 +384,24 @@ TypeAheadControl.prototype.select = function(selected) {
     this.textBox.focus();
 };
 
+TypeAheadControl.prototype.mimicSelect = function(index) {
+    //
+    // mimic a select()
+    //
+    this.dropDown.current = index;
+    this.dropDown.childNodes[index].className = 'IdPSelectCurrent';
+    this.dropDown.childNodes[index].setAttribute('aria-selected', 'true');
+    this.textBox.setAttribute('aria-activedescendant', 'IdPSelectOption' + index);
+    this.doSelected();
+    this.origin.value = this.results[index][1];
+    this.origin.textValue = this.results[index][0];
+};
+
 TypeAheadControl.prototype.downSelect = function() {
     if (this.results.length > 0) {
 
         if (-1 == this.dropDown.current) {
-            //
-            // mimic a select()
-            //
-            this.dropDown.current = 0;
-            this.dropDown.childNodes[0].className = 'IdPSelectCurrent';
-            this.dropDown.childNodes[0].setAttribute('aria-selected', 'true');
-            this.textBox.setAttribute('aria-activedescendant', 'IdPSelectOption' + 0);
-            this.doSelected();
-            this.origin.value = this.results[0][1];
-            this.origin.textValue = this.results[0][0];
+            this.mimicSelect(0);
 
         } else if (this.dropDown.current < (this.results.length-1)) {
             //
@@ -403,8 +428,12 @@ TypeAheadControl.prototype.downSelect = function() {
 
 
 TypeAheadControl.prototype.upSelect = function() {
-    if ((this.results.length > 0) &&
-        (this.dropDown.current > 0)) {
+    if (this.results.length > 0) {
+
+        if (-1 == this.dropDown.current) {
+            this.mimicSelect(this.results.length-1);
+
+        } else if (this.dropDown.current > 0) {
     
             //
             // turn off highlight
@@ -424,4 +453,5 @@ TypeAheadControl.prototype.upSelect = function() {
             this.origin.value = this.results[this.dropDown.current][1];
             this.origin.textValue = this.results[this.dropDown.current][0];
         }
+    }
 };

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.