From ce92f30d336b91cacedf43323790f3972e4ad9da Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Tue, 17 Aug 2021 13:04:32 +0300
Subject: [PATCH] fix: unbreak Details component (#5364)

---
 .../src/components/Details/index.tsx          | 75 +++++++++----------
 1 file changed, 35 insertions(+), 40 deletions(-)

diff --git a/packages/docusaurus-theme-common/src/components/Details/index.tsx b/packages/docusaurus-theme-common/src/components/Details/index.tsx
index 6ba2e2012d1e..3183583986bd 100644
--- a/packages/docusaurus-theme-common/src/components/Details/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Details/index.tsx
@@ -50,48 +50,43 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
         styles.details,
         {[styles.isBrowser]: isBrowser},
         props.className,
-      )}>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-      <div
-        role="button"
-        tabIndex={0}
-        onMouseDown={(e) => {
-          const target = e.target as HTMLElement;
-          // Prevent a double-click to highlight summary text
-          if (isInSummary(target) && e.detail > 1) {
-            e.preventDefault();
-          }
-        }}
-        onClick={(e) => {
-          e.stopPropagation(); // For isolation of multiple nested details/summary
-          const target = e.target as HTMLElement;
-          const shouldToggle =
-            isInSummary(target) && hasParent(target, detailsRef.current!);
-          if (!shouldToggle) {
-            return;
-          }
+      )}
+      onMouseDown={(e) => {
+        const target = e.target as HTMLElement;
+        // Prevent a double-click to highlight summary text
+        if (isInSummary(target) && e.detail > 1) {
           e.preventDefault();
-          if (collapsed) {
-            setCollapsed(false);
-            setOpen(true);
-          } else {
-            setCollapsed(true);
-            // setOpen(false); // Don't do this, it breaks close animation!
-          }
-        }}>
-        {summary}
+        }
+      }}
+      onClick={(e) => {
+        e.stopPropagation(); // For isolation of multiple nested details/summary
+        const target = e.target as HTMLElement;
+        const shouldToggle =
+          isInSummary(target) && hasParent(target, detailsRef.current!);
+        if (!shouldToggle) {
+          return;
+        }
+        e.preventDefault();
+        if (collapsed) {
+          setCollapsed(false);
+          setOpen(true);
+        } else {
+          setCollapsed(true);
+          // setOpen(false); // Don't do this, it breaks close animation!
+        }
+      }}>
+      {summary}
 
-        <Collapsible
-          lazy={false} // Content might matter for SEO in this case
-          collapsed={collapsed}
-          disableSSRStyle // Allows component to work fine even with JS disabled!
-          onCollapseTransitionEnd={(newCollapsed) => {
-            setCollapsed(newCollapsed);
-            setOpen(!newCollapsed);
-          }}>
-          <div className={styles.collapsibleContent}>{children}</div>
-        </Collapsible>
-      </div>
+      <Collapsible
+        lazy={false} // Content might matter for SEO in this case
+        collapsed={collapsed}
+        disableSSRStyle // Allows component to work fine even with JS disabled!
+        onCollapseTransitionEnd={(newCollapsed) => {
+          setCollapsed(newCollapsed);
+          setOpen(!newCollapsed);
+        }}>
+        <div className={styles.collapsibleContent}>{children}</div>
+      </Collapsible>
     </details>
   );
 };