@multiplatform.one/forms 7.7.3 → 7.7.6

package/src/ContextualSaveBar/index.tsx

@@ -39,7 +39,7 @@ export interface ContextualSaveBarProps {
    * Form reads this; the bar itself does not.
    */
   onAutoCommit?: (name: string, value: unknown) => void;
-  /** Override the in-bar status line. */
+  /** Override normal dirty-state copy; saving and failures retain their status. */
   message?: string;
 }
 
@@ -83,7 +83,6 @@ function statusCopy(args: {
   dirty: number;
   override?: string;
 }): { text: string; failed: boolean; qualifier?: string } {
-  if (args.override) return { text: args.override, failed: false };
   if (args.isSubmitting) return { text: t("Saving…"), failed: false };
   if (args.saveError) {
     return {
@@ -101,6 +100,7 @@ function statusCopy(args: {
       failed: true,
     };
   }
+  if (args.override) return { text: args.override, failed: false };
   const qualifier =
     args.dirty > 0
       ? args.dirty === 1
@@ -236,11 +236,13 @@ export function ContextualSaveBar({
             data-mp-savebar-bottom-radius="0"
             role="region"
             aria-label={t("Unsaved changes")}
-            position="sticky"
-            bottom={0}
+            // Tamagui maps sticky to absolute on native; keep the dock in flow there.
+            position={isWeb ? "sticky" : "relative"}
+            bottom={isWeb ? 0 : undefined}
             width="100%"
             zIndex={zIndex.sheet}
-            alignItems="center"
+            flexDirection={copy.failed ? "column" : "row"}
+            alignItems={copy.failed ? "stretch" : "center"}
             paddingTop="$2.5"
             paddingHorizontal={padX as never}
             paddingBottom="$2.5"
@@ -266,15 +268,17 @@ export function ContextualSaveBar({
               ...(elevationProps.style as object | undefined),
             }}
           >
-            <XStack flex={1} minWidth={0} alignItems="baseline" gap="$2">
+            <XStack flex={copy.failed ? undefined : 1} minWidth={0} alignItems="baseline" gap="$2">
               <Text
                 role="status"
                 {...knobProps.body}
                 fontSize="$4"
                 lineHeight="$4"
                 color={copy.failed ? formCommonColors.error : "$color"}
-                numberOfLines={1}
-                ellipsizeMode="tail"
+                flexShrink={1}
+                numberOfLines={copy.failed ? undefined : 1}
+                ellipsizeMode={copy.failed ? undefined : "tail"}
+                {...(isWeb && copy.failed ? { style: { overflowWrap: "anywhere" } } : {})}
               >
                 {copy.text}
               </Text>

package/src/ContextualSaveBar/nativeFlow.spec.tsx

@@ -0,0 +1,20 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { expect, it, vi } from "vitest";
+import { Form } from "../Form";
+import { ContextualSaveBar } from "./index";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+it("reserves native layout space instead of mapping a sticky dock to absolute", () => {
+  const view = renderWithProviders(
+    <Form formOptions={{ defaultValues: { name: "example" } }}>
+      <ContextualSaveBar forceVisible />
+    </Form>,
+  );
+  const bar = view.container.querySelector("[data-mp-contextual-savebar]")!;
+  expect(getComputedStyle(bar).position).toBe("relative");
+  expect(getComputedStyle(bar).bottom).not.toBe("0px");
+});

package/src/FloatingPanel/FloatingPanel.native.spec.tsx

@@ -0,0 +1,138 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Animated, PanResponder } from "react-native";
+import { Text } from "tamagui";
+import { FloatingPanel } from "./index.native";
+
+const modal = vi.hoisted(() => ({ onShow: undefined as undefined | (() => void) }));
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children, onShow }: { children: import("react").ReactNode; onShow?: () => void }) => {
+    modal.onShow = onShow;
+    return children;
+  },
+}));
+
+const onOpenChange = vi.fn();
+let dismissCompletion: (result: { finished: boolean }) => void;
+let release: () => void;
+let completions: Array<(result: { finished: boolean }) => void>;
+beforeEach(() => {
+  vi.useFakeTimers();
+  completions = [];
+  modal.onShow = undefined;
+  onOpenChange.mockReset();
+  vi.spyOn(PanResponder, "create").mockImplementation((config) => {
+    release = () => config.onPanResponderRelease?.({} as never, { dy: 1000, vy: 2 } as never);
+    return { panHandlers: {} };
+  });
+  vi.spyOn(Animated, "spring").mockImplementation(() => ({
+    start: (callback) => {
+      if (callback) dismissCompletion = callback;
+    },
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+  vi.spyOn(Animated, "timing").mockImplementation(() => ({
+    start: (callback) => {
+      if (callback) completions.push(callback);
+    },
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+function panel(open: boolean) {
+  return (
+    <FloatingPanel open={open} onOpenChange={onOpenChange} trigger={<Text>Pick one</Text>}>
+      <Text>row</Text>
+    </FloatingPanel>
+  );
+}
+
+describe("FloatingPanel native presentation lifecycle", () => {
+  it("enters without onShow and ignores onShow for the same presentation", () => {
+    renderWithProviders(panel(true));
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    expect(modal.onShow).toBeTypeOf("function");
+    act(() => modal.onShow?.());
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+  });
+  it("ignores onShow after the presentation closes", () => {
+    const { rerender } = renderWithProviders(panel(true));
+    const lateShow = modal.onShow;
+    rerender(panel(false));
+    const count = vi.mocked(Animated.timing).mock.calls.length;
+    act(() => lateShow?.());
+    expect(Animated.timing).toHaveBeenCalledTimes(count);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+  it("ignores a completed entrance from an earlier presentation", () => {
+    const { rerender } = renderWithProviders(panel(true));
+    const oldCompletion = completions[0];
+    rerender(panel(false));
+    rerender(panel(true));
+    const writes = vi.spyOn(Animated.Value.prototype, "setValue");
+    act(() => oldCompletion({ finished: true }));
+    expect(writes).not.toHaveBeenCalled();
+    act(() => completions[1]({ finished: true }));
+    expect(writes).toHaveBeenCalledWith(0);
+  });
+  it("ignores callbacks after unmount and clears its timer", () => {
+    const { unmount } = renderWithProviders(panel(true));
+    const lateShow = modal.onShow;
+    const completion = completions[0];
+    const stop = vi.spyOn(Animated.Value.prototype, "stopAnimation");
+    unmount();
+    expect(stop).toHaveBeenCalled();
+    const writes = vi.spyOn(Animated.Value.prototype, "setValue");
+    const count = vi.mocked(Animated.timing).mock.calls.length;
+    act(() => {
+      lateShow?.();
+      completion({ finished: true });
+    });
+    expect(writes).not.toHaveBeenCalled();
+    expect(Animated.timing).toHaveBeenCalledTimes(count);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+  it("does not let an earlier dismiss close a reopened presentation", () => {
+    const { rerender } = renderWithProviders(panel(true));
+    act(() => release());
+    const oldDismiss = dismissCompletion;
+    rerender(panel(false));
+    rerender(panel(true));
+    act(() => oldDismiss({ finished: true }));
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+  it("closes only after a successful current dismiss", () => {
+    renderWithProviders(panel(true));
+    act(() => release());
+    act(() => dismissCompletion({ finished: false }));
+    expect(onOpenChange).not.toHaveBeenCalled();
+    act(() => release());
+    act(() => dismissCompletion({ finished: true }));
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+  it("owns only the current StrictMode effect presentation", () => {
+    renderWithProviders(panel(true), { reactStrictMode: true });
+    expect(completions.length).toBeGreaterThanOrEqual(2);
+    const writes = vi.spyOn(Animated.Value.prototype, "setValue");
+    act(() => completions[0]({ finished: true }));
+    expect(writes).not.toHaveBeenCalled();
+    act(() => completions[completions.length - 1]({ finished: true }));
+    expect(writes).toHaveBeenCalledWith(0);
+  });
+  it("keeps the measured JS-driver workaround", () => {
+    renderWithProviders(panel(true));
+    expect(Animated.timing).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ useNativeDriver: false }),
+    );
+  });
+});

package/src/FloatingPanel/index.native.tsx

@@ -19,6 +19,21 @@
  *   closes the panel
  * - backdrop tap and the Android back button dismiss WITHOUT committing
  *
+ * Entrance / driver notes (MPO-256):
+ * - The slide-in is driven by an EFFECT on `open`, not by `Modal.onShow`
+ *   alone. `onShow` still fires it (it is the better moment when it arrives)
+ *   but it is one of two triggers, guarded to run once per present. A sheet
+ *   whose only path onto the screen is a native presentation callback is a
+ *   sheet that is off-screen whenever that callback does not arrive.
+ * - Every animation inside the Modal uses the JS driver. On the New
+ *   Architecture a native-driven Animated node inside a core RN `Modal`
+ *   never advances: `setValue` still paints (the node is updated through the
+ *   view's props), but `Animated.timing(...).start()` moves nothing. That
+ *   left the sheet parked at `travel` — exactly one sheet-height BELOW its
+ *   resting place, every row present in the a11y tree and none of them on
+ *   screen. The drag path already used JS `setValue`, so this also stops the
+ *   drag and the settle from fighting over two drivers.
+ *
  * Hit-testing / open-race notes:
  * - Fabric + Tamagui XGroup steal the responder without firing onPress, so
  *   this Pressable owns the open gesture and forces pointerEvents="none" on
@@ -27,7 +42,7 @@
  *   gesture, React batches setOpen(true) then setOpen(prev => !prev) → false
  *   and the sheet never appears. Fields should not also toggle open on native.
  * - Opening a Modal under the same finger can synthesize a backdrop press;
- *   backdrop dismiss is armed only after Modal.onShow + a short delay.
+ *   backdrop dismiss is armed a short delay after the present begins.
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -82,6 +97,8 @@ const minSheetHeight = 180;
 const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
+// Slide-in, and the delay before a backdrop tap can dismiss.
+const enterDuration = 280;
 
 export function FloatingPanel({
   open,
@@ -117,19 +134,6 @@ export function FloatingPanel({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  useEffect(() => {
-    if (!open) {
-      setBackdropArmed(false);
-      if (armTimerRef.current) {
-        clearTimeout(armTimerRef.current);
-        armTimerRef.current = null;
-      }
-    }
-    return () => {
-      if (armTimerRef.current) clearTimeout(armTimerRef.current);
-    };
-  }, [open]);
-
   const framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
   const frameGap = contentPadding === "none" ? undefined : knobProps.gapLg.gap;
   /*
@@ -191,14 +195,9 @@ export function FloatingPanel({
   travelRef.current = travel;
   detentsRef.current = detents;
 
-  useEffect(() => {
-    if (open) return;
-    // Park off-screen before the next present so the first painted frame of
-    // `visible={true}` is not the resting sheet (open → closed → open).
-    const parked = travelRef.current || 10000;
-    translateY.setValue(parked);
-    restRef.current = parked;
-  }, [open, translateY]);
+  // Async callbacks belong to one committed presentation, never its successor.
+  const presentationRef = useRef(0);
+  const activeRef = useRef(false);
 
   const settleTo = useCallback(
     (toValue: number, velocity = 0) => {
@@ -210,7 +209,9 @@ export function FloatingPanel({
         stiffness: 320,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        // JS driver: see the header. A native-driven node inside this Modal
+        // does not advance, and the drag already writes the value from JS.
+        useNativeDriver: false,
       }).start();
     },
     [translateY],
@@ -218,6 +219,8 @@ export function FloatingPanel({
 
   const dismiss = useCallback(
     (velocity = 0) => {
+      if (!activeRef.current) return;
+      const presentation = presentationRef.current;
       restRef.current = travelRef.current;
       Animated.spring(translateY, {
         toValue: travelRef.current,
@@ -226,9 +229,9 @@ export function FloatingPanel({
         stiffness: 400,
         mass: 0.9,
         overshootClamping: true,
-        useNativeDriver: true,
+        useNativeDriver: false,
       }).start(({ finished }) => {
-        if (finished) close();
+        if (finished && activeRef.current && presentation === presentationRef.current) close();
       });
     },
     [close, translateY],
@@ -278,22 +281,64 @@ export function FloatingPanel({
     [dismiss, settleTo, translateY],
   );
 
-  const handleModalShow = useCallback(() => {
+  // One entrance per present, whichever trigger gets here first: the effect
+  // below (React knows `open` flipped) or Modal.onShow (the platform says the
+  // presentation finished). The ref makes the second one a no-op instead of a
+  // second slide, and is cleared when the sheet closes.
+  const enteredRef = useRef(false);
+  const enter = useCallback(() => {
+    if (!activeRef.current || enteredRef.current) return;
+    const presentation = presentationRef.current;
+    enteredRef.current = true;
     if (armTimerRef.current) clearTimeout(armTimerRef.current);
     // One frame + small delay so the opening tap cannot dismiss immediately.
-    armTimerRef.current = setTimeout(() => setBackdropArmed(true), 280);
+    armTimerRef.current = setTimeout(() => {
+      if (activeRef.current && presentation === presentationRef.current) {
+        armTimerRef.current = null;
+        setBackdropArmed(true);
+      }
+    }, enterDuration);
     // MPO-62: the modal itself fades (so the backdrop dims IN PLACE) and only
     // the sheet slides, on this transform.
     translateY.setValue(travelRef.current);
     restRef.current = 0;
     Animated.timing(translateY, {
       toValue: 0,
-      duration: 280,
+      duration: enterDuration,
       easing: Easing.out(Easing.cubic),
-      useNativeDriver: true,
-    }).start();
+      useNativeDriver: false,
+    }).start(({ finished }) => {
+      // An interrupted entrance (a drag caught it mid-slide) leaves the pan
+      // responder owning the value; only a completed one asserts the rest.
+      if (finished && activeRef.current && presentation === presentationRef.current)
+        translateY.setValue(0);
+    });
   }, [translateY]);
 
+  useEffect(() => {
+    presentationRef.current += 1;
+    activeRef.current = open;
+    if (open) {
+      enter();
+    } else {
+      setBackdropArmed(false);
+      const parked = travelRef.current || 10000;
+      translateY.setValue(parked);
+      restRef.current = parked;
+    }
+    return () => {
+      // Invalidate first: stopping an animation can synchronously finish it.
+      activeRef.current = false;
+      presentationRef.current += 1;
+      enteredRef.current = false;
+      if (armTimerRef.current) {
+        clearTimeout(armTimerRef.current);
+        armTimerRef.current = null;
+      }
+      translateY.stopAnimation();
+    };
+  }, [open, enter, translateY]);
+
   const content = scrollable ? (
     <RNScrollView
       // sheetFill: the list scrollport fills the fixed-height sheet; default:
@@ -346,7 +391,7 @@ export function FloatingPanel({
         animationType="fade"
         statusBarTranslucent
         onRequestClose={close}
-        onShow={handleModalShow}
+        onShow={enter}
       >
         {/*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the

package/src/InputParts/index.tsx

@@ -443,7 +443,10 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   // paints outside overflow:hidden, so the ring clip can stay.
   const paintsRing = !grouped && !inTableCell;
   const hasElevation = knobProps.elevation != null;
-  const boxOverflow: BoxOverflow = paintsRing && !(hasElevation && !isWeb) ? "hidden" : "visible";
+  const hasWebPressSlop =
+    isWeb && (props as { "data-mp-press-slop"?: string })["data-mp-press-slop"] != null;
+  const boxOverflow: BoxOverflow =
+    paintsRing && !(hasElevation && !isWeb) && !hasWebPressSlop ? "hidden" : "visible";
   const ringMode = boxRingMode(boxOverflow, paintsRing);
   if (isWeb) {
     ensureCompositeFocusRing();
@@ -536,6 +539,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             minWidth={0}
             elevation={undefined}
             {...props}
+            {...controlFragment}
             {...passthroughSizeProps}
             {...insetPadProps}
             {...sizeRecipeEscapeOverride}

package/src/fields/Combobox/index.tsx

@@ -37,7 +37,9 @@ import {
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
+import { Button } from "../../Button";
 import { Chip, type ChipProps } from "../../Chip";
+import { pickerTriggerContract } from "../../shared/pickerTriggerContract";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -367,7 +369,7 @@ const ComboboxItem = memo(function ComboboxItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      size={ctx.knobProps.sizeToken}
+      height={ctx.knobProps.control.height}
       {...listItemRingProps(Boolean(keyboardRing))}
       {...(suppressHover
         ? {
@@ -1373,17 +1375,13 @@ function FloatingComboboxCore({
       // attaches below instead (MPO-38), leaving the trigger on screen and
       // focusable, so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
-            // LC-54 PRESS-FLOOR: compact/small size tokens render a sub-44
-            // trigger (the 36px "Allocated To" quick filter breaking the
-            // list's 44px control row) — same floor the house Select holds
-            // on both its trigger variants.
-            minHeight: 44,
           })}
     >
       <SyncFocusToOpen open={open} />
@@ -1420,6 +1418,7 @@ function FloatingComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -1435,11 +1434,13 @@ function FloatingComboboxCore({
         )}
       </View>
       {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
+        <Button
+          size={knobProps.control.height}
+          chromeless
+          {...pickerTriggerContract(knobProps.control.height)}
+          icon={<XIcon size={14} />}
           alignSelf="center"
           cursor="pointer"
-          role="button"
           tabIndex={-1}
           aria-label={t("Clear")}
           opacity={0.6}
@@ -1454,9 +1455,7 @@ function FloatingComboboxCore({
             e.stopPropagation?.();
             onValueChange?.("");
           }}
-        >
-          <XIcon size={14} />
-        </View>
+        />
       )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
@@ -1607,7 +1606,7 @@ function FloatingComboboxCore({
                       id={comboboxOptionId(id, createOptionIndex)}
                       selected={false}
                       active={createOptionIndex === activeIndex}
-                      size={knobProps.sizeToken}
+                      height={knobProps.control.height}
                       data-combobox-index={createOptionIndex}
                       data-active={createOptionIndex === activeIndex}
                       {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1649,7 +1648,7 @@ function FloatingComboboxCore({
                   id={comboboxOptionId(id, createOptionIndex)}
                   selected={false}
                   active={createOptionIndex === activeIndex}
-                  size={knobProps.sizeToken}
+                  height={knobProps.control.height}
                   data-combobox-index={createOptionIndex}
                   data-active={createOptionIndex === activeIndex}
                   {...listItemRingProps(createOptionIndex === activeIndex && listKeyboardRing)}
@@ -1736,7 +1735,7 @@ const comboboxSearchHeader = (
     alignItems="center"
     gap="$2"
     paddingHorizontal="$3"
-    height={knobProps.sizeToken}
+    height={knobProps.control.height}
     borderBottomWidth={1}
     borderBottomColor={formCommonColors.divider}
   >
@@ -2169,8 +2168,8 @@ function NativeComboboxCore({
                 data-active={active}
                 {...listItemRingProps(active && listKeyboardRing)}
                 {...(option.description
-                  ? { minHeight: knobProps.sizeToken, paddingVertical: "$2" }
-                  : { height: knobProps.sizeToken })}
+                  ? { minHeight: knobProps.control.height, paddingVertical: "$2" }
+                  : { height: knobProps.control.height })}
                 onPress={isWeb ? () => handleSelect(option) : undefined}
                 onMouseEnter={() => {
                   setKeyboardNav(false);
@@ -2262,7 +2261,7 @@ function NativeComboboxCore({
               alignItems="center"
               gap="$2"
               paddingHorizontal="$3"
-              height={knobProps.sizeToken}
+              height={knobProps.control.height}
               role="option"
               id={comboboxOptionId(id, createOptionIndex)}
               data-combobox-index={createOptionIndex}
@@ -2307,7 +2306,7 @@ function NativeComboboxCore({
           alignItems="center"
           gap="$2"
           paddingHorizontal="$3"
-          height={knobProps.sizeToken}
+          height={knobProps.control.height}
           role="option"
           id={comboboxOptionId(id, createOptionIndex)}
           data-combobox-index={createOptionIndex}
@@ -2395,9 +2394,10 @@ function NativeComboboxCore({
       // paint — it would ghost around the panel's corners. A multi-select
       // panel attaches below instead (MPO-38), so it keeps its ring.
       suppressFocusRing={open && !multiple}
+      {...pickerTriggerContract(knobProps.control.height)}
       {...(inTableCell
-        ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-          { minHeight: 44 }
+        ? // Chromeless in cells.
+          {}
         : {
             borderRadius: knobProps.borderRadius.borderRadius,
             borderWidth: knobProps.borderRadius.borderWidth,
@@ -2424,9 +2424,9 @@ function NativeComboboxCore({
             tabIndex: disabled ? -1 : 0,
           }
         : { importantForAccessibility: "no" as const })}
-      // Web: trigger owns toggle. Native: FloatingPanel.native owns open
-      // (avoid double-toggle that batches open then immediately closed).
-      onPress={isWeb && !disabled ? () => handleOpenChange(!open) : undefined}
+      // Sheet capture opens first on web, so this opener is idempotent.
+      // Native delegates the gesture to FloatingPanel.
+      onPress={isWeb && !disabled ? () => handleOpenChange(true) : undefined}
       onKeyDown={(e: React.KeyboardEvent) => {
         if (
           ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
@@ -2471,6 +2471,7 @@ function NativeComboboxCore({
           </View>
         ) : (
           <Text
+            {...knobProps.controlType}
             fontFamily={knobProps.body.fontFamily}
             fontWeight={knobProps.body.fontWeight}
             color={
@@ -2484,24 +2485,6 @@ function NativeComboboxCore({
           </Text>
         )}
       </View>
-      {clearable && !multiple && !disabled && typeof value === "string" && value !== "" && (
-        <View
-          paddingInlineEnd="$1"
-          alignSelf="center"
-          cursor="pointer"
-          role="button"
-          tabIndex={-1}
-          aria-label={t("Clear")}
-          opacity={0.6}
-          hoverStyle={{ opacity: 1 }}
-          onPress={(e: any) => {
-            e.stopPropagation?.();
-            onValueChange?.("");
-          }}
-        >
-          <XIcon size={14} />
-        </View>
-      )}
       <View paddingInlineEnd="$2" alignSelf="center">
         <CaretDownIcon size={16} color={glyphColor} />
       </View>
@@ -2523,6 +2506,19 @@ function NativeComboboxCore({
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}
       trigger={triggerContent}
+      triggerEnd={
+        clearable && !multiple && !disabled && typeof value === "string" && value !== "" ? (
+          <Button
+            size={knobProps.sizeToken}
+            chromeless
+            minWidth={44}
+            minHeight={44}
+            aria-label={t("Clear")}
+            icon={<XIcon size={14} />}
+            onPress={() => onValueChange?.("")}
+          />
+        ) : undefined
+      }
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,