@multiplatform.one/forms 6.7.0 → 7.1.0

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -60,8 +60,70 @@ describe("FileUpload", () => {
 
   it("keeps an aria-label fallback on the dropzone when no label is given", () => {
     const result = renderWithProviders(<FileUpload name="attachment" />);
-    const dropzone = result.container.querySelector('[role="button"]') as HTMLElement | null;
+    const dropzone = result.container.querySelector(
+      '[data-file-upload="dropzone"]',
+    ) as HTMLElement | null;
     expect(dropzone?.getAttribute("aria-label")).toBeTruthy();
     expect(dropzone?.getAttribute("aria-labelledby")).toBeNull();
   });
+
+  it("paints the house ring on keyboard focus and suppresses the UA outline on pointer focus", () => {
+    const result = renderWithProviders(<FileUpload label="Attachment" name="attachment" />);
+    const dropzone = result.container.querySelector(
+      '[data-file-upload="dropzone"]',
+    ) as HTMLElement | null;
+    expect(dropzone).toBeTruthy();
+
+    fireEvent.pointerDown(document.body);
+    fireEvent.focus(dropzone as HTMLElement);
+    expect(dropzone?.getAttribute("data-kb-ring")).toBeNull();
+
+    fireEvent.blur(dropzone as HTMLElement);
+    fireEvent.keyDown(document.body, { key: "Tab", code: "Tab" });
+    fireEvent.focus(dropzone as HTMLElement);
+    expect(dropzone?.getAttribute("data-kb-ring")).toBe("true");
+  });
+
+  it("keeps Choose File out of the tab order so the dropzone is the one stop", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Attachment" name="attachment" buttonText="Pick file" />,
+    );
+    const pick = result.findTextElement("Pick file");
+    const pickControl = pick?.closest('[role="button"]') as HTMLElement | null;
+    expect(pickControl?.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("shows a drop overlay on drag enter without changing the dropzone border width", () => {
+    const result = renderWithProviders(<FileUpload label="Attachment" name="attachment" />);
+    const dropzone = result.container.querySelector(
+      '[data-file-upload="dropzone"]',
+    ) as HTMLElement | null;
+    expect(dropzone).toBeTruthy();
+    const restWidth = getComputedStyle(dropzone as HTMLElement).borderTopWidth;
+
+    fireEvent.dragEnter(dropzone as HTMLElement, {
+      dataTransfer: { files: [], types: ["Files"] },
+    });
+
+    expect(dropzone?.getAttribute("data-drag-over")).toBe("true");
+    expect(result.container.querySelector('[data-file-upload="overlay"]')).toBeTruthy();
+    expect(result.findTextElement("Drop a file to upload")).toBeDefined();
+    expect(getComputedStyle(dropzone as HTMLElement).borderTopWidth).toBe(restWidth);
+  });
+
+  it("keeps per-file remove in the tab order after a file is chosen", async () => {
+    const result = renderWithProviders(<FileUpload label="Attachment" name="attachment" />);
+    const input = result.container.querySelector("input[type='file']") as HTMLInputElement | null;
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" });
+    await act(async () => {
+      if (input) fireEvent.change(input, { target: { files: [file] } });
+    });
+
+    const dropzone = result.container.querySelector('[data-file-upload="dropzone"]') as HTMLElement;
+    const nested = Array.from(dropzone.querySelectorAll('[role="button"]')).filter(
+      (el) => el !== dropzone,
+    );
+    const removeStops = nested.filter((el) => el.getAttribute("tabindex") !== "-1");
+    expect(removeStops.length).toBeGreaterThan(0);
+  });
 });

package/src/fields/FileUpload/index.tsx

@@ -15,6 +15,11 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 import type { FormFieldProps } from "../../fieldLayout";
+import {
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
@@ -54,16 +59,24 @@ export type FileUploadProps<
     onValueChange?: (value: TData) => void;
     /** When true, renders a skeleton placeholder instead of the file upload */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
     compact?: boolean;
   };
 
 const UploadAreaFrame = styled(YStack, {
   width: "100%",
+  position: "relative",
   overflow: "hidden",
   borderStyle: "dashed",
   backgroundColor: formInputColors.background.base,
   borderColor: formInputColors.border.base,
+  // LC-71: kill UA :focus-visible on the dropzone. House ring is painted
+  // only on keyboard-origin focus via wasKeyboardFocus() below — never the
+  // 1px browser outline (forms-fileupload--standalone audit Cluster C).
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+  focusStyle: { outlineWidth: 0, outlineStyle: "none" as any },
+  focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as any },
   variants: {
     outlined: {
       true: {
@@ -73,6 +86,21 @@ const UploadAreaFrame = styled(YStack, {
   } as const,
 });
 
+const DropOverlayFrame = styled(YStack, {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  zIndex: 2,
+  backgroundColor: formInputColors.background.focus,
+  borderStyle: "solid",
+  borderColor: formInputColors.border.focus,
+});
+
 const UploadFileListFrame = styled(YStack, {
   width: "100%",
   borderTopWidth: 1,
@@ -94,7 +122,7 @@ export function FileUpload<
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = t("Drag a file into this area"),
+    placeholder = t("or drag and drop"),
     buttonText = t("Choose File"),
     onFileSelect,
     onFileRemove,
@@ -117,6 +145,8 @@ export function FileUpload<
     id: idProp,
     compact,
   });
+  if (isWeb) ensureKeyboardModalityTracking();
+  const [kbZoneFocus, setKbZoneFocus] = useState(false);
   // Canonical `onChange` and the alias `onValueChange` both fire once per
   // change through the internal handler chain (same reconciliation as Switch).
   const emitChange = useCallback(
@@ -140,13 +170,28 @@ export function FileUpload<
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState<string | undefined>();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const zoneCleanupRef = useRef<(() => void) | null>(null);
+  const lastZoneInputWasKeyboardRef = useRef(false);
   const previewUrlsRef = useRef(new Map<File, string>());
 
   useEffect(() => {
     if (!isWeb) return;
+    ensureKeyboardModalityTracking();
+    const onKey = () => {
+      lastZoneInputWasKeyboardRef.current = true;
+    };
+    const onPointer = () => {
+      lastZoneInputWasKeyboardRef.current = false;
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
     return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
       previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
       previewUrlsRef.current.clear();
+      zoneCleanupRef.current?.();
+      zoneCleanupRef.current = null;
     };
   }, []);
 
@@ -328,6 +373,33 @@ export function FileUpload<
     [openFileDialog],
   );
 
+  const paintZoneRing = useCallback(() => {
+    if (lastZoneInputWasKeyboardRef.current || wasKeyboardFocus()) setKbZoneFocus(true);
+  }, []);
+
+  const bindZoneNode = useCallback(
+    (node: HTMLElement | null) => {
+      zoneCleanupRef.current?.();
+      zoneCleanupRef.current = null;
+      if (!node || !isWeb) return;
+      const onFocus = () => paintZoneRing();
+      const onBlur = () => setKbZoneFocus(false);
+      node.addEventListener("focus", onFocus);
+      node.addEventListener("blur", onBlur);
+      zoneCleanupRef.current = () => {
+        node.removeEventListener("focus", onFocus);
+        node.removeEventListener("blur", onBlur);
+      };
+    },
+    [paintZoneRing],
+  );
+
+  const handleZoneFocus = paintZoneRing;
+
+  const handleZoneBlur = useCallback(() => {
+    setKbZoneFocus(false);
+  }, []);
+
   const getFilePreview = useCallback((file: File) => {
     if (!isWeb) return null;
     if (file.type.startsWith("image/")) {
@@ -401,26 +473,43 @@ export function FileUpload<
         // so the rendered `<label htmlFor>` resolves (family pattern — see
         // Barcode / ColorPicker for other non-native-input controls).
         id={id}
+        ref={bindZoneNode as any}
+        data-file-upload="dropzone"
+        data-drag-over={isDragOver && canInteract && dragDrop ? "true" : undefined}
+        data-kb-ring={kbZoneFocus ? "true" : undefined}
         outlined={knobProps.outlined}
         // LC-40: text-bearing chrome — surface wash, not an opacity dim
         // (a dim here stacks with the inner Button's treatment).
         {...(disabled ? disabledState.surfaceKnobProps : undefined)}
         borderRadius={cappedRadius}
-        // Intentional: extract borderWidth from knobProps.borderRadius fragment
-        // to conditionally override with drag-over state (2px) vs knob value.
-        borderWidth={isDragOver && canInteract ? 2 : (knobProps.borderRadius.borderWidth ?? 1)}
+        // Keep width stable on drag (Polaris overlay, not a 1→2 layout shift).
+        borderWidth={knobProps.borderRadius.borderWidth ?? 1}
         {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
-        {...(isDragOver && canInteract ? { borderColor: formCommonColors.text } : undefined)}
         elevation={knobProps.elevation}
         transition={knobProps.transition}
         aria-required={fieldProps.required || undefined}
         aria-invalid={!!errorProp || undefined}
         aria-readonly={readOnly || undefined}
+        aria-disabled={disabled || undefined}
+        // Inset: overflow:hidden on this frame would clip an outer ring (LC-71).
+        {...(kbZoneFocus ? ensureFocusVisibleRing({ outlineOffset: -2 }) : undefined)}
+        hoverStyle={
+          canInteract
+            ? {
+                borderColor: errorProp ? formCommonColors.error : formInputColors.border.hover,
+                ...(knobProps.outlined
+                  ? undefined
+                  : { backgroundColor: formInputColors.background.focus }),
+              }
+            : undefined
+        }
         {...(canInteract
           ? ({
               // DROPZONE-FULL-TARGET: the entire surface is the click target.
               role: "button",
               tabIndex: 0,
+              onFocus: handleZoneFocus,
+              onBlur: handleZoneBlur,
               // Labeled fields get aria-labelledby auto-wired by the
               // FieldLayout Label (tamagui Label htmlFor → this id); the
               // aria-label fallback covers label-less usage.
@@ -435,9 +524,46 @@ export function FileUpload<
               cursor: "pointer",
               onClick: handleZoneClick,
               onKeyDown: handleZoneKeyDown,
+              ...(dragDrop
+                ? {
+                    onDragEnter: handleDragEnter,
+                    onDragOver: handleDragOver,
+                    onDragLeave: handleDragLeave,
+                    onDrop: (e: DragEvent) => {
+                      handleDrop(e, onValueChange);
+                      onBlurHandler?.();
+                    },
+                  }
+                : null),
             } as any)
-          : {})}
+          : { cursor: disabled ? "not-allowed" : undefined })}
       >
+        {isDragOver && canInteract && dragDrop ? (
+          <DropOverlayFrame
+            data-file-upload="overlay"
+            borderRadius={cappedRadius}
+            borderWidth={knobProps.borderRadius.borderWidth ?? 1}
+            {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
+            {...knobProps.gap}
+            {...knobProps.panelPadding}
+          >
+            <XStack
+              width={compact ? 24 : 32}
+              height={compact ? 24 : 32}
+              alignItems="center"
+              justifyContent="center"
+              // `color` tints the phosphor glyph via currentColor; Tamagui applies
+              // it on web Stacks though the RN-flavored View type omits it.
+              {...({ color: formCommonColors.text } as Record<string, unknown>)}
+            >
+              <UploadIcon size={compact ? 24 : 32} aria-hidden />
+            </XStack>
+            <Text color={formCommonColors.text} textAlign="center" {...knobProps.body}>
+              {multiple ? t("Drop files to upload") : t("Drop a file to upload")}
+            </Text>
+          </DropOverlayFrame>
+        ) : null}
+
         <YStack
           {...knobProps.panelPadding}
           minHeight={getFieldHeight((fieldProps.size || knobProps.sizeToken) as SizeTokens, 5)}
@@ -445,22 +571,27 @@ export function FileUpload<
           alignItems="center"
           justifyContent="center"
           {...knobProps.gap}
-          {...(canInteract
-            ? ({
-                onDragEnter: handleDragEnter,
-                onDragOver: handleDragOver,
-                onDragLeave: handleDragLeave,
-                onDrop: (e: DragEvent) => {
-                  handleDrop(e, onValueChange);
-                  onBlurHandler?.();
-                },
-              } as any)
-            : {})}
         >
-          <Button onPress={openFileDialog} disabled={!canInteract} size={knobProps.sizeToken}>
-            <Button.Icon>
-              <UploadIcon />
-            </Button.Icon>
+          {selectedFiles.length === 0 ? (
+            <XStack
+              width={compact ? 24 : 32}
+              height={compact ? 24 : 32}
+              alignItems="center"
+              justifyContent="center"
+              // `color` tints the phosphor glyph via currentColor; Tamagui applies
+              // it on web Stacks though the RN-flavored View type omits it.
+              {...({ color: formCommonColors.muted } as Record<string, unknown>)}
+            >
+              <UploadIcon size={compact ? 24 : 32} aria-hidden />
+            </XStack>
+          ) : null}
+
+          <Button
+            onPress={openFileDialog}
+            disabled={!canInteract}
+            size={knobProps.sizeToken}
+            tabIndex={-1}
+          >
             <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
           </Button>
 
@@ -475,6 +606,7 @@ export function FileUpload<
             type="file"
             accept={accept}
             multiple={multiple}
+            tabIndex={-1}
             onChange={(e) => {
               handleFileSelect(e.target.files, onValueChange, e.target.files);
               onBlurHandler?.();
@@ -505,13 +637,18 @@ export function FileUpload<
                         // onto the DOM <img> as source="[object Object]" on web
                         src={preview}
                         alt={file.name}
-                        width={32}
-                        height={32}
+                        width={compact ? 24 : 32}
+                        height={compact ? 24 : 32}
                         objectFit="cover"
                       />
                     ) : (
-                      <XStack width={20} height={20} justifyContent="center" alignItems="center">
-                        <FileIcon size={16} />
+                      <XStack
+                        width={compact ? 24 : 32}
+                        height={compact ? 24 : 32}
+                        justifyContent="center"
+                        alignItems="center"
+                      >
+                        <FileIcon size={compact ? 14 : 16} />
                       </XStack>
                     )}
                     <YStack flex={1} gap="$1">
@@ -528,7 +665,6 @@ export function FileUpload<
                     <Button
                       circular
                       size={knobProps.sizeToken}
-                      tabIndex={-1}
                       onPress={(e) => {
                         e.stopPropagation();
                         handleFileRemove(file, onValueChange);

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -53,6 +53,84 @@ describe("Geolocation", () => {
       expect(result.container.querySelector("[aria-label='Locate']")).not.toBeNull();
     });
 
+    it("empty value does not paint Null Island coordinates", () => {
+      const result = renderWithProviders(<Geolocation label="Location" />);
+      expect(result.container.textContent).not.toContain("0.0000, 0.0000");
+      expect(result.container.textContent).toContain("Set location");
+    });
+
+    it("LC-71: map frame is the keyboard stop; pick layer is not a tab stop", () => {
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          value={JSON.stringify({ lat: 1, lng: 2 })}
+          locationIcon={locationIcon}
+        />,
+      );
+      const map = result.container.querySelector("[data-testid='geolocation-map']");
+      const pick = result.container.querySelector("[data-testid='geolocation-map-pick']");
+      expect(map?.getAttribute("tabindex")).toBe("0");
+      expect(pick?.getAttribute("tabindex")).toBeNull();
+      expect(result.container.querySelector("iframe")).toBeNull();
+    });
+
+    it("clicking the map pick layer commits a coordinate", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          value={JSON.stringify({ lat: 0, lng: 0 })}
+          onChange={onChange}
+          locationIcon={locationIcon}
+        />,
+      );
+      const pick = result.container.querySelector(
+        "[data-testid='geolocation-map-pick']",
+      ) as HTMLElement;
+      expect(pick).not.toBeNull();
+      pick.getBoundingClientRect = () =>
+        ({
+          width: 200,
+          height: 200,
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 200,
+          x: 0,
+          y: 0,
+          toJSON() {},
+        }) as DOMRect;
+      fireEvent.click(pick, { clientX: 100, clientY: 100 });
+      expect(onChange).toHaveBeenCalled();
+      const parsed = JSON.parse(onChange.mock.calls[0][0] as string) as {
+        lat: number;
+        lng: number;
+      };
+      expect(parsed.lat).toBeCloseTo(0, 4);
+      expect(parsed.lng).toBeCloseTo(0, 4);
+    });
+
+    it("arrow keys nudge the pin when the map is focused", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          value={JSON.stringify({ lat: 10, lng: 20 })}
+          onChange={onChange}
+          locationIcon={locationIcon}
+        />,
+      );
+      const map = result.container.querySelector("[data-testid='geolocation-map']") as HTMLElement;
+      fireEvent.keyDown(map, { key: "ArrowUp" });
+      expect(onChange).toHaveBeenCalled();
+      const parsed = JSON.parse(onChange.mock.calls[0][0] as string) as {
+        lat: number;
+        lng: number;
+      };
+      expect(parsed.lat).toBeGreaterThan(10);
+      expect(parsed.lng).toBe(20);
+    });
+
     it("coordinates FloatingPanel commits live — no Apply button", async () => {
       const onChange = vi.fn();
       const result = renderWithProviders(
@@ -113,6 +191,72 @@ describe("Geolocation", () => {
       expect(result.container.querySelector("input")).toBeNull();
     });
 
+    // A disabled control opens nothing. Expand was the one overlay in this
+    // field that still did: unlike Locate and Coordinates it carried no
+    // `disabled`, and it opens its AdaptivePopup programmatically, so the
+    // Button's own pointerEvents:none was never the whole guard. Both halves
+    // of a real press are fired — `click` alone would pass against the bug.
+    describe("disabled opens no overlay", () => {
+      const expandIcon = <span data-testid="expand-icon" />;
+      const value = JSON.stringify({ lat: 51.5, lng: -0.12 });
+
+      const press = (el: Element) => {
+        fireEvent.mouseDown(el);
+        fireEvent.mouseUp(el);
+        fireEvent.click(el);
+      };
+
+      it("enabled: Expand opens the map popup (positive control)", async () => {
+        const result = renderWithProviders(
+          <Geolocation
+            label="Location"
+            name="loc"
+            locationIcon={locationIcon}
+            expandIcon={expandIcon}
+            value={value}
+          />,
+        );
+        press(result.container.querySelector("[aria-label='Expand map']") as Element);
+        await waitFor(() => {
+          expect(document.querySelector("[role='dialog']")).not.toBeNull();
+        });
+      });
+
+      it("disabled: Expand opens nothing", async () => {
+        const result = renderWithProviders(
+          <Geolocation
+            label="Location"
+            name="loc"
+            locationIcon={locationIcon}
+            expandIcon={expandIcon}
+            value={value}
+            disabled
+          />,
+        );
+        const expand = result.container.querySelector("[aria-label='Expand map']");
+        expect(expand).not.toBeNull();
+        press(expand as Element);
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(document.querySelector("[role='dialog']")).toBeNull();
+      });
+
+      it("disabled: Coordinates opens no panel", async () => {
+        const result = renderWithProviders(
+          <Geolocation
+            label="Location"
+            name="loc"
+            locationIcon={locationIcon}
+            value={value}
+            disabled
+          />,
+        );
+        press(result.container.querySelector("[aria-label='Edit coordinates']") as Element);
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(document.querySelector("[data-testid='geolocation-coords-panel']")).toBeNull();
+        expect(document.querySelector("[data-testid='floating-panel-viewport']")).toBeNull();
+      });
+    });
+
     it("renders readOnly — hides locate and coordinates overlay controls", () => {
       const result = renderWithProviders(
         <Geolocation

package/src/fields/Geolocation/Geolocation.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<typeof Geolocation> = {
     docs: {
       description: {
         component:
-          "Map-primary geolocation field: the map is the primary surface. Locate and Coordinates are map overlays; Lat/Lng edit live in a FloatingPanel (no Apply — LC-21 dismiss-by-intent). LC-19 preflight gates Locate. Accepts a custom `renderMap` prop for interactive maps.",
+          "Map-primary geolocation field: click the map to drop a pin. Locate is an icon overlay; the coordinate chip opens a FloatingPanel (no Apply — LC-21 dismiss-by-intent). LC-19 preflight gates Locate. LC-71: the map frame is the keyboard stop (inset ring, overflow hidden); overlay actions ring themselves. Accepts a custom `renderMap` prop for interactive maps.",
       },
     },
   },
@@ -52,7 +52,7 @@ export const Main: Story = {
             <Geolocation
               label="Delivery Location"
               name="location"
-              helperText="Set the delivery coordinates"
+              helperText="Click the map or use Locate to set the delivery pin"
               locationIcon={<NavigationArrowIcon size={16} />}
             />
             <Button action="submit">Save Location</Button>
@@ -67,7 +67,7 @@ export const Main: Story = {
 export const Standalone: Story = {
   args: {
     label: "Location",
-    helperText: "Use Locate on the map, or open Coordinates to type Lat/Lng",
+    helperText: "Click the map to set a pin, or open the coordinate chip to type Lat/Lng",
   },
   render: (args) => <Geolocation {...args} locationIcon={<NavigationArrowIcon size={16} />} />,
 };
@@ -88,7 +88,7 @@ export const Bare: Story = {
 export const Basic: Story = {
   args: {
     label: "Location",
-    helperText: "Use Locate on the map, or open Coordinates to type Lat/Lng",
+    helperText: "Click the map to set a pin, or open the coordinate chip to type Lat/Lng",
     onChange: action("onChange"),
   },
   render: (args) => <Geolocation {...args} locationIcon={<NavigationArrowIcon size={16} />} />,
@@ -116,7 +116,7 @@ export const Disabled: Story = {
 export const WithError: Story = {
   args: {
     label: "Location",
-    helperText: "Use Locate on the map, or open Coordinates to type Lat/Lng",
+    helperText: "Click the map to set a pin, or open the coordinate chip to type Lat/Lng",
     required: true,
     error: "Location is required",
     onChange: action("onChange"),
@@ -201,8 +201,12 @@ export const WithCoordinates: Story = {
   },
 };
 
+// Reads the `disabled` dial so it is reachable on the one story that has an
+// expand button: `disabled` and `expandIcon` never met in any other specimen,
+// which is how "Expand opens while disabled" went unmeasured. Undefined by
+// default, so the default render (and its baseline) is unchanged.
 export const WithExpandButton: Story = {
-  render: () => {
+  render: ({ disabled }) => {
     const Example = () => {
       const [value, setValue] = useState(JSON.stringify({ lat: 51.5074, lng: -0.1278 }));
       return (
@@ -217,6 +221,7 @@ export const WithExpandButton: Story = {
             }}
             locationIcon={<NavigationArrowIcon size={16} />}
             expandIcon={<ArrowsOutIcon size={16} />}
+            disabled={disabled}
           />
         </YStack>
       );

package/src/fields/Geolocation/GeolocationMap.native.spec.tsx

@@ -114,6 +114,13 @@ describe("GeolocationMap (native)", () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it("omits the value marker when hasValue is false", () => {
+    (Platform as AnyProps).OS = "ios";
+    loadExpoMapsMock.mockReturnValue(createMapsMock());
+    renderWithProviders(<GeolocationMap lat={0} lng={0} hasValue={false} onChange={vi.fn()} />);
+    expect(appleProps?.markers).toEqual([]);
+  });
+
   it("ignores click events without numeric coordinates", () => {
     (Platform as AnyProps).OS = "ios";
     loadExpoMapsMock.mockReturnValue(createMapsMock());