refactor: deprecate DOM focus util

src/components/FileExplorer/hooks/useHandleKeyDown.tsx

@@ -1,3 +1,4 @@
+import { SidebarContext } from 'components/SidebarContext'
 import * as React from 'react'
 import * as DOMHelper from 'utils/DOMHelper'
 import { OperatingSystems, os } from 'utils/general'
@@ -31,17 +32,19 @@ export function useHandleKeyDown(
   searched: boolean,
   setAlignMode: (mode: AlignMode) => void,
 ) {
+  const { pendingFocusTarget } = React.useContext(SidebarContext)
+  const setPendingFocusTarget = pendingFocusTarget.onChange
   return React.useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       const { nodes, focusedNode, expandedNodes } = visibleNodes
 
       const handleVerticalMove = (index: number) => {
         if (0 <= index && index < nodes.length) {
-          DOMHelper.focusFileExplorer()
+          setPendingFocusTarget('files')
           setAlignMode('lazy')
           focusNode(nodes[index])
         } else {
-          DOMHelper.focusSearchInput()
+          setPendingFocusTarget('search')
           focusNode(null)
         }
       }
@@ -136,11 +139,11 @@ export function useHandleKeyDown(
         if (nodes.length) {
           switch (key) {
             case 'ArrowDown':
-              DOMHelper.focusFileExplorer()
+              setPendingFocusTarget('files')
               focusNode(nodes[0])
               break
             case 'ArrowUp':
-              DOMHelper.focusFileExplorer()
+              setPendingFocusTarget('files')
               focusNode(nodes[nodes.length - 1])
               break
             default:
@@ -152,6 +155,6 @@ export function useHandleKeyDown(
         }
       }
     },
-    [visibleNodes, searched, goTo, focusNode, toggleExpansion, setAlignMode],
+    [visibleNodes, searched, goTo, focusNode, toggleExpansion, setAlignMode, setPendingFocusTarget],
   )
 }

src/utils/DOMHelper.ts

@@ -130,29 +130,6 @@ export function copyElementContent(element: Element, trimLeadingSpace?: boolean)
   return isCopySuccessful
 }
 
-/**
- * focus to side bar, user will be able to manipulate it with keyboard
- */
-export function focusFileExplorer() {
-  const sideBarContentSelector = '.gitako-side-bar .file-explorer'
-  $(sideBarContentSelector, sideBarElement => {
-    if (document.activeElement !== sideBarElement && sideBarElement instanceof HTMLElement)
-      sideBarElement.focus()
-  })
-}
-
-export function focusSearchInput() {
-  const searchInputSelector = '.search-input input'
-  $(searchInputSelector, searchInputElement => {
-    if (
-      document.activeElement !== searchInputElement &&
-      searchInputElement instanceof HTMLElement
-    ) {
-      searchInputElement.focus()
-    }
-  })
-}
-
 export function findNodeElement(node: TreeNode, rootElement: HTMLElement): HTMLElement | null {
   const nodeElement = rootElement.querySelector(`a[href="${node.url}"]`)
   if (nodeElement instanceof HTMLElement) return nodeElement