Fix admin modals getting stuck after a successful submit

This commit is contained in:
NeilClack
2026-09-10 13:33:33 -05:00
parent e60d61e90a
commit 8a3c1587b4
10 changed files with 31 additions and 10 deletions
@@ -35,8 +35,8 @@
let replaceError = $state('');
let replaceSuccess = $state('');
let lastCreateForm = $state<ActionResult>(null);
let lastReplaceForm = $state<ActionResult>(null);
let lastCreateForm = $state.raw<ActionResult>(null);
let lastReplaceForm = $state.raw<ActionResult>(null);
let createTimer: ReturnType<typeof setTimeout> | undefined;
let replaceTimer: ReturnType<typeof setTimeout> | undefined;
@@ -24,7 +24,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -24,7 +24,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -46,7 +46,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let element = $state<HTMLElement>();
let editor: Editor | null = null;
@@ -23,7 +23,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -46,7 +46,7 @@
let lastRecordId = $state<string | null>(null);
// Capture the form result as it is when this modal mounts so a stale
// result from a previous record is not replayed on open.
let lastForm = $state<ActionResult>(untrack(() => form ?? null));
let lastForm = $state.raw<ActionResult>(untrack(() => form ?? null));
function resetAddressFields() {
addrStreet = '';
@@ -27,7 +27,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -26,7 +26,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -44,7 +44,7 @@
let formError = $state('');
let fieldErrors = $state<Record<string, string>>({});
let successMessage = $state('');
let lastForm = $state<ActionResult>(null);
let lastForm = $state.raw<ActionResult>(null);
let closeTimer: ReturnType<typeof setTimeout> | undefined;
@@ -61,4 +61,25 @@ describe('users admin page', () => {
await expect.element(page.getByRole('button', { name: 'Save User' })).toBeInTheDocument();
expect(page.getByText('User updated').elements()).toHaveLength(0);
});
it('closes the create modal after a successful submit', async () => {
const result = render(Page, {
params: {},
data: makeData(),
form: null
});
await clickButton('New User');
await expect.element(page.getByRole('button', { name: 'Create User' })).toBeInTheDocument();
await result.rerender({ form: { success: true, action: 'upsert' } });
await expect.element(page.getByText('User created')).toBeInTheDocument();
await vi.waitFor(
() => {
expect(page.getByRole('button', { name: 'Create User' }).elements()).toHaveLength(0);
},
{ timeout: 3000 }
);
});
});