From 51253650e19f57d7d13b505dcf40ed0ccce1f1d0 Mon Sep 17 00:00:00 2001
From: Jason Polete <jpolete@gmail.com>
Date: Mon, 13 Oct 2025 10:40:35 -0400
Subject: [PATCH] Fix wa-details accordion behavior in react (#1538)

* fix wa-details accordion in react (#1534)

* Update packages/webawesome/src/components/details/details.test.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

* Remove unused import

* Fix unintended indent

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 packages/webawesome/src/components/details/details.test.ts | 7 +++++++
 packages/webawesome/src/components/details/details.ts      | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/webawesome/src/components/details/details.test.ts b/packages/webawesome/src/components/details/details.test.ts
index 75bba1a17..7ceb952dd 100644
--- a/packages/webawesome/src/components/details/details.test.ts
+++ b/packages/webawesome/src/components/details/details.test.ts
@@ -24,6 +24,13 @@ describe('<wa-details>', () => {
         });
       });
 
+      it('should reflect the name property', async () => {
+        const el = await fixture<WaDetails>(html`<wa-details></wa-details>`);
+        el.name = 'test'
+        await el.updateComplete;
+        expect(el.getAttribute('name')).to.equal('test');
+      });
+
       it('should be visible with the open attribute', async () => {
         const el = await fixture<WaDetails>(html`
           <wa-details open>
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 13ad982cf..3b1799d82 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -70,7 +70,7 @@ export default class WaDetails extends WebAwesomeElement {
   @property() summary: string;
 
   /** Groups related details elements. When one opens, others with the same name will close. */
-  @property() name: string;
+  @property({ reflect: true }) name: string;
 
   /** Disables the details so it can't be toggled. */
   @property({ type: Boolean, reflect: true }) disabled = false;