Skip to content

fix(header): ウォレットメニューが接続・切断の直後に開いたままになるのを直す #543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cipherwebllc merged 1 commit into from
Sep 21, 2026
Merged

fix(header): ウォレットメニューが接続・切断の直後に開いたままになるのを直す #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions components/WalletBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -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
Expand Down
27 changes: 27 additions & 0 deletions tests/components/WalletBadge.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Loading