fix: handling blur,focus for the containers to start tabbing and using arrow keys

src/components/Explorer/ProjectExplorer.tsx

@@ -361,11 +361,24 @@ export const ProjectExplorer = ({
           break
       }
     }
+
+    const handleFocus = () => {
+      setActiveIndex(CONTAINER_IS_SELECTED)
+    }
+
+    const handleBlur = () => {
+      setActiveIndex(NOTHING_IS_SELECTED)
+    }
+
     document.addEventListener('keydown', keyDownHandler)
     document.addEventListener('click', handleClickOutside)
+    fileExplorerContainer.current?.addEventListener('focus', handleFocus)
+    fileExplorerContainer.current?.addEventListener('blur', handleBlur)
     return () => {
       document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('keydown', keyDownHandler)
+      fileExplorerContainer.current?.removeEventListener('focus', handleFocus)
+      fileExplorerContainer.current?.addEventListener('blur', handleBlur)
     }
   }, [])
 

src/routes/Home.tsx

@@ -414,7 +414,11 @@ const Home = () => {
           </ul>
         </aside>
 
-        <section data-testid="file-explorer-section" className="flex flex-row justify-between" style={{width:'850px'}}>
+        <section
+          data-testid="file-explorer-section"
+          className="flex flex-row justify-between"
+          style={{ width: '850px' }}
+        >
           <ProjectExplorer project={kclSamples}></ProjectExplorer>
           <ProjectExplorer project={kclSamples}></ProjectExplorer>
           <ProjectExplorer project={kclSamples1}></ProjectExplorer>