@multiplatform.one/forms 7.66.0 → 7.67.0

package/src/FloatingPanel/index.native.tsx

@@ -55,6 +55,11 @@
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
  * as web does at ≤640.
+ *
+ * Regular width (FZ-8116, LC-266): on an iPad or any window wider than
+ * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
+ * field the way the web float does (LC-105, LC-112), sized by `widthMode`;
+ * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
  */
 
 import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
@@ -83,27 +88,25 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import {
-  OVERLAY_BREAKPOINT,
-  Surface,
-  useResolvedKnobs,
-  motionDurationMs,
-} from "@multiplatform.one/theme";
+import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
+import { overlaySizeClass } from "../shared/overlaySizeClass";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { resolveCompactFace } from "./compactFace";
+import { menuMinWidth, resolveCompactFace } from "./compactFace";
 import {
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   type PanelBounds,
   type PanelPoint,
   type TriggerRect,
 } from "./pointAnchor";
-import { panelViewportPadding } from "./useFloatingPanel";
+import { RegularPanel } from "./RegularPanel";
+import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
@@ -160,6 +163,9 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   anchorMode,
+  sheet,
+  widthMode,
+  fitContent,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
@@ -202,15 +208,18 @@ export function FloatingPanel({
     [disabled, onOpenChange],
   );
   const isContextMenu = openOn === "contextmenu";
-  const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
+  const regular = overlaySizeClass(windowWidth) === "regular";
+  const atPoint = isContextMenu && pressPoint !== null && regular;
   const insideOverlay = useInsideOverlay();
   const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
+  const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
   // The trigger's window rect, read each time the menu opens: it may have
   // moved (a scrolled sheet) since the last open.
   useLayoutEffect(() => {
-    if (!asMenu || !open) {
+    if (!anchored || !open) {
       setAnchor(null);
       return;
     }
@@ -230,7 +239,7 @@ export function FloatingPanel({
     return () => {
       live = false;
     };
-  }, [asMenu, open]);
+  }, [anchored, open]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -582,11 +591,8 @@ export function FloatingPanel({
             <TriggerMenuPanel
               // An attached menu (an icon trigger, no echo row) opens under its
               // trigger instead of over it, the UIMenu pull-down (LC-262).
-              anchor={
-                anchor && anchorMode === "attach"
-                  ? { ...anchor, y: anchor.y + anchor.height }
-                  : anchor
-              }
+              anchor={anchor}
+              attach={anchorMode === "attach"}
               bounds={{
                 top: topInset + panelViewportPadding,
                 left: (safeArea?.left ?? 0) + panelViewportPadding,
@@ -627,6 +633,32 @@ export function FloatingPanel({
               {header}
               {children}
             </PointPanel>
+          ) : asRegular ? (
+            <RegularPanel
+              anchor={anchor}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              widthMode={resolvePanelWidthMode(widthMode, fitContent)}
+              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echoLabel={triggerA11y?.label}
+              header={header}
+              scrollable={!!scrollable}
+              fill={!!sheetFill}
+              scrollViewProps={scrollViewProps}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onClose={close}
+            >
+              {children}
+            </RegularPanel>
           ) : (
             /*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the
@@ -732,6 +764,7 @@ export function FloatingPanel({
  */
 function TriggerMenuPanel({
   anchor,
+  attach = false,
   bounds,
   echo,
   echoLabel,
@@ -742,6 +775,7 @@ function TriggerMenuPanel({
   children,
 }: {
   anchor: TriggerRect | null;
+  attach?: boolean;
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
@@ -755,7 +789,7 @@ function TriggerMenuPanel({
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const placement =
     anchor && size
-      ? placeOverTrigger({
+      ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: anchor,
           width: size.width,
           height: size.height,
@@ -782,36 +816,47 @@ function TriggerMenuPanel({
           position: "absolute",
           left: placement?.left ?? bounds.left,
           top: placement?.top ?? bounds.top,
-          minWidth: anchor?.width ?? 0,
+          minWidth: menuMinWidth(anchor?.width ?? 0, bounds.right - bounds.left),
           maxWidth: bounds.right - bounds.left,
           maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
           opacity: placement ? 1 : 0,
         }}
       >
         <YStack
+          testID="floating-panel-menu-surface"
           {...knobProps.elevatedSurface}
           flexShrink={1}
           minHeight={0}
-          overflow="hidden"
           onAccessibilityEscape={onClose}
         >
-          {echo != null && anchor && anchor.height > 0 ? (
-            <Pressable
-              testID="floating-panel-menu-echo"
-              onPress={onClose}
-              accessibilityRole="button"
-              {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
-              aria-expanded
-              style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+          <YStack
+            testID="floating-panel-menu-clip"
+            borderRadius={knobProps.elevatedSurface.borderRadius}
+            overflow="hidden"
+            flexShrink={1}
+            minHeight={0}
+          >
+            {echo != null && anchor && anchor.height > 0 ? (
+              <Pressable
+                testID="floating-panel-menu-echo"
+                onPress={onClose}
+                accessibilityRole="button"
+                {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+                aria-expanded
+                style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+              >
+                <RNView pointerEvents="none">{echo}</RNView>
+              </Pressable>
+            ) : null}
+            <RNScrollView
+              style={{ flexGrow: 0, flexShrink: 1 }}
+              keyboardShouldPersistTaps="handled"
             >
-              <RNView pointerEvents="none">{echo}</RNView>
-            </Pressable>
-          ) : null}
-          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
-            <YStack padding={framePadding} gap={frameGap}>
-              {children}
-            </YStack>
-          </RNScrollView>
+              <YStack padding={framePadding} gap={frameGap}>
+                {children}
+              </YStack>
+            </RNScrollView>
+          </YStack>
         </YStack>
       </RNView>
     </RNView>

package/src/FloatingPanel/index.tsx

@@ -32,6 +32,7 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
+import { fixedContainingBlockOrigin } from "./containingBlock";
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -246,39 +247,6 @@ function useKeyboardFocusIntoPanel(
   }, [open, frameRef, keyboardOpenRef]);
 }
 
-/**
- * Viewport origin of the box a `position: fixed` panel is laid out against.
- * The top/left math is in viewport coordinates, which is only right while that
- * box is the viewport. An ancestor with a transform, filter, perspective,
- * paint containment or container query becomes the containing block instead.
- * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
- * transformed dialog still lays out against that dialog. A `display: contents`
- * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
- */
-function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
-  for (let node = element.parentElement; node; node = node.parentElement) {
-    const cs = getComputedStyle(node);
-    if (cs.display === "contents") continue;
-    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
-    const captures =
-      set(cs.transform, "none") ||
-      set(cs.perspective, "none") ||
-      set(cs.filter, "none") ||
-      set(cs.backdropFilter, "none") ||
-      set(cs.containerType, "normal") ||
-      /transform|perspective|filter/.test(cs.willChange) ||
-      /paint|layout|strict|content/.test(cs.contain);
-    if (captures) {
-      const rect = node.getBoundingClientRect();
-      return {
-        top: rect.top + node.clientTop - node.scrollTop,
-        left: rect.left + node.clientLeft - node.scrollLeft,
-      };
-    }
-  }
-  return { top: 0, left: 0 };
-}
-
 function isRtl(element?: HTMLElement | null): boolean {
   if (!isWeb || typeof document === "undefined") return false;
   const direction = element ? getComputedStyle(element).direction : "";

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   contextMenuPoint,
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   pointOpensUp,
   pointPanelLeft,
@@ -219,3 +220,31 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
     expect(placed.left).toBe(10);
   });
 });
+
+describe("placeBesideTrigger (FZ-7830 round 3, LC-262: beside the trigger, never over it)", () => {
+  const phone: PanelBounds = { top: 57, left: 10, right: 380, bottom: 800 };
+  const field = { x: 16, y: 300, width: 358, height: 44 };
+
+  it("opens under the trigger when it fits", () => {
+    const placed = placeBesideTrigger({ trigger: field, width: 200, height: 180, bounds: phone });
+    expect(placed).toEqual({ left: 16, top: 344, width: 358, maxHeight: 180, shifted: false });
+  });
+
+  it("opens above the trigger when there is more room there, its bottom on the trigger's top", () => {
+    const low = { ...field, y: 700 };
+    const placed = placeBesideTrigger({ trigger: low, width: 200, height: 220, bounds: phone });
+    expect(placed.top + placed.maxHeight).toBe(700);
+    expect(placed.maxHeight).toBe(220);
+  });
+
+  it("never overlaps the trigger, scrolling what does not fit", () => {
+    for (const y of [60, 300, 500, 740]) {
+      const trigger = { ...field, y };
+      const placed = placeBesideTrigger({ trigger, width: 200, height: 2000, bounds: phone });
+      const overlaps = placed.top < y + field.height && placed.top + placed.maxHeight > y;
+      expect(overlaps, `trigger at ${y}`).toBe(false);
+      expect(placed.top).toBeGreaterThanOrEqual(phone.top);
+      expect(placed.top + placed.maxHeight).toBeLessThanOrEqual(phone.bottom);
+    }
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -172,3 +172,33 @@ export function placeOverTrigger({
     shifted: left !== wantLeft || top !== trigger.y,
   };
 }
+
+/**
+ * A menu attached to its trigger (an icon trigger, or a short list inside a
+ * sheet, LC-262): under the trigger when it fits, above it when that side has
+ * more room, and never over it. What still does not fit scrolls.
+ */
+export function placeBesideTrigger({
+  trigger,
+  width,
+  height,
+  bounds,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  rtl?: boolean;
+}): TriggerPlacement {
+  const room = Math.max(0, bounds.right - bounds.left);
+  const w = Math.min(Math.max(width, trigger.width), room);
+  const wantLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
+  const left = Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  const below = Math.max(0, bounds.bottom - (trigger.y + trigger.height));
+  const above = Math.max(0, trigger.y - bounds.top);
+  const opensUp = height > below && above > below;
+  const maxHeight = Math.min(height, opensUp ? above : below);
+  const top = opensUp ? trigger.y - maxHeight : trigger.y + trigger.height;
+  return { left, top, width: w, maxHeight, shifted: left !== wantLeft || opensUp };
+}

package/src/FloatingPanel/regularPlacement.spec.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { placeRegularPanel } from "./regularPlacement";
+
+const bounds = { top: 20, left: 12, right: 808, bottom: 1160 };
+const trigger = { x: 40, y: 300, width: 360, height: 44 };
+
+describe("placeRegularPanel (FZ-8116)", () => {
+  it("covers the field from its top start corner (LC-105)", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 200,
+      height: 240,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p).toMatchObject({ left: 40, top: 300, width: 360, shifted: false });
+  });
+
+  it("is the field's width for match-trigger even when the content is wider", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 500,
+      height: 240,
+      bounds,
+      widthMode: "match-trigger",
+    });
+    expect(p.width).toBe(360);
+  });
+
+  it("is the content's width for fit-content", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+    });
+    expect(p).toMatchObject({ left: 40, width: 300 });
+  });
+
+  it("hangs a fit-content panel from the field's end edge in RTL", () => {
+    const p = placeRegularPanel({
+      trigger,
+      width: 300,
+      height: 320,
+      bounds,
+      widthMode: "fit-content",
+      rtl: true,
+    });
+    expect(p.left).toBe(40 + 360 - 300);
+  });
+
+  it("slides up inside the bounds near the bottom of the window", () => {
+    const low = { ...trigger, y: 1080 };
+    const p = placeRegularPanel({
+      trigger: low,
+      width: 360,
+      height: 300,
+      bounds,
+      widthMode: "at-least-trigger",
+    });
+    expect(p.top + 300).toBeLessThanOrEqual(bounds.bottom);
+    expect(p.shifted).toBe(true);
+  });
+});

package/src/FloatingPanel/regularPlacement.ts

@@ -0,0 +1,40 @@
+import {
+  placeOverTrigger,
+  type PanelBounds,
+  type TriggerPlacement,
+  type TriggerRect,
+} from "./pointAnchor";
+import type { PanelWidthMode } from "./useFloatingPanel";
+
+/** Height of a regular-width panel whose list fills it (`sheetFill`): a search list. */
+export const regularFillHeight = 480;
+
+/**
+ * Where a FloatingPanel opens at regular width (FZ-8116): over its field, the
+ * web float's cover-trigger placement (LC-105), at the width its `widthMode`
+ * declares. `at-least-trigger` is never narrower than the field,
+ * `match-trigger` is the field's width, `fit-content` is the content's own
+ * width from the field's start edge.
+ */
+export function placeRegularPanel({
+  trigger,
+  width,
+  height,
+  bounds,
+  widthMode,
+  rtl = false,
+}: {
+  trigger: TriggerRect;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  widthMode: PanelWidthMode;
+  rtl?: boolean;
+}): TriggerPlacement {
+  if (widthMode === "at-least-trigger") {
+    return placeOverTrigger({ trigger, width, height, bounds, rtl });
+  }
+  const w = widthMode === "match-trigger" ? trigger.width : width;
+  const box = { ...trigger, x: rtl ? trigger.x + trigger.width - w : trigger.x, width: w };
+  return placeOverTrigger({ trigger: box, width: w, height, bounds, rtl });
+}

package/src/fields/Combobox/Combobox.regularWidth.native.spec.tsx

@@ -0,0 +1,94 @@
+/**
+ * FZ-8116 (LC-266): on native the Link picker (Combobox) takes the window's
+ * size class like Select and ColorPicker do. At regular width (an iPad) it
+ * opens over its field with its search inside; at compact width (iPhone,
+ * Slide Over) it keeps the bottom sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { authorOptions } from "./authorOptions";
+import { Combobox } from "./index";
+
+const screen = vi.hoisted(() => ({ width: 820, height: 1180 }));
+const sheetProps = vi.hoisted(() => [] as unknown[]);
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+    visible ? children : null,
+  useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+}));
+vi.mock("../../FloatingPanel", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../FloatingPanel")>();
+  const native = await import("../../FloatingPanel/index.native");
+  return {
+    ...actual,
+    FloatingPanel: (props: Parameters<typeof native.FloatingPanel>[0]) => {
+      sheetProps.push(props.sheet);
+      return <native.FloatingPanel {...props} />;
+    },
+  };
+});
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  sheetProps.length = 0;
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  screen.width = 820;
+  screen.height = 1180;
+});
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+function open() {
+  const view = renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+  tap(view.getByRole("button", { name: "Author" }));
+  return view;
+}
+
+const regular = () => document.querySelector('[data-testid="floating-panel-regular"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+
+describe("Combobox native at regular width (FZ-8116)", () => {
+  it("leaves the overlay form to the size class instead of forcing the sheet", () => {
+    renderWithProviders(<Combobox options={authorOptions} aria-label="Author" />);
+    expect(sheetProps.length).toBeGreaterThan(0);
+    expect(sheetProps.every((value) => value !== true)).toBe(true);
+  });
+
+  it("opens over its field on an iPad-wide window", () => {
+    open();
+    expect(regular()).not.toBeNull();
+    expect(sheet()).toBeNull();
+  });
+
+  it.each([
+    ["an iPhone", 390, 844],
+    ["iPad Slide Over", 320, 1180],
+  ])("keeps the bottom sheet on %s", (_name, width, height) => {
+    screen.width = width;
+    screen.height = height;
+    open();
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+});

package/src/fields/Combobox/index.tsx

@@ -2509,7 +2509,9 @@ function NativeComboboxCore({
     <FloatingPanel
       open={open}
       onOpenChange={handleOpenChange}
-      sheet
+      // Native leaves the form to the window's size class (FZ-8116): a sheet
+      // when compact, a panel over the field at regular width.
+      sheet={isWeb}
       // Search-driven comboboxes open the sheet tall: results stream in as
       // the user types, so a content-fit sheet would open as a sliver.
       sheetFill={Boolean(onSearch)}

package/src/fields/Input/Input.formName.spec.tsx

@@ -0,0 +1,53 @@
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Theme } from "tamagui";
+import { Input } from "./index";
+
+function SignIn({ scheme }: { scheme: "light" | "dark" }) {
+  return (
+    <Theme name={scheme}>
+      <form id="sign-in" action="/login" method="post">
+        <Input id="username" name="username" label="Username" labelHidden />
+        <Input id="password" name="password" label="Password" labelHidden secureTextEntry />
+        <input type="hidden" name="credentialId" value="" />
+      </form>
+    </Theme>
+  );
+}
+
+const field = (container: HTMLElement, id: string) =>
+  container.querySelector<HTMLInputElement>(`input#${id}`)!;
+
+describe("Input posts under its name in a native form (FZ-8159)", () => {
+  it("keeps name through typing and a scheme change, so FormData carries both fields", async () => {
+    const user = userEvent.setup();
+    const view = renderWithProviders(<SignIn scheme="light" />);
+    const username = field(view.container, "username");
+    const password = field(view.container, "password");
+
+    await user.type(username, "ash");
+    await user.type(password, "pikachu");
+    expect(username.getAttribute("name")).toBe("username");
+    expect(password.getAttribute("name")).toBe("password");
+
+    view.rerender(<SignIn scheme="dark" />);
+    await user.type(field(view.container, "username"), "!");
+
+    const form = view.container.querySelector<HTMLFormElement>("form#sign-in")!;
+    const posted = new FormData(form);
+    expect(posted.get("username")).toBe("ash!");
+    expect(posted.get("password")).toBe("pikachu");
+    expect(posted.get("credentialId")).toBe("");
+  });
+
+  it("a read-only field still posts under its name", () => {
+    const view = renderWithProviders(
+      <form>
+        <Input id="realm" name="realm" label="Realm" readOnly value="pokemon" />
+      </form>,
+    );
+    const posted = new FormData(view.container.querySelector("form")!);
+    expect(posted.get("realm")).toBe("pokemon");
+  });
+});

package/src/fields/Input/index.tsx

@@ -11,7 +11,7 @@ import type {
   SizeTokens,
   TamaguiElement,
 } from "tamagui";
-import { Text } from "tamagui";
+import { Text, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -241,6 +241,9 @@ export function Input({
 
   const areaName =
     visibleLabel || !resolvedAriaLabel ? undefined : { "aria-label": resolvedAriaLabel };
+  // A native <form> posts the field under its name, and React DOM drops a
+  // `name` it doesn't own on every update, so the Area carries it as a prop.
+  const domName = isWeb && name ? { name } : undefined;
 
   const handleCopy = useCallback(
     async (text: string) => {
@@ -332,6 +335,7 @@ export function Input({
               value={inputValue ?? ""}
               readOnly
               id={id}
+              {...domName}
               aria-readonly="true"
               aria-required={required || undefined}
               aria-invalid={hasError || undefined}
@@ -364,6 +368,7 @@ export function Input({
             {...(placeholder !== undefined ? { placeholder } : undefined)}
             disabled={disabled}
             id={id}
+            {...domName}
             {...(handleChange || value !== undefined
               ? { value: inputValue ?? "" }
               : { defaultValue: inputValue })}

package/src/fields/Select/InlineChoices.tsx

@@ -55,6 +55,7 @@ export function InlineChoices({
   const textColor = knobProps.textAccentColor;
   const selectedIndex = options.findIndex((option) => option.value === value);
   const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+  const glyphed = options.some((option) => option.icon != null);
 
   const choose = (index: number) => {
     const option = options[index];
@@ -85,9 +86,11 @@ export function InlineChoices({
       borderColor={formCommonColors.divider}
       pointerEvents="none"
     >
-      <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
-        <IconSlot icon={option.icon} color={textColor} />
-      </View>
+      {glyphed ? (
+        <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+          <IconSlot icon={option.icon} color={textColor} />
+        </View>
+      ) : null}
       <Text
         fontFamily={knobProps.body.fontFamily}
         fontWeight={knobProps.body.fontWeight}