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} 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) {