@open-mercato/ui 0.9.0 → 0.9.1-develop.7459.1.99e3accd30

package/src/backend/CrudForm.tsx

@@ -1008,7 +1008,16 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const navigationConfirmPendingRef = React.useRef(false)
   const submitNavigationBypassRef = React.useRef(false)
   const submitNavigationBypassTimeoutRef = React.useRef<number | null>(null)
-  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)
+  const [hasUnsavedChanges, setHasUnsavedChangesState] = React.useState(false)
+  const hasUnsavedChangesRef = React.useRef(false)
+  // Writing a state hook the value it already holds still re-runs this whole
+  // component once before React bails out. The dirty check runs on every edit,
+  // so the flag is only written when it actually flips.
+  const setHasUnsavedChanges = React.useCallback((next: boolean) => {
+    if (hasUnsavedChangesRef.current === next) return
+    hasUnsavedChangesRef.current = next
+    setHasUnsavedChangesState(next)
+  }, [])
   const popStateRollbackRef = React.useRef(false)
   const shouldBypassUnsavedChangesGuardRef = React.useRef(shouldBypassUnsavedChangesGuard)
   React.useEffect(() => {
@@ -1033,7 +1042,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     const dirty = currentSnapshot !== snapshot
     isDirtyRef.current = dirty
     setHasUnsavedChanges(dirty)
-  }, [embedded, trackDirtyWhenEmbedded, values])
+  }, [embedded, trackDirtyWhenEmbedded, values, setHasUnsavedChanges])
 
   React.useEffect(() => {
     onDirtyChange?.(hasUnsavedChanges)
@@ -1083,7 +1092,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     everEditedFieldIdsRef.current.clear()
     isDirtyRef.current = false
     setHasUnsavedChanges(false)
-  }, [])
+  }, [setHasUnsavedChanges])
 
   const confirmUnsavedChanges = React.useCallback(async (): Promise<boolean> => {
     if (!isDirtyRef.current || typeof window === 'undefined') return true
@@ -1201,7 +1210,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       window.history.pushState = originalPushState
       window.history.replaceState = originalReplaceState
     }
-  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded])
+  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded, setHasUnsavedChanges])
 
   const { widgets: primaryInjectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
     context: injectionContext,
@@ -1629,6 +1638,15 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       {extraActions}
     </>
   ) : undefined
+  const renderFooterActions = !hideFooterActions && !formReadOnly
+  const embeddedExtraActions = renderFooterActions ? undefined : extraActions
+  const embeddedHeaderActions = versionHistoryEnabled || headerInjectionAction || embeddedExtraActions ? (
+    <>
+      {versionHistoryEnabled ? versionHistoryAction : null}
+      {headerInjectionAction}
+      {embeddedExtraActions}
+    </>
+  ) : undefined
 
   // Auto-append custom fields for this entityId
   React.useEffect(() => {
@@ -2699,18 +2717,29 @@ export function CrudForm<TValues extends Record<string, unknown>>({
       ) {
         activeFieldChangeDispatchRef.current = null
       }
+      // Re-run the dispatcher only when an edit queued behind this dispatch is
+      // still waiting. Bumping unconditionally re-rendered the whole form a
+      // second time for every keystroke, even with no widget listening.
       if (
         fieldChangeDispatcherMountedRef.current &&
-        fieldChangeFormGenerationRef.current === dispatchToken.formGeneration
+        fieldChangeFormGenerationRef.current === dispatchToken.formGeneration &&
+        pendingFieldChangeEventsRef.current.length > 0
       ) {
         setFieldChangeDispatchVersion((version) => version + 1)
       }
     })
   }, [extendedInjectionEventsEnabled, fieldChangeDispatchVersion, triggerInjectionEvent, values])
 
-  const onBlurRequest = React.useCallback((fieldId: string) => {
-    void validateFieldOnBlur(fieldId)
+  // `validateFieldOnBlur` is rebuilt whenever the form values change. Passing
+  // that identity down would invalidate every memoized field control on each
+  // keystroke, so the fields get a stable callback that reads the latest one.
+  const validateFieldOnBlurRef = React.useRef(validateFieldOnBlur)
+  React.useLayoutEffect(() => {
+    validateFieldOnBlurRef.current = validateFieldOnBlur
   }, [validateFieldOnBlur])
+  const onBlurRequest = React.useCallback((fieldId: string) => {
+    void validateFieldOnBlurRef.current(fieldId)
+  }, [])
 
   const handleFieldsetSelectionChange = React.useCallback(
     (entityId: string, nextCode: string | null) => {
@@ -3899,8 +3928,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
             }}
           />
-        ) : headerExtraActions ? (
-          <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+        ) : embeddedHeaderActions ? (
+          <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
         ) : null}
         {contentHeader}
         <DataLoader
@@ -3938,7 +3967,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               {hasSecondaryColumn ? <div className={densityStackMd} data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -3952,7 +3981,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
                 }}
               />
-            )}
+            ) : null}
             </form>,
           )}
         </DataLoader>
@@ -3982,8 +4011,8 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             submit: formReadOnly ? undefined : { formId, pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
           }}
         />
-      ) : headerExtraActions ? (
-        <div className="flex justify-end gap-2 mb-2">{headerExtraActions}</div>
+      ) : embeddedHeaderActions ? (
+        <div className="flex justify-end gap-2 mb-2">{embeddedHeaderActions}</div>
       ) : null}
       {contentHeader}
       <DataLoader
@@ -4036,7 +4065,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               })}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
-            {hideFooterActions || formReadOnly ? null : (
+            {renderFooterActions ? (
               <FormFooter
                 embedded={embedded}
                 className={dialogFooterClass}
@@ -4050,7 +4079,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                   submit: { pending: pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon },
                 }}
               />
-            )}
+            ) : null}
           </form>
           </div>,
         )}

package/src/backend/__tests__/CrudForm.embeddedExtraActions.test.tsx

@@ -0,0 +1,114 @@
+/** @jest-environment jsdom */
+
+/**
+ * An embedded CrudForm is the body of a dialog: its footer is the only action
+ * row the user sees, and hosts put the dialog's Cancel button there by passing
+ * it through `extraActions`. Rendering that same node again in the embedded
+ * header strip produced two Cancel buttons in one dialog (issue #6750).
+ *
+ * The contract pinned here:
+ *
+ *   1. embedded + a rendered footer  -> `extraActions` appear once, in the footer,
+ *   2. embedded + no footer          -> they fall back to the header strip rather
+ *                                       than disappearing, and
+ *   3. not embedded                  -> the intentional FormHeader/FormFooter
+ *                                       mirroring is untouched.
+ */
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn().mockResolvedValue(true), ConfirmDialogElement: null }),
+}))
+jest.mock('../custom-fields/FieldDefinitionsManager', () => {
+  const React = require('react')
+  return { __esModule: true, FieldDefinitionsManager: React.forwardRef(() => <div />) }
+})
+jest.mock('../utils/customFieldForms', () => ({
+  __esModule: true,
+  buildFormFieldFromCustomFieldDef: jest.fn(),
+  buildFormFieldsFromCustomFields: jest.fn(() => []),
+  fetchCustomFieldFormStructure: jest.fn(),
+}))
+
+import * as React from 'react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { Button } from '../../primitives/button'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+const fields: CrudField[] = [{ id: 'name', label: 'Name', type: 'text' }]
+const groups: CrudFormGroup[] = [{ id: 'basic', title: 'Basic', column: 1, fields: ['name'] }]
+
+type FormOptions = {
+  embedded?: boolean
+  hideFooterActions?: boolean
+  readOnly?: boolean
+}
+
+function renderForm({ embedded = true, hideFooterActions, readOnly }: FormOptions = {}) {
+  const { container } = renderWithProviders(
+    <CrudForm
+      fields={fields}
+      groups={groups}
+      initialValues={{ name: 'x' }}
+      onSubmit={jest.fn()}
+      submitLabel="Apply"
+      embedded={embedded}
+      hideFooterActions={hideFooterActions}
+      readOnly={readOnly}
+      extraActions={(
+        <Button type="button" variant="ghost">Cancel</Button>
+      )}
+    />,
+  )
+  return container
+}
+
+function cancelButtons(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>('button')).filter(
+    (button) => button.textContent?.trim() === 'Cancel',
+  )
+}
+
+describe('CrudForm embedded extraActions', () => {
+  it('renders a single Cancel action, in the footer beside the submit button', () => {
+    const container = renderForm()
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+
+    const form = container.querySelector('form')
+    expect(form).not.toBeNull()
+    expect(form!.contains(cancels[0])).toBe(true)
+
+    const submit = container.querySelector<HTMLElement>('button[type="submit"]')
+    expect(submit?.textContent).toContain('Apply')
+    expect(cancels[0].parentElement).toBe(submit?.parentElement)
+  })
+
+  it('keeps the actions visible in the header strip when the footer is hidden', () => {
+    const container = renderForm({ hideFooterActions: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('keeps the actions visible in the header strip when the form is read-only', () => {
+    const container = renderForm({ readOnly: true })
+    const cancels = cancelButtons(container)
+
+    expect(cancels).toHaveLength(1)
+    expect(container.querySelector('form')?.contains(cancels[0])).toBe(false)
+  })
+
+  it('leaves the non-embedded header/footer mirroring in place', () => {
+    const container = renderForm({ embedded: false })
+
+    expect(cancelButtons(container)).toHaveLength(2)
+  })
+})

package/src/backend/__tests__/CrudForm.fieldChangeRenders.test.tsx

@@ -0,0 +1,127 @@
+/** @jest-environment jsdom */
+const triggerEventMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn(), ConfirmDialogElement: null }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+const mockControlRender = jest.fn()
+jest.mock('../../primitives/textarea', () => {
+  const actual = jest.requireActual('../../primitives/textarea')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Textarea: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('textarea')
+      return ReactActual.createElement(actual.Textarea, { ...props, ref })
+    }),
+  }
+})
+jest.mock('../../primitives/checkbox', () => {
+  const actual = jest.requireActual('../../primitives/checkbox')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    Checkbox: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockControlRender('checkbox')
+      return ReactActual.createElement(actual.Checkbox, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField, type CrudFormGroup } from '../CrudForm'
+
+describe('CrudForm field-change render cost', () => {
+  beforeEach(() => {
+    triggerEventMock.mockReset()
+    triggerEventMock.mockImplementation(async (_event: string, data: Record<string, unknown>) => ({ ok: true, data }))
+  })
+
+  it('renders the form once per steady-state edit when no widget answers the field-change event', async () => {
+    const groupRender = jest.fn()
+    const groups: CrudFormGroup[] = [{
+      id: 'details',
+      bare: true,
+      component: ({ values, setValue }) => {
+        groupRender()
+        return <input aria-label="Draft title" value={String(values.title ?? '')} onChange={(event) => setValue('title', event.target.value)} />
+      },
+    }]
+    renderWithProviders(
+      <CrudForm embedded fields={[]} groups={groups} initialValues={{ title: '' }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+    )
+    await act(async () => { await Promise.resolve() })
+    const rendersPerEdit: number[] = []
+    for (const value of ['a', 'ab', 'abc', 'abcd']) {
+      groupRender.mockClear()
+      triggerEventMock.mockClear()
+      await act(async () => {
+        fireEvent.change(screen.getByLabelText('Draft title'), { target: { value } })
+        await Promise.resolve()
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+      expect(screen.getByLabelText('Draft title')).toHaveValue(value)
+      expect(triggerEventMock.mock.calls.filter(([event]) => event === 'onFieldChange')).toHaveLength(1)
+      rendersPerEdit.push(groupRender.mock.calls.length)
+    }
+    expect(rendersPerEdit.slice(1)).toEqual([1, 1, 1])
+  })
+
+  it('leaves the other fields alone while one field is being typed in', async () => {
+    const fields: CrudField[] = [
+      { id: 'title', label: 'Title', type: 'text', required: true },
+      { id: 'notes', label: 'Notes', type: 'textarea' },
+      { id: 'flag', label: 'Flag', type: 'checkbox' },
+    ]
+    const rendered = renderWithProviders(
+      <CrudForm title="Form" fields={fields} initialValues={{ title: '', notes: 'keep', flag: false }} injectionSpotId="example:field-change" onSubmit={() => {}} />,
+      { dict: { 'ui.forms.actions.save': 'Save', 'ui.forms.errors.required': 'Required' } },
+    )
+    const input = rendered.container.querySelector('[data-crud-field-id="title"] input') as HTMLInputElement
+    const edit = async (value: string) => {
+      await act(async () => {
+        fireEvent.change(input, { target: { value } })
+        await Promise.resolve()
+      })
+      await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    }
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(mockControlRender).toHaveBeenCalledWith('textarea')
+    expect(mockControlRender).toHaveBeenCalledWith('checkbox')
+    await edit('a')
+    mockControlRender.mockClear()
+    await edit('ab')
+    await edit('abc')
+    expect(input).toHaveValue('abc')
+    expect(mockControlRender).not.toHaveBeenCalled()
+
+    // The stable blur callback must still validate against the latest values.
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(screen.queryByText('Required')).not.toBeInTheDocument()
+    await edit('')
+    await act(async () => { fireEvent.blur(input) })
+    await act(async () => { await new Promise((resolve) => setTimeout(resolve, 20)) })
+    expect(await screen.findByText('Required')).toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/useProgressSse.test.tsx

@@ -60,6 +60,93 @@ describe('useProgressSse', () => {
     mockAppEventHandlers.clear()
   })
 
+  // Prior behavior (fixed): idle pages polled /api/progress/active every 5s
+  // regardless of whether any job was active. A characterization run against
+  // that code (1 mount fetch + 12 polls over 60s = 13 calls) confirmed the
+  // defect before this fix landed. The fix degrades the idle cadence to 30s
+  // (a reconciliation backstop for a dropped cross-process notify) rather
+  // than stopping outright, since the Postgres LISTEN/NOTIFY bridge has no
+  // replay for a listener that was mid-reconnect when a job was created.
+  it('idle with no active jobs: degrades to the 30s reconciliation cadence', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([]))
+
+    renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    // 1 mount fetch + 2 polls at 30s over 60s = 3.
+    expect(mockApiCall).toHaveBeenCalledTimes(3)
+  })
+
+  it('while a job is active: keeps polling at the 5s cadence', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(1)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    // 1 mount fetch + 12 polls at 5s over 60s = 13.
+    expect(mockApiCall).toHaveBeenCalledTimes(13)
+  })
+
+  it('a progress.job.created event while idle triggers exactly one fetch', async () => {
+    mockApiCall.mockResolvedValue(mockProgressResponse([]))
+    renderHook(() => useProgressSse())
+
+    await waitFor(() => expect(mockApiCall).toHaveBeenCalledTimes(1))
+
+    act(() => {
+      for (const handler of mockAppEventHandlers.get('progress.job.created') ?? []) {
+        handler({})
+      }
+    })
+
+    await waitFor(() => expect(mockApiCall).toHaveBeenCalledTimes(2))
+  })
+
+  it('unmounting mid-interval stops further fetches', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    const { result, unmount } = renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    await waitFor(() => expect(result.current.activeJobs).toHaveLength(1))
+
+    const callsBeforeUnmount = mockApiCall.mock.calls.length
+    unmount()
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(callsBeforeUnmount)
+  })
+
   it('removes a job from activeJobs when an SSE update carries a terminal status', async () => {
     mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
     const { result } = renderHook(() => useProgressSse())
@@ -79,6 +166,41 @@ describe('useProgressSse', () => {
     }))
   })
 
+  it('stays paused in a backgrounded tab across a hasActiveJobs transition', async () => {
+    jest.useFakeTimers()
+    mockApiCall.mockResolvedValue(mockProgressResponse([runningJob]))
+
+    const { result } = renderHook(() => useProgressSse())
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+    await waitFor(() => expect(result.current.activeJobs).toHaveLength(1))
+
+    Object.defineProperty(document, 'hidden', { value: true, configurable: true })
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'))
+    })
+
+    const callsWhileHidden = mockApiCall.mock.calls.length
+
+    act(() => {
+      for (const handler of mockAppEventHandlers.get('progress.job.updated') ?? []) {
+        handler({ payload: { ...completedJob, jobId: completedJob.id } })
+      }
+    })
+    expect(result.current.activeJobs).toHaveLength(0)
+
+    await act(async () => {
+      jest.advanceTimersByTime(60000)
+      await Promise.resolve()
+    })
+
+    expect(mockApiCall).toHaveBeenCalledTimes(callsWhileHidden)
+
+    Object.defineProperty(document, 'hidden', { value: false, configurable: true })
+  })
+
   it('periodically reconciles active jobs in SSE mode when completion events are missed', async () => {
     jest.useFakeTimers()
     mockApiCall

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -54,6 +54,7 @@ export function ConfirmDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
   const confirmButtonRef = React.useRef<HTMLButtonElement>(null);
+  const restoreAriaHiddenRef = React.useRef(false);
   const [portalTarget, setPortalTarget] = React.useState<HTMLElement | null>(null);
   // Unique IDs so multiple ConfirmDialog instances on the same page don't
   // collide and make `aria-labelledby` resolve to the wrong dialog's title.
@@ -111,10 +112,25 @@ export function ConfirmDialog({
           }
         }, 0);
       }
+      // A modal opened underneath (e.g. a Radix Dialog) marks every sibling in
+      // <body> `aria-hidden`, including this portalled element. Shown on top
+      // of that modal it must stay reachable for assistive technology.
+      if (dialog.getAttribute("aria-hidden") === "true") {
+        dialog.removeAttribute("aria-hidden");
+        restoreAriaHiddenRef.current = true;
+      }
     } else {
       if (dialog.open) {
         dialog.close();
       }
+      if (restoreAriaHiddenRef.current) {
+        restoreAriaHiddenRef.current = false;
+        // Hand the attribute back only while the modal that hid us is still
+        // open; its own cleanup has otherwise already removed the marker.
+        if (dialog.hasAttribute("data-aria-hidden")) {
+          dialog.setAttribute("aria-hidden", "true");
+        }
+      }
     }
   }, [open, resolvedCancelText, portalTarget]);
 

package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx

@@ -61,6 +61,35 @@ describe('ConfirmDialog', () => {
     expect(dialog.parentElement).toBe(document.body)
   })
 
+  it('stays exposed to assistive technology when a modal underneath hid its siblings', () => {
+    const renderDialog = (open: boolean) => (
+      <ConfirmDialog
+        open={open}
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Discard unsaved changes?"
+        confirmText="Discard"
+        cancelText="Cancel"
+      />
+    )
+    const { rerender } = renderWithProviders(renderDialog(false))
+    const dialog = document.body.querySelector('dialog')!
+    dialog.setAttribute('aria-hidden', 'true')
+    dialog.setAttribute('data-aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+    expect(screen.getByRole('alertdialog')).toBe(dialog)
+
+    rerender(renderDialog(false))
+    expect(dialog).toHaveAttribute('aria-hidden', 'true')
+
+    rerender(renderDialog(true))
+    dialog.removeAttribute('data-aria-hidden')
+    rerender(renderDialog(false))
+    expect(dialog).not.toHaveAttribute('aria-hidden')
+  })
+
   it('renders the destructive confirmation as the solid variant', () => {
     renderWithProviders(
       <ConfirmDialog

package/src/backend/inputs/PhoneNumberField.tsx

@@ -551,6 +551,22 @@ export function PhoneNumberField({
     () => buildPhoneCountryOptions(countriesProp, t, locale),
     [countriesProp, t, locale],
   )
+  const countryItems = React.useMemo(
+    () => countryOptions.map(({ country: optionCountry, label }) => (
+      <SelectItem
+        key={`${optionCountry.iso2}-${optionCountry.dialCode}`}
+        value={optionCountry.iso2}
+        textValue={label}
+      >
+        <SelectItemLeading>
+          <span className="text-base leading-none">{optionCountry.flag}</span>
+        </SelectItemLeading>
+        <span className="flex-1 truncate">{label}</span>
+        <span className="ml-2 text-xs text-muted-foreground tabular-nums">{optionCountry.dialCode}</span>
+      </SelectItem>
+    )),
+    [countryOptions],
+  )
   const fallbackCountry = React.useMemo(
     () => (defaultCountryIso2 && findCountryByIso(defaultCountryIso2)) || DEFAULT_COUNTRY,
     [defaultCountryIso2],
@@ -723,17 +739,7 @@ export function PhoneNumberField({
             <span className={cn('text-base leading-none', size && 'inline-flex size-5 shrink-0 items-center justify-center text-xl [&_img]:size-full')} aria-hidden="true">{renderCountryIcon ? renderCountryIcon(country) : country.flag}</span>
             <span className={cn("text-sm text-foreground tabular-nums", disabled && "text-text-disabled")}>{country.dialCode}</span>
           </SelectTrigger>
-          <SelectContent align="start">
-            {countryOptions.map(({ country: c, label }) => (
-              <SelectItem key={`${c.iso2}-${c.dialCode}`} value={c.iso2} textValue={label}>
-                <SelectItemLeading>
-                  <span className="text-base leading-none">{c.flag}</span>
-                </SelectItemLeading>
-                <span className="flex-1 truncate">{label}</span>
-                <span className="ml-2 text-xs text-muted-foreground tabular-nums">{c.dialCode}</span>
-              </SelectItem>
-            ))}
-          </SelectContent>
+          <SelectContent align="start">{countryItems}</SelectContent>
         </Select>
         <div aria-hidden="true" className="w-px self-stretch bg-input" />
         <input

package/src/backend/inputs/__tests__/PhoneNumberField.renders.test.tsx

@@ -0,0 +1,35 @@
+/** @jest-environment jsdom */
+
+const mockTranslate = (_key: string, fallback: string) => fallback
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => mockTranslate,
+  useOptionalLocale: () => undefined,
+}))
+
+const mockItemRender = jest.fn()
+jest.mock('../../../primitives/select', () => {
+  const actual = jest.requireActual('../../../primitives/select')
+  const ReactActual = jest.requireActual('react')
+  return {
+    ...actual,
+    SelectItem: ReactActual.forwardRef((props: Record<string, unknown>, ref: unknown) => {
+      mockItemRender()
+      return ReactActual.createElement(actual.SelectItem, { ...props, ref })
+    }),
+  }
+})
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
+
+describe('PhoneNumberField render cost', () => {
+  it('does not re-render its country options when the host form re-renders it', () => {
+    const view = render(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    expect(mockItemRender.mock.calls.length).toBeGreaterThanOrEqual(PHONE_COUNTRIES.length)
+    mockItemRender.mockClear()
+    view.rerender(<PhoneNumberField value="+48 600 100 200" onValueChange={() => {}} />)
+    view.rerender(<PhoneNumberField value="+48 600 100 201" onValueChange={() => {}} />)
+    expect(mockItemRender).not.toHaveBeenCalled()
+  })
+})