From 5f135dca149f7a671186d0d98520e9ee8e13e5a9 Mon Sep 17 00:00:00 2001
From: John Kerl <kerl.john.r@gmail.com>
Date: Sat, 22 Feb 2025 12:18:06 -0500
Subject: [PATCH] fix focus on tab-select

---
 dev.html     | 60 +++++++++++++++++++++++++++++++++++++++++++++++-----
 index.html   | 60 +++++++++++++++++++++++++++++++++++++++++++++++-----
 staging.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 165 insertions(+), 15 deletions(-)

diff --git a/dev.html b/dev.html
index 215b7d2..6502d7d 100644
--- a/dev.html
+++ b/dev.html
@@ -937,7 +937,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.randomWordGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.randomWordGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.randomWordGenerateButton.focus()
+                },
+                500,
+              )
+
               this.generateRandomWords()
             },
             "urlShorthand": "random",
@@ -953,7 +963,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.logAt0("SWTICH TO NGRAM MODE")
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.ngramGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.ngramGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.ngramGenerateButton.focus()
+                },
+                500,
+              )
+
               this.ngramsKeeper = null
               this.generateNGramWords()
             },
@@ -969,7 +989,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.patternLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.patternLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.patternLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "pattern",
@@ -984,7 +1014,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.anagramLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.anagramLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.anagramLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "anagram",
@@ -1001,7 +1041,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.requiredLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.requiredLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.requiredLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "bee",
diff --git a/index.html b/index.html
index 215b7d2..6502d7d 100644
--- a/index.html
+++ b/index.html
@@ -937,7 +937,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.randomWordGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.randomWordGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.randomWordGenerateButton.focus()
+                },
+                500,
+              )
+
               this.generateRandomWords()
             },
             "urlShorthand": "random",
@@ -953,7 +963,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.logAt0("SWTICH TO NGRAM MODE")
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.ngramGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.ngramGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.ngramGenerateButton.focus()
+                },
+                500,
+              )
+
               this.ngramsKeeper = null
               this.generateNGramWords()
             },
@@ -969,7 +989,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.patternLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.patternLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.patternLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "pattern",
@@ -984,7 +1014,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.anagramLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.anagramLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.anagramLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "anagram",
@@ -1001,7 +1041,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.requiredLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.requiredLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.requiredLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "bee",
diff --git a/staging.html b/staging.html
index 215b7d2..6502d7d 100644
--- a/staging.html
+++ b/staging.html
@@ -937,7 +937,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.randomWordGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.randomWordGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.randomWordGenerateButton.focus()
+                },
+                500,
+              )
+
               this.generateRandomWords()
             },
             "urlShorthand": "random",
@@ -953,7 +963,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.logAt0("SWTICH TO NGRAM MODE")
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.ngramGenerateButton.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.ngramGenerateButton.focus()
+              setTimeout(
+                () => {
+                  this.elements.ngramGenerateButton.focus()
+                },
+                500,
+              )
+
               this.ngramsKeeper = null
               this.generateNGramWords()
             },
@@ -969,7 +989,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.patternLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.patternLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.patternLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "pattern",
@@ -984,7 +1014,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeInvisible()
-              this.elements.anagramLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.anagramLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.anagramLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "anagram",
@@ -1001,7 +1041,17 @@ <h1><span class="boxed-text rounded">Word Finder</span></h1>
             "callback": () => {
               this.ngramsKeeper = null
               this.elements.matchLengthsRow.makeVisible()
-              this.elements.requiredLettersElement.focus()
+
+              // The tab button being clicked gets the focus.
+              // So we have to delay.
+              // this.elements.requiredLettersElement.focus()
+              setTimeout(
+                () => {
+                  this.elements.requiredLettersElement.focus()
+                },
+                500,
+              )
+
               this.showMatches()
             },
             "urlShorthand": "bee",