From c7881cb5e3653d82b4a3d0b69cb08ce184da59b1 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <104347736+nmerget@users.noreply.github.com>
Date: Wed, 20 Mar 2024 15:36:38 +0100
Subject: [PATCH] fix: issue with accordion with single behaviour (#2361)

---
 .../src/components/accordion-item/accordion-item.lite.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
index 0892f65909c..673601d6727 100644
--- a/packages/components/src/components/accordion-item/accordion-item.lite.tsx
+++ b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -7,8 +7,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBAccordionItemProps, DBAccordionItemState } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -23,6 +24,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	const ref = useRef<HTMLDetailsElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
+		_id: DEFAULT_ID,
 		_open: false,
 		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
@@ -36,6 +38,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'accordion-item-' + uuid();
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}
@@ -45,7 +48,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	return (
 		<details
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-accordion-item', props.className)}
 			aria-disabled={props.disabled}
 			open={state._open}