fix focus on tab-select

johnkerl · Feb 22, 2025 · 5f135dc · 5f135dc
1 parent e876670
commit 5f135dc
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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",