Fix focus when switching to new pages

This commit is contained in:
Lim Chee Aun 2023-03-01 15:47:19 +08:00
parent 6342268945
commit b1d6f2001e
3 changed files with 19 additions and 6 deletions

View file

@ -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);
};

View file

@ -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">

View file

@ -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">