AI & Agent Dev Bug Sandbox Back to Radar

Authentication User Details Drawer Close Button Does Not Close The Panel

In Supabase Dashboard Authentication > Users, the user details drawer cannot be closed using the top-right close/collapse control. The panel remains open until navigating away; no JavaScript errors are logged.

mediumConfidence 75%React

Origin Analysis

The drawer's close control is not bound to a handler that clears the selected user state, so the controlled open prop remains true and the drawer stays open.

1. Open a Supabase project in the Dashboard. 2. Navigate to Authentication → Users. 3. Click a user to open the user details drawer. 4. Click the close/collapse control in the upper-right corner. Expected: drawer closes. Actual: nothing happens.

Fixing Code Block

import { useState } from 'react';
import { Button, Drawer } from 'ui';
import { X } from 'lucide-react';
import UsersTable from './UsersTable';
import UserDetails from './UserDetails';
import type { User } from 'data/auth/users';

export const UsersList = () => {
  const [selectedUser, setSelectedUser] = useState<User | null>(null);

  const handleClose = () => setSelectedUser(null);

  return (
    <>
      <UsersTable onSelectUser={setSelectedUser} />
      <Drawer open={selectedUser !== null} onClose={handleClose}>
        <div style={{ padding: '1rem' }}>
          <Button
            type='text'
            icon={<X />}
            onClick={handleClose}
            aria-label='Close user details'
          />
          {selectedUser && <UserDetails user={selectedUser} />}
        </div>
      </Drawer>
    </>
  );
};

The fix adds an explicit handleClose function that resets selectedUser to null. It passes this handler to both the Drawer's onClose prop and the close button's onClick, ensuring any close action updates the controlled open state to false.

Edge Case Audit

This hotfix assumes the Drawer component's onClose prop is wired to its built-in close and overlay click events. If the top-right close/collapse button is a separate custom element elsewhere in the component tree, ensure it also uses the same handleClose callback. Avoid adding a separate visibility flag that can desynchronize from selectedUser. Test with keyboard Escape, overlay click, and both X/chevron states. Rollback is safe (returns to previous behavior); no data migration or API changes are involved.