From b1d6f2001e6ef9fbe681092714cc1f1017e5463c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Mar 2023 15:47:19 +0800
Subject: [PATCH] Fix focus when switching to new pages

---
 src/app.jsx                     | 21 +++++++++++++++++----
 src/pages/followed-hashtags.jsx |  2 +-
 src/pages/lists.jsx             |  2 +-
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index c176a150..09c1b649 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -138,11 +138,24 @@ function App() {
   };
   const focusDeck = () => {
     let timer = setTimeout(() => {
-      const page = document.getElementById(locationDeckMap[location.pathname]);
-      console.debug('FOCUS', location.pathname, page);
-      if (page) {
-        page.focus();
+      const columns = document.getElementById('columns');
+      if (columns) {
+        // Focus first column
+        columns.querySelector('.deck-container')?.focus?.();
+      } else {
+        // Focus last deck
+        const pages = document.querySelectorAll('.deck-container');
+        const page = pages[pages.length - 1]; // last one
+        if (page && page.tabIndex === -1) {
+          console.log('FOCUS', page);
+          page.focus();
+        }
       }
+      // const page = document.getElementById(locationDeckMap[location.pathname]);
+      // console.debug('FOCUS', location.pathname, page);
+      // if (page) {
+      //   page.focus();
+      // }
     }, 100);
     return () => clearTimeout(timer);
   };
diff --git a/src/pages/followed-hashtags.jsx b/src/pages/followed-hashtags.jsx
index 4c627583..21e0f290 100644
--- a/src/pages/followed-hashtags.jsx
+++ b/src/pages/followed-hashtags.jsx
@@ -39,7 +39,7 @@ function FollowedHashtags() {
   }, []);
 
   return (
-    <div id="followed-hashtags-page" class="deck-container">
+    <div id="followed-hashtags-page" class="deck-container" tabIndex="-1">
       <div class="timeline-deck deck">
         <header>
           <div class="header-grid">
diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx
index 9d084928..48ba6899 100644
--- a/src/pages/lists.jsx
+++ b/src/pages/lists.jsx
@@ -29,7 +29,7 @@ function Lists() {
   }, []);
 
   return (
-    <div id="lists-page" class="deck-container">
+    <div id="lists-page" class="deck-container" tabIndex="-1">
       <div class="timeline-deck deck">
         <header>
           <div class="header-grid">