From 0d2de7b53573017c4e515e433897ed77282a6c76 Mon Sep 17 00:00:00 2001
From: dwebxr <info@cipher-web.com>
Date: Mon, 21 Sep 2026 22:34:23 +0900
Subject: [PATCH] =?UTF-8?q?fix(header):=20=E3=82=A6=E3=82=A9=E3=83=AC?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=8C?=
 =?UTF-8?q?=E6=8E=A5=E7=B6=9A=E3=83=BB=E5=88=87=E6=96=AD=E3=81=AE=E7=9B=B4?=
 =?UTF-8?q?=E5=BE=8C=E3=81=AB=E9=96=8B=E3=81=84=E3=81=9F=E3=81=BE=E3=81=BE?=
 =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=82=8B=E3=81=AE=E3=82=92=E7=9B=B4=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

未接続と接続済みの両 branch が同じ位置に <details> を描くため、React が DOM 要素を
使い回し、open 属性が引き継がれていた。「接続」メニューから接続すると、接続後のメニュー
(ログイン / 切断) が開いたまま本文に被さる。切断時も同様。

それぞれの <details> に別の key を付けて作り直す (閉じた状態で始まる)。
JS state は増やさない (native <details> の方針のまま)。

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HeizmagJBgL5peL5mQpxkc
---
 components/WalletBadge.tsx            |  6 ++++--
 tests/components/WalletBadge.test.tsx | 27 +++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/WalletBadge.tsx b/components/WalletBadge.tsx
index fba1c43d..b664d91e 100644
--- a/components/WalletBadge.tsx
+++ b/components/WalletBadge.tsx
@@ -56,7 +56,9 @@ export function WalletBadge() {
 
   if (isConnected && address) {
     return (
-      <details className="group relative">
+      // key: 未接続 branch と同じ位置の <details> なので、無いと React が DOM を使い回し open が
+      // 引き継がれる (接続直後にメニューが開いたまま本文へ被さる)。
+      <details key="connected" className="group relative">
         <summary className="flex cursor-pointer list-none items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-200">
           <span className="inline-block h-2 w-2 rounded-full bg-emerald-500" aria-hidden />
           {siweEnabled && isSignedIn && (
@@ -124,7 +126,7 @@ export function WalletBadge() {
   }
 
   return (
-    <details className="group relative">
+    <details key="disconnected" className="group relative">
       <summary className="flex cursor-pointer list-none items-center gap-1 rounded-full bg-brand px-3 py-1.5 text-xs font-semibold text-white hover:bg-brand-dark">
         {t('connect')}
         <ChevronDown
diff --git a/tests/components/WalletBadge.test.tsx b/tests/components/WalletBadge.test.tsx
index 26b4ad2e..66d0408f 100644
--- a/tests/components/WalletBadge.test.tsx
+++ b/tests/components/WalletBadge.test.tsx
@@ -491,3 +491,30 @@ describe('WalletBadge: 未接続 branch', () => {
     expect(screen.getByText('Connect')).toBeInTheDocument();
   });
 });
+
+describe('WalletBadge: 接続状態の切り替わり', () => {
+  it('開いた「接続」メニューから接続が完了 → 接続後のメニューは閉じた状態で始まる', () => {
+    // 両 branch とも同じ位置に <details> を描くため、key が無いと React が DOM を使い回し、
+    // open 属性が引き継がれて接続直後にメニューが本文へ被さったままになっていた。
+    setDisconnected();
+    visibleConnectorsMock.mockReturnValue([{ uid: '1', name: 'MetaMask' }]);
+    const { container, rerender } = renderWithIntl(<WalletBadge />);
+    openDropdown('接続');
+
+    setConnected();
+    rerender(<WalletBadge />);
+    expect(screen.getByText(/0x52d4/i)).toBeInTheDocument();
+    expect(container.querySelector('details')?.open).toBe(false);
+  });
+
+  it('開いたメニューから切断 → 「接続」メニューは閉じた状態で始まる', () => {
+    setConnected();
+    const { container, rerender } = renderWithIntl(<WalletBadge />);
+    openDropdown(/0x52d4/i);
+
+    setDisconnected();
+    rerender(<WalletBadge />);
+    expect(screen.getByText('接続')).toBeInTheDocument();
+    expect(container.querySelector('details')?.open).toBe(false);
+  });
+});