@open-mercato/ui 0.6.1-develop.3291.1.6fad645fd0 → 0.6.1

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

@@ -233,6 +233,82 @@ describe('CustomDataSection relation display', () => {
     expect(notesContent.className).toContain('text-sm')
   })
 
+  it('renders select values from bare custom-field response keys', async () => {
+    const fields: CrudField[] = [
+      {
+        id: 'cf_buying_role',
+        label: 'Buying role',
+        type: 'select',
+        options: [
+          { value: 'economic_buyer', label: 'Economic buyer' },
+          { value: 'champion', label: 'Champion' },
+          { value: 'technical_evaluator', label: 'Technical evaluator' },
+          { value: 'influencer', label: 'Influencer' },
+        ],
+      },
+      {
+        id: 'cf_relationship_health',
+        label: 'Relationship health',
+        type: 'select',
+        options: [
+          { value: 'healthy', label: 'Healthy' },
+          { value: 'monitor', label: 'Monitor' },
+          { value: 'at_risk', label: 'At risk' },
+        ],
+      },
+      {
+        id: 'cf_renewal_quarter',
+        label: 'Renewal quarter',
+        type: 'select',
+        options: [
+          { value: 'Q1', label: 'Q1' },
+          { value: 'Q2', label: 'Q2' },
+          { value: 'Q3', label: 'Q3' },
+          { value: 'Q4', label: 'Q4' },
+        ],
+      },
+    ]
+    const definitions: CustomFieldDefDto[] = [
+      {
+        key: 'buying_role',
+        kind: 'select',
+        label: 'Buying role',
+      },
+      {
+        key: 'relationship_health',
+        kind: 'select',
+        label: 'Relationship health',
+      },
+      {
+        key: 'renewal_quarter',
+        kind: 'select',
+        label: 'Renewal quarter',
+      },
+    ]
+
+    renderWithProviders(
+      <CustomDataSection
+        entityIds={['customers:customer_person_profile', 'customers:customer_company_profile']}
+        values={{ buying_role: 'champion', relationship_health: 'monitor', renewal_quarter: 'Q4' }}
+        onSubmit={async () => {}}
+        title="Custom fields"
+        loadFields={async () => ({ fields, definitions })}
+        labels={{
+          loading: 'Loading custom data\u2026',
+          emptyValue: 'No value',
+          noFields: 'No fields',
+          saveShortcut: 'Save now',
+          edit: 'Edit',
+          cancel: 'Cancel',
+        }}
+      />,
+    )
+
+    expect(await screen.findByText('Champion')).toBeInTheDocument()
+    expect(await screen.findByText('Monitor')).toBeInTheDocument()
+    expect(screen.getByText('Q4')).toBeInTheDocument()
+  })
+
   it('resolves customer_person_profile with entity_id route context', async () => {
     const entityId = 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee'
     const profileId = 'pppppppp-1111-2222-3333-444444444444'

package/src/backend/__tests__/DataTable.render.test.tsx

@@ -45,4 +45,40 @@ describe('DataTable SSR render', () => {
       queryClient.clear()
     }
   })
+
+  it('keeps rows-per-page controls on one line', () => {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'name', header: 'Name' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      const html = renderToString(
+        React.createElement(
+          QueryClientProvider as any,
+          { client: queryClient },
+          React.createElement(
+            I18nProvider as any,
+            { locale: 'en', dict: {} },
+            React.createElement(DataTable as any, {
+              columns,
+              data: [{ id: '1', name: 'Ada' }],
+              pagination: {
+                page: 1,
+                pageSize: 20,
+                total: 1,
+                totalPages: 1,
+                onPageChange: () => {},
+                onPageSizeChange: () => {},
+                pageSizeOptions: [10, 20, 50],
+              },
+            }),
+          ),
+        )
+      )
+      expect(html).toContain('whitespace-nowrap')
+      expect(html).toContain('per page')
+    } finally {
+      queryClient.clear()
+    }
+  })
 })

package/src/backend/__tests__/component-replacement.test.tsx

@@ -1,12 +1,14 @@
 /** @jest-environment jsdom */
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
+import { renderToString } from 'react-dom/server'
 import { z } from 'zod'
 import {
   registerComponent,
   registerComponentOverrides,
   ComponentReplacementHandles,
 } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider } from '../injection/ComponentOverrideProvider'
 import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 import { DetailFieldsSection } from '../detail/DetailFieldsSection'
 
@@ -65,6 +67,48 @@ describe('component replacement', () => {
     expect(screen.getByText('wrapped rendered')).toBeInTheDocument()
   })
 
+  it('applies provider overrides during the first render for hydration parity', () => {
+    const componentId = 'test.provider.first.render'
+    const Base = ({ value }: { value: string }) => <span>{value}</span>
+
+    registerComponent({
+      id: componentId,
+      component: Base,
+      metadata: { module: 'test' },
+    })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>(componentId)
+      return <Resolved value="first render" />
+    }
+
+    const html = renderToString(
+      <ComponentOverrideProvider
+        overrides={[
+          {
+            target: { componentId },
+            priority: 10,
+            metadata: { module: 'test' },
+            wrapper: (Original) => {
+              const Wrapped = (props: { value: string }) => (
+                <div data-testid="provider-wrapped">
+                  <Original {...props} />
+                </div>
+              )
+              Wrapped.displayName = 'ProviderWrapped'
+              return Wrapped
+            },
+          },
+        ]}
+      >
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(html).toContain('data-testid="provider-wrapped"')
+    expect(html).toContain('first render')
+  })
+
   it('ignores invalid override entries when resolving registered components', () => {
     const componentId = 'test.invalid.override'
     const Base = ({ value }: { value: string }) => <span>{value}</span>

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

@@ -1,5 +1,6 @@
 "use client";
 import * as React from "react";
+import { createPortal } from "react-dom";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { Button } from "@open-mercato/ui/primitives/button";
 import { IconButton } from "../../primitives/icon-button";
@@ -53,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 [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.
   const reactId = React.useId();
@@ -88,8 +90,12 @@ export function ConfirmDialog({
     handleCancelCallback();
   }, [setOpen, handleCancelCallback]);
 
+  React.useLayoutEffect(() => {
+    setPortalTarget(document.body);
+  }, []);
+
   // Handle dialog open/close with native showModal/close
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
 
@@ -110,7 +116,7 @@ export function ConfirmDialog({
         dialog.close();
       }
     }
-  }, [open, resolvedCancelText]);
+  }, [open, resolvedCancelText, portalTarget]);
 
   // Handle native cancel event (Escape key)
   React.useEffect(() => {
@@ -172,109 +178,113 @@ export function ConfirmDialog({
     }
   };
 
-  return (
-    <>
-      {trigger && (
-        <div onClick={handleTriggerClick} className="inline-block" role="presentation">
-          {trigger}
-        </div>
+  const dialogElement = (
+    <dialog
+      ref={dialogRef}
+      role="alertdialog"
+      aria-labelledby={titleId}
+      aria-describedby={text ? descriptionId : undefined}
+      onClick={handleBackdropClick}
+      className={cn(
+        // Reset dialog defaults
+        "m-0 p-0 max-w-none bg-transparent border-none pointer-events-auto",
+        // Backdrop styling
+        "backdrop:bg-black/50 backdrop:backdrop-blur-sm backdrop:transition-opacity",
+        // Mobile: bottom sheet
+        "fixed inset-x-0 bottom-0 top-auto w-full",
+        // Desktop: centered
+        "sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
+        // Animation with reduced motion support
+        "motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4",
+        "sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95",
+        // Duration
+        "motion-safe:open:duration-300"
       )}
-
-      <dialog
-        ref={dialogRef}
-        role="alertdialog"
-        aria-labelledby={titleId}
-        aria-describedby={text ? descriptionId : undefined}
-        onClick={handleBackdropClick}
+    >
+      <div
+        role="document"
         className={cn(
-          // Reset dialog defaults
-          "m-0 p-0 max-w-none bg-transparent border-none pointer-events-auto",
-          // Backdrop styling
-          "backdrop:bg-black/50 backdrop:backdrop-blur-sm backdrop:transition-opacity",
-          // Mobile: bottom sheet
-          "fixed inset-x-0 bottom-0 top-auto w-full",
-          // Desktop: centered
-          "sm:inset-auto sm:mx-auto sm:my-auto sm:max-w-md sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2",
-          // Animation with reduced motion support
-          "motion-safe:open:animate-in motion-safe:open:fade-in-0 motion-safe:open:slide-in-from-bottom-4",
-          "sm:motion-safe:open:slide-in-from-bottom-0 sm:motion-safe:open:zoom-in-95",
-          // Duration
-          "motion-safe:open:duration-300"
+          // Panel container
+          "flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg",
+          "sm:rounded-xl sm:border",
+          // Relative positioning for close button
+          "relative"
         )}
       >
-        <div
-          role="document"
+        {/* Close button */}
+        <IconButton
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={handleCancel}
+          disabled={loading}
+          aria-label={closeAriaLabel}
+          className="absolute right-4 top-4 opacity-70 hover:opacity-100"
+        >
+          <X className="h-4 w-4" />
+        </IconButton>
+
+        {/* Title */}
+        <h2
+          id={titleId}
           className={cn(
-            // Panel container
-            "flex flex-col gap-4 rounded-t-2xl border-t bg-card p-6 text-foreground shadow-lg",
-            "sm:rounded-xl sm:border",
-            // Relative positioning for close button
-            "relative"
+            "text-sm font-medium leading-snug tracking-tight pr-6",
+            // Mobile: centered, Desktop: left-aligned
+            "text-center sm:text-left"
           )}
         >
-          {/* Close button */}
-          <IconButton
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={handleCancel}
-            disabled={loading}
-            aria-label={closeAriaLabel}
-            className="absolute right-4 top-4 opacity-70 hover:opacity-100"
-          >
-            <X className="h-4 w-4" />
-          </IconButton>
+          {resolvedTitle}
+        </h2>
 
-          {/* Title */}
-          <h2
-            id={titleId}
-            className={cn(
-              "text-sm font-medium leading-snug tracking-tight pr-6",
-              // Mobile: centered, Desktop: left-aligned
-              "text-center sm:text-left"
-            )}
+        {/* Description (optional) */}
+        {text && (
+          <p
+            id={descriptionId}
+            className="text-sm font-medium leading-snug text-muted-foreground"
           >
-            {resolvedTitle}
-          </h2>
+            {text}
+          </p>
+        )}
 
-          {/* Description (optional) */}
-          {text && (
-            <p
-              id={descriptionId}
-              className="text-sm font-medium leading-snug text-muted-foreground"
+        {/* Actions */}
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          {resolvedCancelText !== false && (
+            <Button
+              ref={cancelButtonRef}
+              variant="outline"
+              onClick={handleCancel}
+              disabled={loading}
+              className="w-full sm:w-auto"
+            >
+              {resolvedCancelText}
+            </Button>
+          )}
+          {resolvedConfirmText !== false && (
+            <Button
+              ref={confirmButtonRef}
+              variant={variant === "destructive" ? "destructive" : "default"}
+              onClick={handleConfirm}
+              disabled={loading}
+              className="w-full sm:w-auto"
             >
-              {text}
-            </p>
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {resolvedConfirmText}
+            </Button>
           )}
+        </div>
+      </div>
+    </dialog>
+  );
 
-          {/* Actions */}
-          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-            {resolvedCancelText !== false && (
-              <Button
-                ref={cancelButtonRef}
-                variant="outline"
-                onClick={handleCancel}
-                disabled={loading}
-                className="w-full sm:w-auto"
-              >
-                {resolvedCancelText}
-              </Button>
-            )}
-            {resolvedConfirmText !== false && (
-              <Button
-                ref={confirmButtonRef}
-                variant={variant === "destructive" ? "destructive" : "default"}
-                onClick={handleConfirm}
-                disabled={loading}
-                className="w-full sm:w-auto"
-              >
-                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {resolvedConfirmText}
-              </Button>
-            )}
-          </div>
+  return (
+    <>
+      {trigger && (
+        <div onClick={handleTriggerClick} className="inline-block" role="presentation">
+          {trigger}
         </div>
-      </dialog>
+      )}
+
+      {portalTarget ? createPortal(dialogElement, portalTarget) : null}
     </>
   );
 }

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

@@ -41,4 +41,23 @@ describe('ConfirmDialog', () => {
 
     expect(screen.getByRole('alertdialog').className).toEqual(expect.stringContaining('pointer-events-auto'))
   })
+
+  it('portals the native dialog out of hidden ancestors', () => {
+    const { container } = renderWithProviders(
+      <div hidden>
+        <ConfirmDialog
+          open
+          onOpenChange={() => undefined}
+          onConfirm={() => undefined}
+          title="Discard unsaved changes?"
+          confirmText="Discard"
+          cancelText="Cancel"
+        />
+      </div>,
+    )
+
+    const dialog = screen.getByRole('alertdialog')
+    expect(container.contains(dialog)).toBe(false)
+    expect(dialog.parentElement).toBe(document.body)
+  })
 })

package/src/backend/detail/CustomDataSection.tsx

@@ -75,6 +75,20 @@ function extractDictionaryValue(entry: unknown): string | null {
   return null
 }
 
+function readCustomDataFieldValue(values: Record<string, unknown> | undefined, fieldId: string): unknown {
+  if (!values || !fieldId) return undefined
+  const candidates = fieldId.startsWith('cf_')
+    ? [fieldId, `cf:${fieldId.slice(3)}`, fieldId.slice(3)]
+    : [fieldId, `cf_${fieldId}`, `cf:${fieldId}`]
+
+  for (const candidate of candidates) {
+    if (Object.prototype.hasOwnProperty.call(values, candidate)) {
+      return values[candidate]
+    }
+  }
+  return undefined
+}
+
 export type CustomDataLabels = {
   loading: string
   emptyValue: string
@@ -312,6 +326,15 @@ function CustomDataSectionImpl({
     () => customFieldFormsQuery.data?.definitions ?? [],
     [customFieldFormsQuery.data],
   )
+  const formInitialValues = React.useMemo(() => {
+    const next: Record<string, unknown> = { ...(values ?? {}) }
+    fields.forEach((field) => {
+      if (!field.id || Object.prototype.hasOwnProperty.call(next, field.id)) return
+      const resolved = readCustomDataFieldValue(values, field.id)
+      if (resolved !== undefined) next[field.id] = resolved
+    })
+    return next
+  }, [fields, values])
   const [dictionaryLoading, setDictionaryLoading] = React.useState(false)
   const [relationLoading, setRelationLoading] = React.useState(false)
   const loading = customFieldFormsQuery.isLoading || dictionaryLoading || relationLoading
@@ -473,7 +496,7 @@ function CustomDataSectionImpl({
         const normalizedKey = field.id.startsWith('cf_') ? field.id.slice(3) : field.id
         const definition = definitionsByKey.get(normalizedKey.toLowerCase())
         if (!definition || definition.kind !== 'relation') return null
-        const relationIds = collectRelationValueIds(values?.[field.id])
+        const relationIds = collectRelationValueIds(readCustomDataFieldValue(values, field.id))
         if (!relationIds.length) return null
         return { field, definition, relationIds }
       })
@@ -621,7 +644,7 @@ function CustomDataSectionImpl({
               entityId={primaryEntityId}
               entityIds={resolvedEntityIds}
               fields={fields}
-              initialValues={values}
+              initialValues={formInitialValues}
               onSubmit={handleSubmit}
               submitLabel={labels.saveShortcut}
               isLoading={loading}
@@ -659,7 +682,7 @@ function CustomDataSectionImpl({
                   <div className="text-sm break-words">
                     {formatFieldValue(
                       field,
-                      values?.[field.id],
+                      readCustomDataFieldValue(values, field.id),
                       labels.emptyValue,
                       dictionaryMapsByField[field.id],
                       markdownPlugins,

package/src/backend/filters/AdvancedFilterBuilder.tsx

@@ -290,7 +290,7 @@ function GroupView({
     : 'space-y-3 rounded-lg border border-border bg-muted/30 p-3'
 
   // Toolbar-first layout (Kendo React Filter pattern): one [And]/[Or] toggle per group
-  // is the only combinator UI. Mixing AND with OR requires `+ Add subgroup`. Matches
+  // is the only combinator UI. Mixing AND with OR requires `Add subgroup`. Matches
   // `CompositeFilterDescriptor` semantics (one logic per group).
   return (
     <div className={containerClass}>
@@ -841,8 +841,8 @@ function toneDotClass(tone: NonNullable<FilterFieldDef['options']>[number]['tone
   }
 }
 
-// Single Kendo-style toolbar per group: combinator toggle, `+ Add condition`,
-// `+ Add subgroup` / `+ Add group`, plus a trailing delete for non-root groups.
+// Single Kendo-style toolbar per group: combinator toggle, `Add condition`,
+// `Add subgroup` / `Add group`, plus a trailing delete for non-root groups.
 function GroupToolbar({
   group, level, tree, dispatch, defaultField, fields, isRoot, t,
 }: {
@@ -886,8 +886,8 @@ function GroupToolbar({
     : undefined
 
   const addGroupLabel = level === 1
-    ? t('ui.advancedFilter.addGroup', '+ Add group')
-    : t('ui.advancedFilter.addSubgroup', '+ Add subgroup')
+    ? t('ui.advancedFilter.addGroup', 'Add group')
+    : t('ui.advancedFilter.addSubgroup', 'Add subgroup')
 
   // `text-brand-violet` overrides Button's default disabled token, so we have to
   // re-state muted disabled colors here — otherwise disabled CTAs still look clickable.
@@ -912,7 +912,7 @@ function GroupToolbar({
           className={ctaClass}
         >
           <Plus className="size-4" />
-          {t('ui.advancedFilter.addCondition', '+ Add condition')}
+          {t('ui.advancedFilter.addCondition', 'Add condition')}
         </Button>
         <FilterFieldPicker
           fields={fields}

package/src/backend/injection/ComponentOverrideProvider.tsx

@@ -23,8 +23,9 @@ export function ComponentOverrideProvider({
 }) {
   const [userFeatures, setUserFeatures] = React.useState<readonly string[]>([])
 
+  registerComponentOverrides(overrides)
+
   React.useEffect(() => {
-    registerComponentOverrides(overrides)
     return () => {
       registerComponentOverrides([])
     }

package/src/backend/inputs/ComboboxInput.tsx

@@ -50,6 +50,16 @@ function normalizeOptions(input?: Array<string | ComboboxOption>): ComboboxOptio
     .filter((option): option is ComboboxOption => !!option)
 }
 
+function areOptionsEqual(a: ComboboxOption[], b: ComboboxOption[]): boolean {
+  if (a.length !== b.length) return false
+  return a.every((option, index) => {
+    const next = b[index]
+    return option.value === next.value
+      && option.label === next.label
+      && (option.description ?? null) === (next.description ?? null)
+  })
+}
+
 export function ComboboxInput({
   value,
   onChange,
@@ -75,6 +85,7 @@ export function ComboboxInput({
   const [selectedIndex, setSelectedIndex] = React.useState(-1)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
+  const eagerFallbackLoadedValueRef = React.useRef<string | null>(null)
 
   const staticOptions = React.useMemo(
     () => normalizeOptions([...(seedOptions ?? []), ...(suggestions ?? [])]),
@@ -91,6 +102,14 @@ export function ComboboxInput({
     return set
   }, [staticOptions, asyncOptions, resolvedOptions])
 
+  const coveredOptionValues = React.useMemo(() => {
+    const set = new Set<string>()
+    for (const option of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
+      set.add(option.value)
+    }
+    return set
+  }, [staticOptions, asyncOptions, resolvedOptions])
+
   const optionMap = React.useMemo(() => {
     const map = new Map<string, ComboboxOption>()
     const register = (option: ComboboxOption) => {
@@ -106,16 +125,15 @@ export function ComboboxInput({
     if (value) {
       const existing = map.get(value)
       if (!existing) {
-        const sync = typeof resolveLabel === 'function' ? resolveLabel(value) : undefined
         map.set(value, {
           value,
-          label: typeof sync === 'string' && sync ? sync : value,
+          label: value,
           description: resolveDescription?.(value) ?? null,
         })
       }
     }
     return map
-  }, [asyncOptions, resolvedOptions, resolveDescription, resolveLabel, staticOptions, value])
+  }, [asyncOptions, resolvedOptions, resolveDescription, staticOptions, value])
 
   const availableOptions = React.useMemo(() => {
     return Array.from(optionMap.values())
@@ -140,7 +158,8 @@ export function ComboboxInput({
       try {
         const items = await loadSuggestions(query)
         if (!cancelled) {
-          setAsyncOptions(normalizeOptions(items))
+          const normalized = normalizeOptions(items)
+          setAsyncOptions((prev) => areOptionsEqual(prev, normalized) ? prev : normalized)
         }
       } finally {
         if (!cancelled) setLoading(false)
@@ -157,7 +176,6 @@ export function ComboboxInput({
   const eagerResolveLabel = typeof resolveLabel === 'function' ? resolveLabel : undefined
   React.useEffect(() => {
     if (!value || disabled) return
-    if (knownLabelValues.has(value)) return
     let cancelled = false
     const apply = (label?: string | null, description?: string | null) => {
       const clean = typeof label === 'string' ? label.trim() : ''
@@ -168,12 +186,16 @@ export function ComboboxInput({
       })
     }
     if (eagerResolveLabel) {
+      if (knownLabelValues.has(value)) return
       Promise.resolve()
         .then(() => eagerResolveLabel(value))
         .then((label) => apply(label, resolveDescription?.(value)))
         .catch(() => {})
       return () => { cancelled = true }
     }
+    if (coveredOptionValues.has(value)) return
+    if (eagerFallbackLoadedValueRef.current === value) return
+    eagerFallbackLoadedValueRef.current = value
     // Fallback: pull the first page of async suggestions so a remount that lost
     // its option cache can still recover the label without user interaction.
     if (loadSuggestions) {
@@ -183,14 +205,14 @@ export function ComboboxInput({
         .then((items) => {
           if (cancelled) return
           const normalized = normalizeOptions(items)
-          setAsyncOptions(normalized)
+          setAsyncOptions((prev) => areOptionsEqual(prev, normalized) ? prev : normalized)
         })
         .catch(() => {})
         .finally(() => { if (!cancelled) setLoading(false) })
     }
     return () => { cancelled = true }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, disabled, knownLabelValues, eagerResolveLabel, loadSuggestions])
+  }, [value, disabled, knownLabelValues, coveredOptionValues, eagerResolveLabel, loadSuggestions])
 
   // Sync input with value when value changes externally and input is not focused.
   React.useEffect(() => {