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 = () => { const focusDeck = () => {
let timer = setTimeout(() => { let timer = setTimeout(() => {
const page = document.getElementById(locationDeckMap[location.pathname]); const columns = document.getElementById('columns');
console.debug('FOCUS', location.pathname, page); if (columns) {
if (page) { // 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(); page.focus();
} }
}
// const page = document.getElementById(locationDeckMap[location.pathname]);
// console.debug('FOCUS', location.pathname, page);
// if (page) {
// page.focus();
// }
}, 100); }, 100);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}; };

View file

@ -39,7 +39,7 @@ function FollowedHashtags() {
}, []); }, []);
return ( return (
<div id="followed-hashtags-page" class="deck-container"> <div id="followed-hashtags-page" class="deck-container" tabIndex="-1">
<div class="timeline-deck deck"> <div class="timeline-deck deck">
<header> <header>
<div class="header-grid"> <div class="header-grid">

View file

@ -29,7 +29,7 @@ function Lists() {
}, []); }, []);
return ( return (
<div id="lists-page" class="deck-container"> <div id="lists-page" class="deck-container" tabIndex="-1">
<div class="timeline-deck deck"> <div class="timeline-deck deck">
<header> <header>
<div class="header-grid"> <div class="header-grid">