Clear add-user form after closing

src/components/AddUserModal.tsx

@@ -25,6 +25,18 @@ export function AddUserModal({ isOpen, onClose, onSave }: AddUserModalProps) {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
     const [role, setRole] = useState('user');
+    const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
+
+    if (isOpen !== previousIsOpen) {
+        setPreviousIsOpen(isOpen);
+        if (!isOpen) {
+            setName('');
+            setUsername('');
+            setEmail('');
+            setPassword('');
+            setRole('user');
+        }
+    }
 
     const handleSave = () => {
         onSave({

src/components/ModalInput.tsx

@@ -45,6 +45,7 @@ export function ModalInput({
                 <Icon className={iconClass} />
                 {as === 'select' ? (
                     <select
+                        aria-label={label}
                         value={value}
                         onChange={(e) => onChange(e.target.value)}
                         className={`${inputClass} appearance-none`}
@@ -57,6 +58,7 @@ export function ModalInput({
                     </select>
                 ) : (
                     <input
+                        aria-label={label}
                         type={type ?? 'text'}
                         value={value}
                         onChange={(e) => onChange(e.target.value)}

tests/e2e/users.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from './fixtures';
+
+test.describe('User management', () => {
+    test('clears the add user form after creating a user', async ({ authenticatedPage: page }) => {
+        await page.goto('/dashboard/users');
+        await page.getByRole('button', { name: 'Add User' }).click();
+
+        const nameInput = page.getByLabel('Name', { exact: true });
+        const usernameInput = page.getByLabel('Username', { exact: true });
+        const emailInput = page.getByLabel('Email', { exact: true });
+        const passwordInput = page.getByLabel('Password', { exact: true });
+        const roleSelect = page.getByLabel('Role', { exact: true });
+
+        await nameInput.fill('Second User');
+        await usernameInput.fill('seconduser');
+        await emailInput.fill('second@example.com');
+        await passwordInput.fill('SecondPassword123!');
+        await roleSelect.selectOption('admin');
+        await page.getByRole('button', { name: 'Add User' }).last().click();
+
+        await expect(page.getByRole('heading', { name: 'Add User' })).toBeHidden();
+        await page.getByRole('button', { name: 'Add User' }).click();
+
+        await expect(nameInput).toHaveValue('');
+        await expect(usernameInput).toHaveValue('');
+        await expect(emailInput).toHaveValue('');
+        await expect(passwordInput).toHaveValue('');
+        await expect(roleSelect).toHaveValue('user');
+    });
+});