info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-30 20:49:49 +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 SpinnerIcon from '../../icons/spinner.svg';
@@ -184,6 +184,10 @@ export function TopicDetail(props: TopicDetailProps) {
});
});
useEffect(() => {
if (isActive) topicRef?.current?.focus();
}, [isActive]);
if (!isActive) {
return null;
}
@@ -194,7 +198,8 @@ export function TopicDetail(props: TopicDetailProps) {
<div className={'relative z-50'}>
<div
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 && (
<div className="flex w-full justify-center">