fix: モーダルコンテンツクリック時の挙動修正

ikmnjrd · Mar 10, 2024 · 53ffc63 · 53ffc63
1 parent 87378d2
commit 53ffc63
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 39 deletions.
diff --git a/src/components/Hit.tsx b/src/components/Hit.tsx
@@ -20,14 +20,25 @@ type HitProps = {
 export function Hit({ hit }: HitProps) {
   return (
     <Link href={`/blog/${hit.slug}`} passHref legacyBehavior>
-      {/* FIXME: devモードでもモーダルが閉じるようにする */}
-      <a className="hover:cursor-pointer" data-custom-close>
+      <a className="hover:cursor-pointer" data-target-close>
         <h1>
-          <Highlight attribute="title" hit={hit} />
+          <Highlight
+            attribute="title"
+            hit={hit}
+            data-target-close
+          />
         </h1>
-        <Snippet hit={hit} attribute="content" />
-        <div className="text-right">
-          <Highlight attribute="slug" hit={hit} />
+        <Snippet
+          hit={hit}
+          attribute="content"
+          data-target-close
+        />
+        <div className="text-right" data-target-close>
+          <Highlight
+            attribute="slug"
+            hit={hit}
+            data-target-close
+          />
         </div>
       </a>
     </Link>

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,9 +1,4 @@
-import {
-  useEffect,
-  useRef,
-  PropsWithChildren,
-  useCallback,
-} from 'react'
+import { useRef, PropsWithChildren } from 'react'
 import styles from './modal.module.css'
 
 /**
@@ -24,37 +19,28 @@ export default function Modal({
     dialogRef.current?.close()
   }
 
-  const handleKeydownDialogContainer = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.code === 'Escape') {
-        onClickOpenBtn()
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  )
+  function handleClickForChildren(evTarget: unknown) {
+    // @ts-expect-error FIXME
+    if (!evTarget?.outerHTML) {
+      return
+    }
+
+    // @ts-expect-error FIXME
+    const html = evTarget.outerHTML as string
 
-  useEffect(() => {
-    document.addEventListener(
-      'keydown',
-      handleKeydownDialogContainer
-    )
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleKeydownDialogContainer
-      )
+    if (
+      !html.includes('ais-Hits-list') &&
+      (html.includes('data-target-close') ||
+        html.includes('ais-Highlight') ||
+        html.includes('ais-Snippet'))
+    ) {
+      onClickCloseBtn()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }
 
   return (
     <>
-      <button
-        type="button"
-        onClick={onClickOpenBtn}
-        data-test="dialog-open-btn"
-      >
+      <button type="button" onClick={onClickOpenBtn}>
         <span className={labelClass}>
           {label || 'Open Modal'}
         </span>
@@ -72,7 +58,10 @@ export default function Modal({
             className={styles.modal__container}
             role="dialog"
             aria-modal="true"
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              handleClickForChildren(e.nativeEvent.target)
+              e.stopPropagation()
+            }}
           >
             {children}
           </div>