🐛 Controlled Accordion の初期値に対してアコーディオンが開かない (#1607)

voyagegroup · Apr 25, 2024 · 86c70f7 · 86c70f7
1 parent f3337a1
commit 86c70f7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/twelve-spoons-wink.md b/.changeset/twelve-spoons-wink.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+:bug: Fix to open accordion by controlled state
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -63,7 +63,7 @@ export const Multiple: StoryObj<AccordionProps> = {
 
 export const Controlled: StoryObj<AccordionProps> = {
   render: () => {
-    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const [expanded, setExpanded] = React.useState<string | false>("title1");
     const handleChange =
       (panel: string) => (_: React.SyntheticEvent, newExpanded: boolean) => {
         setExpanded(newExpanded ? panel : false);

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -27,9 +27,7 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
   const [overflow, setOverflow] = useState<"hidden" | "visible">("hidden");
   const accordionContentContainerRef = useRef<HTMLDivElement>(null);
 
-  const handleChange = (event: React.SyntheticEvent, expanded: boolean) => {
-    setExpandedState(expanded);
-    onChange && onChange(event, expanded);
+  const setContentStyle = (expanded: boolean) => {
     if (expanded) {
       setHeight(`${accordionContentContainerRef.current?.scrollHeight ?? 0}px`);
     } else {
@@ -39,6 +37,12 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
     }
   };
 
+  const handleChange = (event: React.SyntheticEvent, expanded: boolean) => {
+    setExpandedState(expanded);
+    setContentStyle(expanded);
+    onChange && onChange(event, expanded);
+  };
+
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     handleChange(event, !expandedState);
   };
@@ -58,6 +62,7 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
 
   useEffect(() => {
     setExpandedState(expanded);
+    setContentStyle(expanded);
   }, [expanded]);
 
   return (