From 6a4e14267a5ae00a11d97245eb02826e390b5557 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 14 Nov 2024 19:22:26 +0800
Subject: [PATCH] Attempt to fix column focus bug

---
 src/components/columns.jsx | 12 ++++++++++++
 src/utils/focus-deck.js    | 21 +++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/columns.jsx b/src/components/columns.jsx
index dadc9660..0449c780 100644
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@@ -107,6 +107,18 @@ function Columns() {
           states.showShortcutsSettings = true;
         }
       }}
+      onFocus={() => {
+        // Get current focused column
+        const currentFocusedColumn =
+          document.activeElement.closest('#columns > *');
+        if (currentFocusedColumn) {
+          // Remove focus classes from all columns
+          // Add focus class to current focused column
+          document.querySelectorAll('#columns > *').forEach((column) => {
+            column.classList.toggle('focus', column === currentFocusedColumn);
+          });
+        }
+      }}
     >
       {components}
     </div>
diff --git a/src/utils/focus-deck.js b/src/utils/focus-deck.js
index c4975caa..0dac6e46 100644
--- a/src/utils/focus-deck.js
+++ b/src/utils/focus-deck.js
@@ -2,8 +2,25 @@ const focusDeck = () => {
   let timer = setTimeout(() => {
     const columns = document.getElementById('columns');
     if (columns) {
-      // Focus first column
-      columns.querySelector('.deck-container')?.focus?.();
+      // Focus focused column
+      const focusedColumn = columns.querySelector('.deck-container.focus');
+      if (focusedColumn) {
+        focusedColumn.focus();
+      } else {
+        // Focus first column within viewport
+        const firstVisibleColumn = columns
+          .querySelectorAll('.deck-container')
+          .find((column) => {
+            const columnRect = column.getBoundingClientRect();
+            return columnRect.left >= 0;
+          });
+        if (firstVisibleColumn) {
+          firstVisibleColumn.focus();
+        } else {
+          // Focus first column
+          columns.querySelector('.deck-container')?.focus?.();
+        }
+      }
     } else {
       const modals = document.querySelectorAll('#modal-container > *');
       if (modals?.length) {