@furystack/shades-common-components 12.3.0 → 12.5.0

package/src/components/form.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, using, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { using, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Form, FormService } from './form.js'
 
@@ -35,6 +35,18 @@ describe('FormService', () => {
         expect(service.inputs.size).toBe(0)
       })
     })
+
+    it('should initialize isSubmitting as false', () => {
+      using(new FormService(), (service) => {
+        expect(service.isSubmitting.getValue()).toBe(false)
+      })
+    })
+
+    it('should initialize submitError as undefined', () => {
+      using(new FormService(), (service) => {
+        expect(service.submitError.getValue()).toBeUndefined()
+      })
+    })
   })
 
   describe('setFieldState', () => {
@@ -84,12 +96,18 @@ describe('FormService', () => {
       const validatedFormDataDisposeSpy = vi.spyOn(service.validatedFormData, Symbol.dispose)
       const rawFormDataDisposeSpy = vi.spyOn(service.rawFormData, Symbol.dispose)
       const validationResultDisposeSpy = vi.spyOn(service.validationResult, Symbol.dispose)
+      const fieldErrorsDisposeSpy = vi.spyOn(service.fieldErrors, Symbol.dispose)
+      const isSubmittingDisposeSpy = vi.spyOn(service.isSubmitting, Symbol.dispose)
+      const submitErrorDisposeSpy = vi.spyOn(service.submitError, Symbol.dispose)
 
       service[Symbol.dispose]()
 
       expect(validatedFormDataDisposeSpy).toHaveBeenCalled()
       expect(rawFormDataDisposeSpy).toHaveBeenCalled()
       expect(validationResultDisposeSpy).toHaveBeenCalled()
+      expect(fieldErrorsDisposeSpy).toHaveBeenCalled()
+      expect(isSubmittingDisposeSpy).toHaveBeenCalled()
+      expect(submitErrorDisposeSpy).toHaveBeenCalled()
     })
   })
 })
@@ -126,7 +144,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]')
       expect(form).not.toBeNull()
@@ -159,7 +177,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="name"]') as HTMLInputElement
@@ -168,7 +186,7 @@ describe('Form component', () => {
       const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
       form.dispatchEvent(submitEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onSubmit).toHaveBeenCalledWith({ name: 'Test Name' })
     })
@@ -199,7 +217,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const nameInput = form.querySelector('input[name="name"]') as HTMLInputElement
@@ -211,7 +229,7 @@ describe('Form component', () => {
       const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
       form.dispatchEvent(submitEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(onSubmit).not.toHaveBeenCalled()
     })
@@ -240,7 +258,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="email"]') as HTMLInputElement
@@ -249,7 +267,7 @@ describe('Form component', () => {
       const changeEvent = new Event('change', { bubbles: true })
       form.dispatchEvent(changeEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const formInjector = (form as unknown as { injector: Injector }).injector
       const formService = formInjector.getInstance(FormService)
@@ -287,7 +305,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="name"]') as HTMLInputElement
@@ -296,7 +314,7 @@ describe('Form component', () => {
       const changeEvent = new Event('change', { bubbles: true })
       form.dispatchEvent(changeEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const formInjector = (form as unknown as { injector: Injector }).injector
       const formService = formInjector.getInstance(FormService)
@@ -306,7 +324,7 @@ describe('Form component', () => {
       const resetEvent = new Event('reset', { bubbles: true })
       form.dispatchEvent(resetEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       expect(formService.rawFormData.getValue()).toBeNull()
       expect(formService.validationResult.getValue()).toEqual({ isValid: null })
@@ -336,7 +354,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="username"]') as HTMLInputElement
@@ -345,7 +363,7 @@ describe('Form component', () => {
       const changeEvent = new Event('change', { bubbles: true })
       form.dispatchEvent(changeEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const formInjector = (form as unknown as { injector: Injector }).injector
       const formService = formInjector.getInstance(FormService)
@@ -376,7 +394,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="title"]') as HTMLInputElement
@@ -385,7 +403,7 @@ describe('Form component', () => {
       const changeEvent = new Event('change', { bubbles: true })
       form.dispatchEvent(changeEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const formInjector = (form as unknown as { injector: Injector }).injector
       const formService = formInjector.getInstance(FormService)
@@ -412,7 +430,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
 
@@ -441,7 +459,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const formInjector = (form as unknown as { injector: Injector }).injector
@@ -477,7 +495,7 @@ describe('Form component', () => {
         ),
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
       const input = form.querySelector('input[name="required"]') as HTMLInputElement
@@ -485,7 +503,298 @@ describe('Form component', () => {
       const invalidEvent = new Event('invalid', { bubbles: true })
       input.dispatchEvent(invalidEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
+    })
+  })
+
+  it('should set isSubmitting during async onSubmit and reset after', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      expect(formService.isSubmitting.getValue()).toBe(false)
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await flushUpdates()
+      expect(formService.isSubmitting.getValue()).toBe(true)
+
+      resolveSubmit!()
+      await flushUpdates()
+      expect(formService.isSubmitting.getValue()).toBe(false)
+    })
+  })
+
+  it('should reset isSubmitting to false and set submitError when onSubmit throws', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { name: string }
+
+      const submitError = new Error('Submit failed')
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              throw submitError
+            }}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await flushUpdates()
+      expect(formService.isSubmitting.getValue()).toBe(false)
+      expect(formService.submitError.getValue()).toBe(submitError)
+    })
+  })
+
+  it('should clear submitError before a new submission', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let shouldThrow = true
+      let resolveSubmit: () => void
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              if (shouldThrow) {
+                throw new Error('First submit fails')
+              }
+              return new Promise<void>((resolve) => {
+                resolveSubmit = resolve
+              })
+            }}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      await flushUpdates()
+      expect(formService.submitError.getValue()).toBeInstanceOf(Error)
+
+      shouldThrow = false
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      await flushUpdates()
+      expect(formService.submitError.getValue()).toBeUndefined()
+      expect(formService.isSubmitting.getValue()).toBe(true)
+
+      resolveSubmit!()
+      await flushUpdates()
+      expect(formService.isSubmitting.getValue()).toBe(false)
+    })
+  })
+
+  it('should set inert on form element when disableOnSubmit is true during async submit', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            disableOnSubmit
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      expect(form.inert).toBeFalsy()
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await flushUpdates()
+      expect(form.inert).toBe(true)
+
+      resolveSubmit!()
+      await flushUpdates()
+      expect(form.inert).toBe(false)
+    })
+  })
+
+  it('should not set inert when disableOnSubmit is not provided', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      let resolveSubmit: () => void
+      const submitPromise = new Promise<void>((resolve) => {
+        resolveSubmit = resolve
+      })
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => submitPromise}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await flushUpdates()
+      expect(form.inert).toBeFalsy()
+
+      resolveSubmit!()
+      await flushUpdates()
+    })
+  })
+
+  it('should remove inert even if onSubmit throws when disableOnSubmit is true', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={async () => {
+              throw new Error('Submit failed')
+            }}
+            disableOnSubmit
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
+
+      await flushUpdates()
+
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
+
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
+
+      await flushUpdates()
+      expect(form.inert).toBe(false)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
+      expect(formService.isSubmitting.getValue()).toBe(false)
     })
   })
 })

package/src/components/form.tsx

@@ -29,6 +29,10 @@ export class FormService<T> {
 
   public inputs = new Set<HTMLInputElement>()
 
+  public isSubmitting = new ObservableValue<boolean>(false)
+
+  public submitError = new ObservableValue<unknown>(undefined)
+
   public setFieldState = (key: keyof T, validationResult: InputValidationResult, validity: ValidityState) => {
     this.fieldErrors.setValue({ ...this.fieldErrors.getValue(), [key]: { validationResult, validity } })
   }
@@ -37,13 +41,17 @@ export class FormService<T> {
     this.validatedFormData[Symbol.dispose]()
     this.rawFormData[Symbol.dispose]()
     this.validationResult[Symbol.dispose]()
+    this.fieldErrors[Symbol.dispose]()
+    this.isSubmitting[Symbol.dispose]()
+    this.submitError[Symbol.dispose]()
   }
 }
 
 type FormProps<T> = {
-  onSubmit: (formData: T) => void
+  onSubmit: (formData: T) => void | Promise<void>
   onReset?: () => void
-  validate: (formData: any) => formData is T
+  validate: (formData: unknown) => formData is T
+  disableOnSubmit?: boolean
 } & PartialElement<Omit<HTMLFormElement, 'onsubmit' | 'onchange' | 'onreset'>>
 
 export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Element = Shade({
@@ -61,13 +69,14 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
     // `injector` setter defined on the Shade base class.
     useHostProps({ injector: formInjector })
 
-    const changeHandler = (ev: Event, shouldSubmit?: boolean) => {
+    const changeHandler = async (ev: Event, shouldSubmit?: boolean) => {
       formService.inputs.forEach((i) => {
         const e = document.createEvent('FocusEvent')
         e.initEvent('blur', true, true)
         i.dispatchEvent(e)
       })
-      const formData = Object.fromEntries(new FormData(ev.currentTarget as HTMLFormElement).entries())
+      const formElement = ev.currentTarget as HTMLFormElement
+      const formData = Object.fromEntries(new FormData(formElement).entries())
       formService.rawFormData.setValue(formData)
       const currentFieldErrors = formService.fieldErrors.getValue()
 
@@ -80,7 +89,21 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
         formService.validationResult.setValue({ isValid: true })
         formService.validatedFormData.setValue(formData)
         if (shouldSubmit) {
-          props.onSubmit(formData)
+          formService.isSubmitting.setValue(true)
+          formService.submitError.setValue(undefined)
+          if (props.disableOnSubmit) {
+            formElement.inert = true
+          }
+          try {
+            await props.onSubmit(formData)
+          } catch (error) {
+            formService.submitError.setValue(error)
+          } finally {
+            formService.isSubmitting.setValue(false)
+            if (props.disableOnSubmit) {
+              formElement.inert = false
+            }
+          }
         }
       } else {
         formService.validationResult.setValue({ isValid: false, reason: 'validation-failed' })
@@ -89,14 +112,14 @@ export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Eleme
 
     useHostProps({
       oninvalid: (ev: Event) => {
-        changeHandler(ev)
+        void changeHandler(ev)
       },
       onsubmit: (ev: SubmitEvent) => {
         ev.preventDefault()
-        changeHandler(ev, true)
+        void changeHandler(ev, true)
       },
       onchange: (ev: Event) => {
-        changeHandler(ev)
+        void changeHandler(ev)
       },
       onreset: () => {
         formService.rawFormData.setValue(null)

package/src/components/grid.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { Grid, type GridProps, type HeaderCells, type RowCells } from './grid.js'
 
@@ -24,7 +24,7 @@ describe('Grid', () => {
       rootElement: root,
       jsxElement: <Grid {...props} />,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     const grid = document.querySelector('shade-grid') as HTMLElement
     return {
       injector,