From 63e81cb9533195b215a9e4b0e3460a4daed52c20 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Thu, 18 Apr 2024 15:54:05 +0200
Subject: [PATCH] Try to fix the possibility to search details elements

---
 .../src/components/Collapsible/index.tsx      |  2 +-
 .../src/components/Details/index.tsx          | 37 ++++++++++++-------
 .../src/components/Details/styles.module.css  |  2 +-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
index 9668fe278fbc..9e2b6d102235 100644
--- a/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Collapsible/index.tsx
@@ -48,7 +48,7 @@ export function useCollapsible({
 }
 
 const CollapsedStyles = {
-  display: 'none',
+  display: 'block',
   overflow: 'hidden',
   height: '0px',
 } as const;
diff --git a/packages/docusaurus-theme-common/src/components/Details/index.tsx b/packages/docusaurus-theme-common/src/components/Details/index.tsx
index 1046cae05c41..9bfe13da7bab 100644
--- a/packages/docusaurus-theme-common/src/components/Details/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Details/index.tsx
@@ -5,12 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {
-  useRef,
-  useState,
-  type ComponentProps,
-  type ReactElement,
-} from 'react';
+import React, {useRef, type ComponentProps, type ReactElement} from 'react';
 import clsx from 'clsx';
 import useBrokenLinks from '@docusaurus/useBrokenLinks';
 import useIsBrowser from '@docusaurus/useIsBrowser';
@@ -56,9 +51,6 @@ export function Details({
   const {collapsed, setCollapsed} = useCollapsible({
     initialState: !props.open,
   });
-  // Use a separate state for the actual details prop, because it must be set
-  // only after animation completes, otherwise close animations won't work
-  const [open, setOpen] = useState(props.open);
 
   const summaryElement = React.isValidElement(summary) ? (
     summary
@@ -66,12 +58,21 @@ export function Details({
     <summary>{summary ?? 'Details'}</summary>
   );
 
+  function toggle() {
+    if (collapsed) {
+      setCollapsed(false);
+      detailsRef.current!.open = true;
+    } else {
+      setCollapsed(true);
+      // Don't remove "open" it breaks close animation!
+    }
+  }
+
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     <details
       {...props}
       ref={detailsRef}
-      open={open}
       data-collapsed={collapsed}
       className={clsx(
         styles.details,
@@ -85,7 +86,16 @@ export function Details({
           e.preventDefault();
         }
       }}
+      onToggle={(e) => {
+        console.log('toggle', e.currentTarget.open);
+
+        // For isolation of multiple nested details/summary
+        e.stopPropagation();
+        e.preventDefault();
+        toggle();
+      }}
       onClick={(e) => {
+        console.log('click', e);
         e.stopPropagation(); // For isolation of multiple nested details/summary
         const target = e.target as HTMLElement;
         const shouldToggle =
@@ -96,11 +106,10 @@ export function Details({
         e.preventDefault();
         if (collapsed) {
           setCollapsed(false);
-          setOpen(true);
+          detailsRef.current!.open = true;
         } else {
           setCollapsed(true);
-          // Don't do this, it breaks close animation!
-          // setOpen(false);
+          // Don't remove "open" it breaks close animation!
         }
       }}>
       {summaryElement}
@@ -111,7 +120,7 @@ export function Details({
         disableSSRStyle // Allows component to work fine even with JS disabled!
         onCollapseTransitionEnd={(newCollapsed) => {
           setCollapsed(newCollapsed);
-          setOpen(!newCollapsed);
+          detailsRef.current!.open = !newCollapsed;
         }}>
         <div className={styles.collapsibleContent}>{children}</div>
       </Collapsible>
diff --git a/packages/docusaurus-theme-common/src/components/Details/styles.module.css b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
index 11863a0f3dbe..4b0e560be12b 100644
--- a/packages/docusaurus-theme-common/src/components/Details/styles.module.css
+++ b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
@@ -47,7 +47,7 @@ CSS variables, meant to be overridden by final theme
 /* When JS disabled/failed to load: we use the open property for arrow animation: */
 .details[open]:not(.isBrowser) > summary::before,
 /* When JS works: we use the data-attribute for arrow animation */
-.details[data-collapsed='false'].isBrowser > summary::before {
+.details[open].isBrowser > summary::before {
   transform: rotate(90deg);
 }