Attempt to fix column focus bug

cheeaun · Nov 14, 2024 · 6a4e142 · 6a4e142
1 parent c9295ba
commit 6a4e142
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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) {