From 87e2ea56cfcba98eb5911fc619abf1a7f6d34c3e Mon Sep 17 00:00:00 2001
From: pelusanchez <davidiglesanchez@gmail.com>
Date: Wed, 22 Nov 2023 16:17:27 +0100
Subject: [PATCH] Custom onclick

---
 src/components/GenerateBlocks.tsx   |  1 -
 src/components/blocks/Accordion.tsx | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/GenerateBlocks.tsx b/src/components/GenerateBlocks.tsx
index 2702c15..4e725c0 100644
--- a/src/components/GenerateBlocks.tsx
+++ b/src/components/GenerateBlocks.tsx
@@ -61,7 +61,6 @@ const GenerateBlocks = ({
   blocks: LayoutSectionBlock[] | null
   markdownParsingOptions?: MarkdownToJSX.Options
 }) => {
-
   return (
     <>
       {blocks &&
diff --git a/src/components/blocks/Accordion.tsx b/src/components/blocks/Accordion.tsx
index d6b6f19..cedf8f8 100644
--- a/src/components/blocks/Accordion.tsx
+++ b/src/components/blocks/Accordion.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import styled from 'styled-components'
 import { AccordionSingle } from '@ecmwf-projects/cads-ui-library'
@@ -12,16 +12,22 @@ export const Accordion = ({ block }: { block: AccordionBlock }) => {
 
   const isHashSelected = useHashSelected(block.id)
 
-  const value = useMemo(() => {
+  const [open, setOpen] = useState(false)
+  useEffect(() => {
+    let opened = false
     if (isHashSelected) {
-      return block.title
+      opened = true
     }
-    return block.collapsed ? '' : block.title
+    opened = !block.collapsed
+    setOpen(opened)
   }, [block.collapsed, block.title, isHashSelected])
-  
+
   return (<AccordionSingle
     rootProps={{
-      value: value,
+      value: open ? block.title : '',
+      onClick: () => {
+        setOpen(!open)
+      }
     }}
     itemProps={{
       value: block.title,