From dc719fc6d0c81b69f49529a618c5bdf6fd2b2530 Mon Sep 17 00:00:00 2001
From: wadackel <wadackel@gmail.com>
Date: Sun, 28 Apr 2024 18:30:32 +0900
Subject: [PATCH] fix: keyboard shortcuts bug

---
 .../internal/SidebarInner/SidebarInner.tsx    |  9 +++--
 src/hooks/useKey.ts                           | 21 ++++++++++-
 src/hooks/useMergeRefs.ts                     | 37 +++++++++++++++++++
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useMergeRefs.ts

diff --git a/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx b/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
index dbb29ac..40447cb 100644
--- a/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
+++ b/src/components/Sidebar/internal/SidebarInner/SidebarInner.tsx
@@ -1,5 +1,6 @@
-import React, { createRef, useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useKey } from '../../../../hooks/useKey';
+import { useMergeRefs } from '../../../../hooks/useMergeRefs';
 import { useEntities, useEntityFilter } from '../../../../states/entity';
 import {
   useSidebarEntities,
@@ -32,7 +33,7 @@ export const SidebarInner = ({ scrollerRef, inputRef, listRef }: Props) => {
   const { toggle } = useSidebarMutators();
   const sidebarEntity = useSidebarEntities();
   const entity = useEntities();
-  const innerRef = scrollerRef || createRef();
+  const innerRef = useRef<HTMLDivElement>(null);
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -53,9 +54,11 @@ export const SidebarInner = ({ scrollerRef, inputRef, listRef }: Props) => {
     tryNextFocus(innerRef.current);
   });
 
+  const ref = useMergeRefs(innerRef, scrollerRef);
+
   return (
     <>
-      <div ref={innerRef} className={styles.inner} id="sidebar">
+      <div ref={ref} className={styles.inner} id="sidebar">
         <SearchBox
           inputRef={inputRef}
           placeholder="Filter by file name"
diff --git a/src/hooks/useKey.ts b/src/hooks/useKey.ts
index c5dcbcb..7326649 100644
--- a/src/hooks/useKey.ts
+++ b/src/hooks/useKey.ts
@@ -1,10 +1,15 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { tinykeys } from 'tinykeys';
 
+const ignore = new Set(['input', 'select', 'textarea']);
+
 export type UseKeyCallback = (e: KeyboardEvent) => void;
 
 export const useKey = (
-  target: React.RefObject<HTMLElement> | null,
+  target:
+    | React.RefObject<HTMLElement>
+    | React.MutableRefObject<HTMLElement>
+    | null,
   keys: string[],
   callback: UseKeyCallback,
 ) => {
@@ -20,7 +25,19 @@ export const useKey = (
     return tinykeys(
       target?.current ?? window,
       Object.fromEntries(
-        keys.map((key) => [key, (e) => callbackRef.current(e)]),
+        keys.map((key) => [
+          key,
+          (e) => {
+            const el = e.target;
+            if (
+              el instanceof HTMLElement &&
+              ignore.has(el.tagName.toLowerCase())
+            ) {
+              return;
+            }
+            callbackRef.current(e);
+          },
+        ]),
       ),
     );
   }, [target, keys]);
diff --git a/src/hooks/useMergeRefs.ts b/src/hooks/useMergeRefs.ts
new file mode 100644
index 0000000..7740a01
--- /dev/null
+++ b/src/hooks/useMergeRefs.ts
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+type ReactRef<T> = React.Ref<T> | React.MutableRefObject<T>;
+
+const assignRef = <T = any>(ref: ReactRef<T> | undefined, value: T) => {
+  if (ref == null) {
+    return;
+  }
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref.current = value;
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+  }
+};
+
+export const useMergeRefs = <T>(...refs: (ReactRef<T> | undefined)[]) => {
+  return useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (node: T) => {
+      refs.forEach((ref) => {
+        if (ref) {
+          assignRef(ref, node);
+        }
+      });
+    };
+  }, refs); // eslint-disable-line react-hooks/exhaustive-deps
+};