@open-mercato/ui 0.7.0 → 0.7.1-develop.7102.1.b41f7e3e51

package/src/backend/detail/NotesSection.tsx

@@ -207,7 +207,20 @@ export type NotesSectionProps<C = unknown> = {
   iconSuggestions?: IconOption[]
   readMarkdownPreference?: () => boolean | null
   writeMarkdownPreference?: (value: boolean) => void
+  /** Force the plain textarea and hide the markdown toggle. Wins over `forceMarkdown`. */
   disableMarkdown?: boolean
+  /**
+   * Keep the rich markdown editor active for every note and hide the markdown toggle,
+   * so the editor shape cannot be switched. Ignored when `disableMarkdown` is set.
+   */
+  forceMarkdown?: boolean
+  /**
+   * Hide the markdown toggle without changing which editor renders — the seeded
+   * `readMarkdownPreference` value stays in effect. Implied by `forceMarkdown`.
+   */
+  hideMarkdownToggle?: boolean
+  /** Hide the appearance (icon/color) affordances: the palette buttons and the appearance dialog. */
+  disableAppearance?: boolean
 }
 
 export function sanitizeHexColor(value: string | null): string | null {
@@ -313,6 +326,9 @@ function NotesSectionImpl<C = unknown>({
   readMarkdownPreference,
   writeMarkdownPreference,
   disableMarkdown,
+  forceMarkdown,
+  hideMarkdownToggle,
+  disableAppearance,
 }: NotesSectionProps<C>) {
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const t = React.useMemo<Translator>(() => translator ?? ((key, fallback) => fallback ?? key), [translator])
@@ -448,13 +464,16 @@ function NotesSectionImpl<C = unknown>({
   const [draftIcon, setDraftIcon] = React.useState<string | null>(null)
   const [draftColor, setDraftColor] = React.useState<string | null>(null)
   const [isMarkdownEnabled, setIsMarkdownEnabled] = React.useState(false)
+  const isMarkdownActive = !disableMarkdown && (Boolean(forceMarkdown) || isMarkdownEnabled)
+  const showMarkdownToggle = !disableMarkdown && !forceMarkdown && !hideMarkdownToggle
+  const showAppearanceControls = !disableAppearance
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
   const formRef = React.useRef<HTMLFormElement | null>(null)
   const focusComposer = React.useCallback(() => {
     if (!hasEntity) return
     setComposerOpen(true)
     window.requestAnimationFrame(() => {
-      if (isMarkdownEnabled) {
+      if (isMarkdownActive) {
         const markdownTextarea = formRef.current?.querySelector('textarea')
         if (markdownTextarea instanceof HTMLTextAreaElement) {
           markdownTextarea.focus()
@@ -467,7 +486,7 @@ function NotesSectionImpl<C = unknown>({
       element.focus()
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })
     })
-  }, [formRef, hasEntity, isMarkdownEnabled])
+  }, [formRef, hasEntity, isMarkdownActive])
   const [appearanceDialogState, setAppearanceDialogState] = React.useState<
     | { mode: 'create'; icon: string | null; color: string | null }
     | { mode: 'edit'; noteId: string; icon: string | null; color: string | null }
@@ -584,7 +603,7 @@ function NotesSectionImpl<C = unknown>({
 
   React.useEffect(() => {
     adjustTextareaSize(textareaRef.current)
-  }, [adjustTextareaSize, draftBody, isMarkdownEnabled, composerOpen])
+  }, [adjustTextareaSize, draftBody, isMarkdownActive, composerOpen])
 
   React.useEffect(() => {
     const preference = readMarkdownPreference ? readMarkdownPreference() : null
@@ -990,31 +1009,33 @@ function NotesSectionImpl<C = unknown>({
             <div className="flex flex-wrap items-center justify-between gap-2">
               <h3 className="text-sm font-medium">{label('addLabel')}</h3>
               <div className="flex flex-wrap items-center gap-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => {
-                    setAppearanceDialogError(null)
-                    setAppearanceDialogState({ mode: 'create', icon: draftIcon, color: draftColor })
-                  }}
-                  disabled={isSubmitting || isLoading || !hasEntity}
-                >
-                  <span className="sr-only">{label('appearance.toggleOpen', 'Customize appearance')}</span>
-                  <Palette className="h-4 w-4" />
-                </Button>
-                {disableMarkdown ? null : (
+                {showAppearanceControls ? (
                   <Button
                     type="button"
-                    variant={isMarkdownEnabled ? 'secondary' : 'ghost'}
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => {
+                      setAppearanceDialogError(null)
+                      setAppearanceDialogState({ mode: 'create', icon: draftIcon, color: draftColor })
+                    }}
+                    disabled={isSubmitting || isLoading || !hasEntity}
+                  >
+                    <span className="sr-only">{label('appearance.toggleOpen', 'Customize appearance')}</span>
+                    <Palette className="h-4 w-4" />
+                  </Button>
+                ) : null}
+                {showMarkdownToggle ? (
+                  <Button
+                    type="button"
+                    variant={isMarkdownActive ? 'secondary' : 'ghost'}
                     size="icon"
                     onClick={handleMarkdownToggle}
-                    aria-pressed={isMarkdownEnabled}
+                    aria-pressed={isMarkdownActive}
                     disabled={isSubmitting || isLoading}
                   >
                     <FileCode className="h-4 w-4" />
                   </Button>
-                )}
+                ) : null}
                 <Button
                   type="button"
                   size="sm"
@@ -1090,7 +1111,7 @@ function NotesSectionImpl<C = unknown>({
             <SwitchableMarkdownInput
               value={draftBody}
               onChange={setDraftBody}
-              isMarkdownEnabled={isMarkdownEnabled}
+              isMarkdownEnabled={isMarkdownActive}
               disableMarkdown={disableMarkdown}
               rows={1}
               placeholder={label('placeholder')}
@@ -1214,24 +1235,26 @@ function NotesSectionImpl<C = unknown>({
                     >
                       <Pencil className="h-4 w-4" />
                     </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      onClick={(event) => {
-                        event.stopPropagation()
-                        setAppearanceDialogError(null)
-                        setAppearanceDialogState({
-                          mode: 'edit',
-                          noteId: note.id,
-                          icon: note.appearanceIcon ?? null,
-                          color: note.appearanceColor ?? null,
-                        })
-                      }}
-                      disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
-                    >
-                      {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
-                    </Button>
+                    {showAppearanceControls ? (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          setAppearanceDialogError(null)
+                          setAppearanceDialogState({
+                            mode: 'edit',
+                            noteId: note.id,
+                            icon: note.appearanceIcon ?? null,
+                            color: note.appearanceColor ?? null,
+                          })
+                        }}
+                        disabled={appearanceDialogSaving && editingAppearanceNoteId === note.id}
+                      >
+                        {isAppearanceSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Palette className="h-4 w-4" />}
+                      </Button>
+                    ) : null}
                     <Button
                       type="button"
                       variant="ghost"
@@ -1257,7 +1280,7 @@ function NotesSectionImpl<C = unknown>({
                     <SwitchableMarkdownInput
                       value={contentEditor.value}
                       onChange={(nextValue) => setContentEditor((prev) => ({ ...prev, value: nextValue }))}
-                      isMarkdownEnabled={isMarkdownEnabled}
+                      isMarkdownEnabled={isMarkdownActive}
                       disableMarkdown={disableMarkdown}
                       rows={3}
                       textareaRef={contentTextareaRef}
@@ -1278,19 +1301,19 @@ function NotesSectionImpl<C = unknown>({
                           inlineLabel('saveShortcut')
                         )}
                       </Button>
-                      {disableMarkdown ? null : (
+                      {showMarkdownToggle ? (
                         <Button
                           type="button"
                           variant="ghost"
                           size="icon"
                           onClick={handleMarkdownToggle}
-                          aria-pressed={isMarkdownEnabled}
-                          className={isMarkdownEnabled ? 'text-primary' : undefined}
+                          aria-pressed={isMarkdownActive}
+                          className={isMarkdownActive ? 'text-primary' : undefined}
                           disabled={contentSavingId === note.id}
                         >
                           <FileCode className="h-4 w-4" />
                         </Button>
-                      )}
+                      ) : null}
                       <Button
                         type="button"
                         size="sm"
@@ -1340,29 +1363,31 @@ function NotesSectionImpl<C = unknown>({
           </div>
         )}
       </div>
-      <AppearanceDialog
-        open={appearanceDialogOpen}
-        title={
-          appearanceDialogState?.mode === 'edit'
-            ? label('appearance.edit')
-            : label('appearance.toggleOpen', 'Customize appearance')
-        }
-        icon={appearanceDialogState?.icon ?? null}
-        color={appearanceDialogState?.color ?? null}
-        labels={noteAppearanceLabels}
-        iconSuggestions={iconSuggestions}
-        onIconChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, icon: value ?? null } : prev))}
-        onColorChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, color: value ?? null } : prev))}
-        onSubmit={() => {
-          void handleAppearanceDialogSubmit()
-        }}
-        onClose={handleAppearanceDialogClose}
-        isSaving={appearanceDialogSaving}
-        errorMessage={appearanceDialogError}
-        primaryLabel={appearanceDialogPrimaryLabel}
-        savingLabel={appearanceDialogSavingLabel}
-        cancelLabel={label('appearance.cancel')}
-      />
+      {showAppearanceControls ? (
+        <AppearanceDialog
+          open={appearanceDialogOpen}
+          title={
+            appearanceDialogState?.mode === 'edit'
+              ? label('appearance.edit')
+              : label('appearance.toggleOpen', 'Customize appearance')
+          }
+          icon={appearanceDialogState?.icon ?? null}
+          color={appearanceDialogState?.color ?? null}
+          labels={noteAppearanceLabels}
+          iconSuggestions={iconSuggestions}
+          onIconChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, icon: value ?? null } : prev))}
+          onColorChange={(value) => setAppearanceDialogState((prev) => (prev ? { ...prev, color: value ?? null } : prev))}
+          onSubmit={() => {
+            void handleAppearanceDialogSubmit()
+          }}
+          onClose={handleAppearanceDialogClose}
+          isSaving={appearanceDialogSaving}
+          errorMessage={appearanceDialogError}
+          primaryLabel={appearanceDialogPrimaryLabel}
+          savingLabel={appearanceDialogSavingLabel}
+          cancelLabel={label('appearance.cancel')}
+        />
+      ) : null}
       {ConfirmDialogElement}
     </div>
   )

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -11,6 +11,7 @@ import {
   AlertTriangle,
   Apple,
   Archive,
+  AtSign,
   Award,
   BadgeCheck,
   Ban,
@@ -21,6 +22,7 @@ import {
   Bolt,
   Book,
   Bookmark,
+  Bot,
   Box,
   Boxes,
   Briefcase,
@@ -173,6 +175,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'alert-triangle': AlertTriangle,
   'apple': Apple,
   'archive': Archive,
+  'at-sign': AtSign,
   'award': Award,
   'badge-check': BadgeCheck,
   'ban': Ban,
@@ -183,6 +186,7 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'bolt': Bolt,
   'book': Book,
   'bookmark': Bookmark,
+  'bot': Bot,
   'box': Box,
   'boxes': Boxes,
   'briefcase': Briefcase,

package/src/backend/injection/useRegisteredComponent.tsx

@@ -40,6 +40,30 @@ type Resolution<TProps> = {
   replacementModule: string
 }
 
+/**
+ * Calling a wrapper override returns a fresh component every time, which would
+ * reintroduce the identity churn this hook exists to avoid. Memoizing per
+ * (wrapper, wrapped component) pair keeps the composed component referentially
+ * stable for as long as both inputs are.
+ */
+const composedWrappers = new WeakMap<object, WeakMap<object, unknown>>()
+
+function applyWrapper<TProps>(
+  wrapper: (Original: ComponentType<TProps>) => ComponentType<TProps>,
+  Base: ComponentType<TProps>,
+): ComponentType<TProps> {
+  let byBase = composedWrappers.get(wrapper)
+  if (!byBase) {
+    byBase = new WeakMap<object, unknown>()
+    composedWrappers.set(wrapper, byBase)
+  }
+  const cached = byBase.get(Base)
+  if (cached) return cached as ComponentType<TProps>
+  const composed = wrapper(Base)
+  byBase.set(Base, composed)
+  return composed
+}
+
 function resolveComponent<TProps>(
   componentId: string,
   fallback: ComponentType<TProps> | undefined,
@@ -75,7 +99,7 @@ function resolveComponent<TProps>(
   }
 
   const base = replacement ?? original
-  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)
 
   return {
     original,
@@ -87,8 +111,9 @@ function resolveComponent<TProps>(
 }
 
 /**
- * The returned component's identity must depend only on `componentId` and
- * `fallback` — never on the override registry.
+ * The returned component's identity must depend only on `componentId` — never
+ * on the override registry, and never on the `fallback` a caller happens to
+ * pass on this render.
  *
  * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
  * imports the generated override module and hands the provider a fresh array,
@@ -103,18 +128,32 @@ function resolveComponent<TProps>(
  * carries no override for this id, `wrapped` keeps its previous identity and
  * React reconciles in place; only a genuine replacement or wrapper swaps the
  * rendered type, where a remount is the correct behaviour.
+ *
+ * The identity is held in a ref rather than a `useMemo`, because `useMemo` is a
+ * performance hint React is free to discard, and identity here is a correctness
+ * requirement rather than an optimisation. `fallback` is read through a ref for
+ * the same reason: a host that builds its fallback inline would otherwise swap
+ * the component this hook hands back on every render. That still cannot save a
+ * subtree rendered *through* such a fallback — the fallback itself is then the
+ * element type, and only the host can stabilise it — but it keeps the churn
+ * from spreading to hosts whose id does resolve to a registered component.
  */
 export function useRegisteredComponent<TProps>(
   componentId: string,
   fallback?: ComponentType<TProps>,
 ): ComponentType<TProps> {
-  return React.useMemo(() => {
+  const fallbackRef = React.useRef<ComponentType<TProps> | undefined>(fallback)
+  fallbackRef.current = fallback
+
+  const registered = React.useRef<{ componentId: string; Component: ComponentType<TProps> } | null>(null)
+  if (!registered.current || registered.current.componentId !== componentId) {
     const Registered = (props: TProps) => {
       const userFeatures = useOverrideUserFeatures()
       const overrideRevision = useOverrideRegistryRevision()
+      const currentFallback = fallbackRef.current
       const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
-        () => resolveComponent<TProps>(componentId, fallback, userFeatures),
-        [overrideRevision, userFeatures],
+        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),
+        [currentFallback, overrideRevision, userFeatures],
       )
 
       if (!original || !wrapped) return null
@@ -145,8 +184,10 @@ export function useRegisteredComponent<TProps>(
     }
 
     Registered.displayName = `RegisteredComponent(${componentId})`
-    return Registered
-  }, [componentId, fallback])
+    registered.current = { componentId, Component: Registered }
+  }
+
+  return registered.current.Component
 }
 
 export default useRegisteredComponent

package/src/backend/inputs/ComboboxInput.tsx

@@ -100,6 +100,10 @@ export function ComboboxInput({
   const blurClosePendingRef = React.useRef(false)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
   const eagerFallbackLoadedValueRef = React.useRef<string | null>(null)
+  // Tracks whether the user actually typed into the field during the current focus
+  // session. `touched` cannot serve this purpose because it is set by `onFocus`,
+  // which `autoFocus` triggers before the user does anything at all.
+  const userTypedRef = React.useRef(false)
 
   const staticOptions = React.useMemo(
     () => normalizeOptions([...(seedOptions ?? []), ...(suggestions ?? [])]),
@@ -247,12 +251,21 @@ export function ComboboxInput({
   // including it would re-run the effect on every render when the prop is an inline function
   }, [value, disabled, knownLabelValues, coveredOptionValues, eagerResolveLabel, loadSuggestions])
 
-  // Sync input with value when value changes externally and input is not focused.
+  // Sync input with a value that changed outside the component. A focused field is
+  // synced too, because `autoFocus` can focus the control before an async default value
+  // arrives and a focus-only guard then leaves the control rendering an empty label for
+  // a value the form has already committed. Two conditions still block the sync:
+  //   - the user is typing, so their query is never clobbered mid-keystroke;
+  //   - `optionMap` only holds the self-mapping placeholder it synthesises for an
+  //     uncovered value, which would paint the raw record id over a label the user just
+  //     picked (`asyncOptions` is replaced on every load, so any follow-up load that
+  //     misses the picked entry — a failed request, a debounce race, a composite label
+  //     the route's `?search=` cannot match — drops it back to the placeholder).
   React.useEffect(() => {
-    if (document.activeElement !== inputRef.current) {
-      const option = optionMap.get(value)
-      setInput(option?.label ?? value ?? '')
-    }
+    const option = optionMap.get(value)
+    const hasRealLabel = Boolean(option && option.label !== option.value)
+    if (document.activeElement === inputRef.current && (userTypedRef.current || !hasRealLabel)) return
+    setInput(option?.label ?? value ?? '')
   }, [value, optionMap])
 
   const selectValue = React.useCallback(
@@ -265,6 +278,7 @@ export function ComboboxInput({
       setInput(option?.label ?? trimmed)
       setShowSuggestions(false)
       setSelectedIndex(-1)
+      userTypedRef.current = false
     },
     [disabled, onChange, optionMap, resetBlurCloseState]
   )
@@ -436,6 +450,7 @@ export function ComboboxInput({
         }}
         onChange={(event) => {
           setTouched(true)
+          userTypedRef.current = true
           setInput(event.target.value)
           setShowSuggestions(true)
           setSelectedIndex(-1)
@@ -445,6 +460,7 @@ export function ComboboxInput({
           // Delay closing so clicks on the popup can resolve first. If async
           // suggestions are still loading, keep the dropdown open instead of
           // closing before the first payload arrives.
+          userTypedRef.current = false
           blurClosePendingRef.current = true
           clearBlurCloseTimer()
           if (loadingRef.current) {

package/src/backend/inputs/LookupSelect.tsx

@@ -133,8 +133,8 @@ export function LookupSelect({
   )
 
   const isInteractiveItem = React.useCallback(
-    (item: LookupSelectItem) => !item.disabled || value === item.id,
-    [value],
+    (item: LookupSelectItem) => !disabled && (!item.disabled || value === item.id),
+    [disabled, value],
   )
 
   const moveActiveIndex = React.useCallback((direction: 1 | -1) => {
@@ -252,7 +252,7 @@ export function LookupSelect({
             aria-activedescendant={activeIndex >= 0 ? optionDomId(activeIndex) : undefined}
           />
         </div>
-        {actionSlot ? <div className="sm:self-start">{actionSlot}</div> : null}
+        {actionSlot && !disabled ? <div className="sm:self-start">{actionSlot}</div> : null}
       </div>
       {shouldSearch ? (
         <div className="space-y-2">
@@ -272,7 +272,7 @@ export function LookupSelect({
           >
             {items.map((item, index) => {
               const isSelected = value === item.id
-              const isInteractive = !item.disabled || isSelected
+              const isInteractive = isInteractiveItem(item)
               const isActive = index === activeIndex
               return (
                 <div
@@ -287,7 +287,7 @@ export function LookupSelect({
                     isActive && !isSelected ? 'border-foreground/20 bg-muted/30 shadow-sm' : null
                   )}
                   role="option"
-                  tabIndex={item.disabled ? -1 : 0}
+                  tabIndex={isInteractive ? 0 : -1}
                   onClick={() => {
                     if (!isInteractive) return
                     onChange(item.id)
@@ -300,8 +300,8 @@ export function LookupSelect({
                     }
                   }}
                   aria-selected={isSelected}
-                  aria-disabled={item.disabled && !isSelected ? true : undefined}
-                  title={isSelected ? resolvedSelectedLabel : resolvedSelectLabel}
+                  aria-disabled={isInteractive ? undefined : true}
+                  title={isSelected ? resolvedSelectedLabel : isInteractive ? resolvedSelectLabel : undefined}
                 >
                   {item.icon ? (
                     <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>svg]:size-6 [&_svg]:text-muted-foreground">
@@ -344,7 +344,7 @@ export function LookupSelect({
               )
             })}
           </div>
-          {value ? (
+          {value && !disabled ? (
             <Button
               type="button"
               variant="ghost"

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -396,6 +396,148 @@ describe('ComboboxInput — eager label resolution', () => {
     rerender(<ComboboxInput value="b" onChange={() => {}} resolveLabel={resolveLabel} />)
     await waitFor(() => expect(getInput(container).value).toBe('Label-b'))
   })
+
+  it('shows a default value that arrives after autoFocus already took the field', async () => {
+    const options = [{ value: 'wh-1', label: 'Central warehouse' }]
+    const { container, rerender } = render(
+      <ComboboxInput value="" onChange={() => {}} autoFocus seedOptions={options} />,
+    )
+    expect(document.activeElement).toBe(getInput(container))
+    rerender(<ComboboxInput value="wh-1" onChange={() => {}} autoFocus seedOptions={options} />)
+    await waitFor(() => expect(getInput(container).value).toBe('Central warehouse'))
+  })
+
+  // Guards the opposite direction of the case above: it passes on both the old
+  // focus-based guard and the current typing-based one, so it is a behavior pin
+  // rather than a regression test for any specific bug.
+  it('does not overwrite the query while the user is typing into a focused field', async () => {
+    const options = [
+      { value: 'red', label: 'Red' },
+      { value: 'green', label: 'Green' },
+    ]
+    const { container, rerender } = render(
+      <ComboboxInput value="red" onChange={() => {}} seedOptions={options} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Red'))
+    const input = getInput(container)
+    act(() => {
+      input.focus()
+      fireEvent.change(input, { target: { value: 'gre' } })
+    })
+    rerender(<ComboboxInput value="green" onChange={() => {}} seedOptions={options} />)
+    expect(getInput(container).value).toBe('gre')
+  })
+
+  // The regression the typing-based guard originally introduced: `selectValue` clears
+  // `userTypedRef` while the field keeps focus, so a follow-up load that no longer
+  // carries the picked option let the self-mapping placeholder overwrite the label with
+  // the raw record id. Fails on the intermediate implementation, passes on this one.
+  it('keeps a picked label when a follow-up load drops the option from the list', async () => {
+    const loadSuggestions = jest.fn(async (query?: string) =>
+      query === 'WH-B' ? [{ value: 'wh-b', label: 'Warehouse B (WH-B)' }] : [],
+    )
+    function Controlled() {
+      const [value, setValue] = React.useState('')
+      return (
+        <ComboboxInput
+          value={value}
+          onChange={setValue}
+          loadSuggestions={loadSuggestions}
+          allowCustomValues={false}
+        />
+      )
+    }
+    const { container } = render(<Controlled />)
+    const input = getInput(container)
+    act(() => {
+      input.focus()
+      fireEvent.change(input, { target: { value: 'WH-B' } })
+    })
+
+    const option = await screen.findByRole('option', { name: /Warehouse B \(WH-B\)/ })
+    act(() => {
+      fireEvent.click(option)
+    })
+    expect(getInput(container).value).toBe('Warehouse B (WH-B)')
+    expect(document.activeElement).toBe(getInput(container))
+
+    // Picking rewrote the query to the label, which re-fires the debounced loader; the
+    // route cannot match a composite label, so the option list comes back empty.
+    await waitFor(() => expect(loadSuggestions).toHaveBeenCalledWith('Warehouse B (WH-B)'))
+    await act(async () => {
+      await new Promise((res) => setTimeout(res, 250))
+    })
+    expect(getInput(container).value).toBe('Warehouse B (WH-B)')
+  })
+
+  it('adopts a real label that arrives while the field is focused', async () => {
+    const { container, rerender } = render(
+      <ComboboxInput value="wh-1" onChange={() => {}} seedOptions={[]} />,
+    )
+    const input = getInput(container)
+    act(() => {
+      input.focus()
+    })
+    expect(getInput(container).value).toBe('wh-1')
+
+    rerender(
+      <ComboboxInput
+        value="wh-1"
+        onChange={() => {}}
+        seedOptions={[{ value: 'wh-1', label: 'Central warehouse' }]}
+      />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Central warehouse'))
+  })
+
+  it('does not resurrect the previous label when the parent keeps the value after a clear', () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <ComboboxInput
+        value="red"
+        onChange={onChange}
+        clearable
+        seedOptions={[{ value: 'red', label: 'Red' }]}
+      />,
+    )
+    expect(getInput(container).value).toBe('Red')
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /clear value/i }))
+    })
+
+    expect(onChange).toHaveBeenCalledWith('')
+    expect(getInput(container).value).toBe('')
+  })
+
+  it('resumes syncing after a blur, so a later external change is not mistaken for typing', async () => {
+    const options = [
+      { value: 'red', label: 'Red' },
+      { value: 'green', label: 'Green' },
+    ]
+    const { container, rerender } = render(
+      <ComboboxInput value="red" onChange={() => {}} seedOptions={options} allowCustomValues={false} />,
+    )
+    const input = getInput(container)
+    act(() => {
+      input.focus()
+      fireEvent.change(input, { target: { value: 'gre' } })
+    })
+    expect(getInput(container).value).toBe('gre')
+
+    act(() => {
+      fireEvent.blur(input)
+    })
+    await waitFor(() => expect(getInput(container).value).toBe('Red'))
+
+    act(() => {
+      getInput(container).focus()
+    })
+    rerender(
+      <ComboboxInput value="green" onChange={() => {}} seedOptions={options} allowCustomValues={false} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Green'))
+  })
 })
 
 describe('ComboboxInput accessibility', () => {