From a98a468ae5200898605b413486ab7d9195ca012e Mon Sep 17 00:00:00 2001
From: Xavier Stouder <xavier@stouder.io>
Date: Fri, 26 May 2023 15:03:20 +0200
Subject: [PATCH] fix: avoid double clicking issue (#488)

Fixes: https://github.com/zakodium-oss/react-science/issues/487
---
 src/components/accordion/Accordion.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/accordion/Accordion.tsx b/src/components/accordion/Accordion.tsx
index bb686aad..1c47c1b4 100644
--- a/src/components/accordion/Accordion.tsx
+++ b/src/components/accordion/Accordion.tsx
@@ -1,8 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import type { ReactElement, ReactNode, ReactFragment } from 'react';
-
-import { useDoubleClick } from '../hooks/index';
+import type {
+  ReactElement,
+  ReactNode,
+  ReactFragment,
+  MouseEvent as ReactMouseEvent,
+} from 'react';
+import { useCallback } from 'react';
 
 import { useAccordionContext } from './AccordionContext';
 
@@ -61,10 +65,16 @@ export function Accordion(props: AccordionProps) {
 Accordion.Item = function AccordionItem(props: AccordionItemProps) {
   const { item, utils } = useAccordionContext(props.title, props.defaultOpened);
 
-  const onClickHandle = useDoubleClick({
-    onClick: utils.toggle,
-    onDoubleClick: utils.clear,
-  });
+  const onClickHandle = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (event.shiftKey) {
+        utils.clear();
+      } else {
+        utils.toggle();
+      }
+    },
+    [utils],
+  );
 
   let displayable = false;
 
@@ -87,7 +97,7 @@ Accordion.Item = function AccordionItem(props: AccordionItemProps) {
           display: 'flex',
           alignItems: 'center',
           width: '100%',
-          userSelect: 'text',
+          userSelect: 'none',
         }}
         css={styles.header}
       >