From 14a1544ed4c149faabd05dab7b5192a0aed78371 Mon Sep 17 00:00:00 2001
From: Abdelrhman Kamal <hadh2819@gmail.com>
Date: Wed, 25 Oct 2023 21:10:59 +0300
Subject: [PATCH] Feat auto-focused side panel (#4631)

* Fix gtx-trans close sidepanel

* reset the package-lock.json file

* Feat: Add auto focus to side panels

* resote changes
---
 src/components/TopicDetail/TopicDetail.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 737b52621..4dd8e18d8 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -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">