@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/Input/index.tsx

@@ -1,9 +1,15 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
-import { useRef } from "react";
-import { WarningCircleIcon } from "@phosphor-icons/react";
+import { useCallback, useRef } from "react";
+import { ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { MIN_PRESS_TARGET, pressTargetHitSlop } from "@multiplatform.one/theme";
-import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
-import { Text } from "tamagui";
+import type {
+  InputKeyboardType,
+  InputTextContentType,
+  LabelProps,
+  SizeTokens,
+  TamaguiElement,
+} from "tamagui";
+import { isWeb, Text } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -21,6 +27,23 @@ import { LinkCell } from "../../utils/LinkCell";
 
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
 
+/** F1 / reference §10: standalone Input rings at offset 0, not the inset −2. */
+const INPUT_FIELD_RING_STYLE_ID = "mp-input-field-ring-offset";
+
+export function ensureInputFieldRingOffset(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(INPUT_FIELD_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = INPUT_FIELD_RING_STYLE_ID;
+  tag.textContent = `[data-mp-input-field][data-mp-ring="inset"]:has(input:focus),
+[data-mp-input-field][data-mp-ring="inset"]:has(textarea:focus),
+[data-mp-input-field][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
+[data-mp-input-field][data-mp-ring="inset"]:focus-visible {
+  outline-offset: 0px !important;
+}`;
+  document.head.appendChild(tag);
+}
+
 export interface InputProps {
   name?: string;
   form?: AnyFormApi;
@@ -56,8 +79,8 @@ export interface InputProps {
   placeholder?: string;
   multiline?: boolean;
   maxLength?: number;
-  keyboardType?: string;
-  textContentType?: string;
+  keyboardType?: InputKeyboardType;
+  textContentType?: InputTextContentType;
   autoComplete?: string;
   /**
    * Semantic content purpose (DG-FORM-07 / DG §32). Drives the default
@@ -85,6 +108,25 @@ export interface InputProps {
   compact?: boolean;
   /** When true, renders without borders/background (for toolbar integration) */
   chromeless?: boolean;
+  /**
+   * Declared copy end-cap (CopyField / LC-16 second consumer of Input.Button).
+   * Empty omits the cap. Disabled keeps geometry and drops the tab stop.
+   */
+  copy?: boolean;
+  /** Called after a copy attempt. CopyField routes this through notify(). */
+  onCopyResult?: (ok: boolean) => void;
+}
+
+const COPY_LABEL = "Copy to clipboard";
+
+async function writeClipboard(text: string): Promise<boolean> {
+  try {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return false;
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 export function Input({
@@ -124,6 +166,8 @@ export function Input({
   skeleton,
   compact,
   chromeless,
+  copy,
+  onCopyResult,
 }: InputProps) {
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
@@ -132,6 +176,7 @@ export function Input({
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
+  if (isWeb) ensureInputFieldRingOffset();
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
@@ -155,6 +200,10 @@ export function Input({
     "data-visual-height": String(visualHeight),
     "data-press-floor": belowFloor ? "slop" : "box",
     "data-ring-target": "box",
+    "data-radius-class": "DEFAULT",
+    "data-radius-part": "Input",
+    "data-ring-offset": "0",
+    "data-mp-input-field": "true",
     ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
   } as const;
 
@@ -180,7 +229,8 @@ export function Input({
   const layoutBind = {
     id,
     label: visibleLabel,
-    labelProps,
+    // R7 / §6.1: label is weight 400. Consumer labelProps still eject last.
+    labelProps: { fontWeight: "400" as const, ...labelProps },
     helperText,
     required,
     disabled,
@@ -195,6 +245,23 @@ export function Input({
   const areaName =
     visibleLabel || !resolvedAriaLabel ? undefined : { "aria-label": resolvedAriaLabel };
 
+  const handleCopy = useCallback(
+    async (text: string) => {
+      const ok = await writeClipboard(text);
+      onCopyResult?.(ok);
+    },
+    [onCopyResult],
+  );
+
+  // Identifier values (tokens, URLs) ride the mono register (LC-12).
+  const identifierProps = copy
+    ? ({
+        fontFamily: "$mono",
+        letterSpacing: 0,
+        "data-register": "identifier",
+      } as const)
+    : undefined;
+
   // Render skeleton placeholder — FieldLayout keeps label/helper anatomy
   // (LC-20); only the control chrome is the skeleton.
   if (skeleton) {
@@ -220,96 +287,134 @@ export function Input({
     handleChange?: (text: string) => void,
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
-  ) => (
-    <InputParts.Box
-      {...boxContract}
-      {...(handleBlur ? { onBlur: handleBlur } : undefined)}
-      // LC-40: the Box owns the disabled chrome treatment (read-only renders
-      // its own branch below and never dims).
-      disabled={disabled}
-      {...chromelessProps}
-    >
-      {leftIcon && (
-        <InputParts.Icon adornment="leading" {...focusTrigger}>
-          {leftIcon}
-        </InputParts.Icon>
-      )}
-      {readOnly ? (
-        linkResolver ? (
-          <LinkCell value={inputValue} linkResolver={linkResolver}>
-            <Text
+  ) => {
+    const copyText = String(inputValue ?? "");
+    // Empty omits the cap so the field stays one tab stop (LC-49).
+    const showCopy = Boolean(copy && copyText);
+    const activateCopy = () => {
+      if (disabled) return;
+      void handleCopy(copyText);
+    };
+    return (
+      <InputParts.Box
+        {...boxContract}
+        {...(handleBlur ? { onBlur: handleBlur } : undefined)}
+        // LC-40: the Box owns the disabled chrome treatment (read-only renders
+        // its own branch below and never dims).
+        disabled={disabled}
+        {...(showCopy ? { paddingInlineEnd: 0 } : undefined)}
+        {...chromelessProps}
+      >
+        {leftIcon && (
+          <InputParts.Icon adornment="leading" {...focusTrigger}>
+            {leftIcon}
+          </InputParts.Icon>
+        )}
+        {readOnly ? (
+          linkResolver ? (
+            <LinkCell value={inputValue} linkResolver={linkResolver}>
+              <Text
+                id={id}
+                aria-readonly="true"
+                aria-required={required || undefined}
+                aria-invalid={hasError || undefined}
+                {...areaName}
+                {...identifierProps}
+                color="$color"
+              >
+                {inputValue ?? ""}
+              </Text>
+            </LinkCell>
+          ) : (
+            <InputParts.Area
+              ref={inputRef}
+              value={inputValue ?? ""}
+              readOnly
               id={id}
               aria-readonly="true"
               aria-required={required || undefined}
               aria-invalid={hasError || undefined}
+              {...identifierProps}
               {...areaName}
-              color="$color"
-            >
-              {inputValue ?? ""}
-            </Text>
-          </LinkCell>
+            />
+          )
         ) : (
           <InputParts.Area
             ref={inputRef}
-            value={inputValue ?? ""}
-            readOnly
+            {...(purposeInputProps.inputMode !== undefined
+              ? { inputMode: purposeInputProps.inputMode }
+              : undefined)}
+            {...(purposeInputProps.keyboardType !== undefined
+              ? { keyboardType: purposeInputProps.keyboardType }
+              : undefined)}
+            {...(purposeInputProps.autoComplete !== undefined
+              ? { autoComplete: purposeInputProps.autoComplete }
+              : undefined)}
+            {...inputProps}
+            {...identifierProps}
+            {...(multiline !== undefined ? { multiline } : undefined)}
+            {...(maxLength !== undefined ? { maxLength } : undefined)}
+            {...(keyboardType !== undefined ? { keyboardType } : undefined)}
+            {...(textContentType !== undefined ? { textContentType } : undefined)}
+            {...(autoComplete !== undefined ? { autoComplete } : undefined)}
+            {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
+            {...(placeholder !== undefined ? { placeholder } : undefined)}
+            disabled={disabled}
             id={id}
-            aria-readonly="true"
+            {...(handleChange ? { value: inputValue ?? "" } : { defaultValue: inputValue })}
             aria-required={required || undefined}
             aria-invalid={hasError || undefined}
             {...areaName}
+            onChange={onChange}
+            onChangeText={(text) => {
+              if (disabled) return;
+              handleChange?.(text);
+              onChangeText?.(text);
+            }}
           />
-        )
-      ) : (
-        <InputParts.Area
-          ref={inputRef}
-          {...(purposeInputProps.inputMode !== undefined
-            ? { inputMode: purposeInputProps.inputMode }
-            : undefined)}
-          {...(purposeInputProps.keyboardType !== undefined
-            ? { keyboardType: purposeInputProps.keyboardType }
-            : undefined)}
-          {...(purposeInputProps.autoComplete !== undefined
-            ? { autoComplete: purposeInputProps.autoComplete }
-            : undefined)}
-          {...inputProps}
-          {...(multiline !== undefined ? { multiline } : undefined)}
-          {...(maxLength !== undefined ? { maxLength } : undefined)}
-          {...(keyboardType !== undefined ? { keyboardType } : undefined)}
-          {...(textContentType !== undefined ? { textContentType } : undefined)}
-          {...(autoComplete !== undefined ? { autoComplete } : undefined)}
-          {...(secureTextEntry !== undefined ? { secureTextEntry } : undefined)}
-          {...(placeholder !== undefined ? { placeholder } : undefined)}
-          disabled={disabled}
-          id={id}
-          defaultValue={inputValue}
-          aria-required={required || undefined}
-          aria-invalid={hasError || undefined}
-          {...areaName}
-          onChange={onChange}
-          onChangeText={(text) => {
-            if (disabled) return;
-            handleChange?.(text);
-            onChangeText?.(text);
-          }}
-        />
-      )}
-      {rightIcon ? (
-        <InputParts.Icon
-          adornment="trailing"
-          {...(rightIconInteractive ? undefined : focusTrigger)}
-        >
-          {rightIcon}
-        </InputParts.Icon>
-      ) : hasError ? (
-        // M3 / Polaris / Spectrum: in-field error glyph (color is not the
-        // only channel). Omitted when the consumer owns the trailing slot.
-        <InputParts.Icon adornment="trailing" color={formCommonColors.error}>
-          <WarningCircleIcon aria-hidden />
-        </InputParts.Icon>
-      ) : null}
-    </InputParts.Box>
-  );
+        )}
+        {showCopy ? (
+          <InputParts.Button
+            glyphRing
+            size={resolvedSize}
+            type="button"
+            disabled={disabled}
+            tabIndex={disabled ? -1 : 0}
+            aria-label={COPY_LABEL}
+            hitSlop={belowFloor ? pressTargetHitSlop(visualHeight) : undefined}
+            onPress={disabled ? undefined : activateCopy}
+            onKeyDown={
+              ((e: KeyboardEvent) => {
+                if (disabled) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  activateCopy();
+                }
+              }) as unknown as () => void
+            }
+          >
+            <InputParts.Icon aria-hidden>
+              <ClipboardIcon />
+            </InputParts.Icon>
+          </InputParts.Button>
+        ) : rightIcon ? (
+          <InputParts.Icon
+            adornment="trailing"
+            {...(rightIconInteractive ? undefined : focusTrigger)}
+          >
+            {rightIcon}
+          </InputParts.Icon>
+        ) : hasError ? (
+          // M3 / Polaris / Spectrum: in-field error glyph (color is not the
+          // only channel). Omitted when the consumer owns the trailing slot.
+          <InputParts.Icon adornment="trailing" color={formCommonColors.error}>
+            <WarningCircleIcon aria-hidden />
+          </InputParts.Icon>
+        ) : null}
+      </InputParts.Box>
+    );
+  };
 
   if (!resolvedForm || !name) {
     return (

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -1,7 +1,9 @@
-import { fireEvent } from "@testing-library/react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
+import { useForm } from "@tanstack/react-form";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { MentionInput } from "./index";
+import { Form } from "../../Form";
+import { MentionInput, parseMentionValue } from "./index";
 
 const userMentions = {
   trigger: "@",
@@ -20,6 +22,27 @@ const userMentions = {
   ],
 };
 
+function typeTrigger(textArea: HTMLTextAreaElement, value: string) {
+  fireEvent.change(textArea, {
+    target: { value, selectionStart: value.length, selectionEnd: value.length },
+  });
+  Object.defineProperty(textArea, "selectionStart", { value: value.length, configurable: true });
+  Object.defineProperty(textArea, "selectionEnd", { value: value.length, configurable: true });
+  fireEvent.select(textArea);
+}
+
+describe("parseMentionValue", () => {
+  it("normalizes strings, objects, and empty input into MentionValue", () => {
+    expect(parseMentionValue("hello")).toEqual({ text: "hello", mentions: [] });
+    expect(parseMentionValue({ text: "hi", mentions: [{ id: "u1" }] })).toEqual({
+      text: "hi",
+      mentions: [{ id: "u1" }],
+    });
+    expect(parseMentionValue(undefined)).toEqual({ text: "", mentions: [] });
+    expect(parseMentionValue(null)).toEqual({ text: "", mentions: [] });
+  });
+});
+
 describe("MentionInput", () => {
   it("should render with label and placeholder", () => {
     const result = renderWithProviders(
@@ -41,7 +64,7 @@ describe("MentionInput", () => {
     expect(textArea?.getAttribute("placeholder")).toBe("Type @ to mention");
   });
 
-  it("fires canonical onChange and the deprecated onTextChange alias once per change", () => {
+  it("fires canonical onChange(MentionValue) and the deprecated onTextChange alias once per change", () => {
     const onChange = vi.fn();
     const onTextChange = vi.fn();
     const result = renderWithProviders(
@@ -64,11 +87,93 @@ describe("MentionInput", () => {
     if (textArea) fireEvent.change(textArea, { target: { value: "hello" } });
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("hello");
+    expect(onChange).toHaveBeenCalledWith({ text: "hello", mentions: [] });
     expect(onTextChange).toHaveBeenCalledTimes(1);
     expect(onTextChange).toHaveBeenCalledWith("hello");
   });
 
+  it("renders defaultValue text on first paint", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" mentions={[userMentions]} defaultValue="hello there" />,
+    );
+    expect(result.container.querySelector("textarea")?.value).toBe("hello there");
+  });
+
+  it("does not emit onChange on mount (LC-14: seed is not a user edit)", () => {
+    const onChange = vi.fn();
+    renderWithProviders(
+      <MentionInput
+        label="Comment"
+        mentions={[userMentions]}
+        defaultValue="hello"
+        onChange={onChange}
+      />,
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("skeleton keeps the FieldLayout label and omits the textarea (LC-20)", () => {
+    const result = renderWithProviders(
+      <MentionInput label="Comment" name="comment" mentions={[userMentions]} skeleton />,
+    );
+    expect(result.findTextElement("Comment")).toBeDefined();
+    expect(result.container.querySelector("textarea")).toBeNull();
+  });
+
+  it("standalone controlled: a value arriving after mount displays without onChange", async () => {
+    const onChange = vi.fn();
+    const onTextChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInput label="Comment" mentions={[userMentions]} value="" onChange={onChange} />,
+    );
+    expect(result.container.querySelector("textarea")?.value).toBe("");
+
+    result.rerender(
+      <MentionInput
+        label="Comment"
+        mentions={[userMentions]}
+        value="seeded"
+        onChange={onChange}
+        onTextChange={onTextChange}
+      />,
+    );
+    await waitFor(() => {
+      expect(result.container.querySelector("textarea")?.value).toBe("seeded");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onTextChange).not.toHaveBeenCalled();
+  });
+
+  it("form-integrated: a field value set after mount displays without onChange", async () => {
+    const onChange = vi.fn();
+    let formApi:
+      | { setFieldValue: (name: "comment", value: { text: string; mentions: unknown[] }) => void }
+      | undefined;
+    const TestComponent = () => {
+      const form = useForm({ defaultValues: { comment: { text: "", mentions: [] } } });
+      formApi = form as unknown as typeof formApi;
+      return (
+        <Form form={form}>
+          <MentionInput
+            label="Comment"
+            name="comment"
+            mentions={[userMentions]}
+            onChange={onChange}
+          />
+        </Form>
+      );
+    };
+    const result = renderWithProviders(<TestComponent />);
+
+    await act(async () => {
+      formApi?.setFieldValue("comment", { text: "seeded later", mentions: [] });
+    });
+    await waitFor(() => {
+      expect(result.container.querySelector("textarea")?.value).toBe("seeded later");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it("opens a flush listbox with media-slot rows when typing @", () => {
     const result = renderWithProviders(
       <MentionInput label="Comment" name="comment" mentions={[userMentions]} />,
@@ -78,11 +183,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    // Web caret tracking also listens to select — keep both in sync like the browser.
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
@@ -102,6 +203,10 @@ describe("MentionInput", () => {
     expect(result.findTextElement("Engineer")).toBeDefined();
     expect(result.findTextElement("Designer")).toBeDefined();
     expect(result.findTextElement("B")).toBeDefined(); // Bob initials fallback
+    // LC-73: overlay rows paint nestedControl (32px at medium), not a raw 28.
+    const slots = listbox.querySelectorAll("[data-media-slot]");
+    expect(slots.length).toBe(2);
+    expect(slots[0]?.getAttribute("data-media-slot")).toBe("32");
   });
 
   // Same contract every other FloatingPanel consumer honors, reached by a
@@ -119,10 +224,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     expect(result.container.ownerDocument.querySelector('[role="listbox"]')).toBeNull();
   });
@@ -148,16 +250,14 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "#", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "#");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
     expect(result.findTextElement("react")).toBeDefined();
     // No avatar / initials glyphs for an all-text list.
     expect(result.container.ownerDocument.querySelector("img")).toBeNull();
+    expect(listbox?.querySelector("[data-media-slot]")).toBeNull();
   });
 
   it("keeps the listbox open with an empty state when the query matches nothing", () => {
@@ -169,12 +269,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, {
-      target: { value: "@zzzz", selectionStart: 5, selectionEnd: 5 },
-    });
-    Object.defineProperty(textArea, "selectionStart", { value: 5, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 5, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@zzzz");
 
     const listbox = result.container.ownerDocument.querySelector('[role="listbox"]');
     expect(listbox).toBeTruthy();
@@ -192,13 +287,21 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     fireEvent.keyDown(textArea, { key: "Tab" });
-    expect(onChange).toHaveBeenCalledWith("@Alice ");
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        text: "@Alice ",
+        mentions: [
+          expect.objectContaining({
+            type: "@",
+            id: "u1",
+            display: "Alice",
+          }),
+        ],
+      }),
+    );
   });
 
   it("paints the LC-71 keyboard ring on the active option after typing, not after hover", () => {
@@ -210,10 +313,7 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
 
     const options = result.container.ownerDocument.querySelectorAll('[role="option"]');
     expect(options.length).toBe(2);
@@ -235,13 +335,15 @@ describe("MentionInput", () => {
     expect(textArea).toBeTruthy();
     if (!textArea) return;
 
-    fireEvent.change(textArea, { target: { value: "@", selectionStart: 1, selectionEnd: 1 } });
-    Object.defineProperty(textArea, "selectionStart", { value: 1, configurable: true });
-    Object.defineProperty(textArea, "selectionEnd", { value: 1, configurable: true });
-    fireEvent.select(textArea);
+    typeTrigger(textArea, "@");
     fireEvent.keyDown(textArea, { key: "Enter" });
 
-    expect(onChange).toHaveBeenCalledWith("@Alice ");
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        text: "@Alice ",
+        mentions: [expect.objectContaining({ id: "u1", display: "Alice" })],
+      }),
+    );
 
     const mentionEnd = "@Alice".length;
     Object.defineProperty(textArea, "selectionStart", { value: mentionEnd, configurable: true });
@@ -249,6 +351,6 @@ describe("MentionInput", () => {
     fireEvent.select(textArea);
     fireEvent.keyDown(textArea, { key: "Backspace" });
 
-    expect(onChange).toHaveBeenLastCalledWith(" ");
+    expect(onChange).toHaveBeenLastCalledWith({ text: " ", mentions: [] });
   });
 });