info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-31 21:11:44 +02:00
Code Issues Releases Wiki Activity

Feat auto-focused side panel (#4631)

Browse Source 
* Fix gtx-trans close sidepanel

* reset the package-lock.json file

* Feat: Add auto focus to side panels

* resote changes
This commit is contained in:
Abdelrhman Kamal
2023-10-25 21:10:59 +03:00
committed by GitHub
parent 14ea7ba0ad
commit 14a1544ed4
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/TopicDetail/TopicDetail.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useRef, useState } from 'react'; import { useEffect, useMemo, useRef, useState } from 'react';
import CloseIcon from '../../icons/close.svg'; import CloseIcon from '../../icons/close.svg';
import SpinnerIcon from '../../icons/spinner.svg'; import SpinnerIcon from '../../icons/spinner.svg';
@@ -184,6 +184,10 @@ export function TopicDetail(props: TopicDetailProps) {
}); });
}); });
useEffect(() => {
if (isActive) topicRef?.current?.focus();
}, [isActive]);
if (!isActive) { if (!isActive) {
return null; return null;
} }
@@ -194,7 +198,8 @@ export function TopicDetail(props: TopicDetailProps) {
<div className={'relative z-50'}> <div className={'relative z-50'}>
<div <div
ref={topicRef} ref={topicRef}
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6" tabIndex={0}
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6"
> >
{isLoading && ( {isLoading && (
<div className="flex w-full justify-center"> <div className="flex w-full justify-center">