@multiplatform.one/forms 7.57.0 → 7.59.0

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -6,8 +6,11 @@ import { useState } from "react";
 import { RadioGroup as TamaguiRadioGroup, XStack, YStack } from "tamagui";
 import { Label } from "../../Label";
 import { Preset, Text, Paragraph } from "@multiplatform.one/theme";
+import { AdaptivePopup } from "../../AdaptivePopup";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
+import { Checkbox } from "../Checkbox";
+import { Switch } from "../Switch";
 import { RadioGroup } from "./index";
 
 const meta: Meta<typeof RadioGroup> = {
@@ -374,3 +377,49 @@ export const InTable: Story = {
     );
   },
 };
+
+/**
+ * FZ-7849: on a phone the whole row of every labelled choice selects, the label
+ * included, inside a sheet as on the page. The SHC console's Catalog filters
+ * found the label dead in a sheet.
+ */
+export const RowPressInSheet: Story = {
+  name: "Row press in a sheet",
+  render: () => {
+    const RowPressExample = () => {
+      const [open, setOpen] = useState(false);
+      const [kind, setKind] = useState("app");
+      const [installed, setInstalled] = useState(false);
+      const [updates, setUpdates] = useState(false);
+      const summary = `Kind: ${kind} · Installed: ${installed ? "yes" : "no"} · Updates: ${updates ? "on" : "off"}`;
+      return (
+        <YStack gap="$3">
+          <Text>{summary}</Text>
+          <Button onPress={() => setOpen(true)}>Filter</Button>
+          <AdaptivePopup open={open} onOpenChange={setOpen} title="Filter">
+            <YStack gap="$4">
+              <RadioGroup
+                label="Kind"
+                options={[
+                  { value: "app", label: "app" },
+                  { value: "vapp", label: "vapp" },
+                  { value: "addon", label: "addon" },
+                ]}
+                value={kind}
+                onChange={setKind}
+              />
+              <Checkbox
+                label="Installed only"
+                checked={installed}
+                onChange={(next) => setInstalled(next === true)}
+              />
+              <Switch label="Auto updates" checked={updates} onChange={setUpdates} />
+              <Text>{summary}</Text>
+            </YStack>
+          </AdaptivePopup>
+        </YStack>
+      );
+    };
+    return <RowPressExample />;
+  },
+};

package/src/fields/RadioGroup/index.tsx

@@ -31,6 +31,7 @@ import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
+import { choiceLabelPressProps, choiceRowPressProps } from "../../shared/choiceRowPress";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -582,8 +583,19 @@ export function RadioGroup({
       <Container gap="$2">
         {options.map((option, index) => {
           const itemId = `${id}-${index}-${option.value}`;
+          const select =
+            disabled || option.disabled || readOnly
+              ? undefined
+              : () => {
+                  if (currentValue !== option.value) emit(option.value);
+                };
           return (
-            <XStack key={`${index}-${option.value}`} gap="$2" alignItems="center">
+            <XStack
+              key={`${index}-${option.value}`}
+              gap="$2"
+              alignItems="center"
+              {...choiceRowPressProps(select)}
+            >
               {renderRadioItem(
                 option,
                 itemId,
@@ -592,7 +604,7 @@ export function RadioGroup({
                 index === tabStopIndex,
               )}
               <Label
-                htmlFor={itemId}
+                {...choiceLabelPressProps(itemId, select)}
                 // MPO-283: on native the radio itself now carries this text as
                 // its accessible name, so leaving the Label in the tree reads
                 // every option twice. Web keeps the label/control association.

package/src/fields/Select/InlineChoices.tsx

@@ -0,0 +1,156 @@
+import { hairline, IconSlot, keyboardFocusRingProps } from "@multiplatform.one/theme";
+import { CheckIcon } from "@phosphor-icons/react";
+import { useRef, type KeyboardEvent, type ReactNode } from "react";
+import { Pressable } from "react-native";
+import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { choiceItemA11y } from "../../shared/nativeA11y";
+
+export interface InlineChoice {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface InlineChoicesProps {
+  options: InlineChoice[];
+  value?: string;
+  onValueChange: (value: string) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  /** The field id: FieldLayout's label points at it. */
+  id?: string;
+  labelledBy?: string;
+  "aria-label"?: string;
+  knobProps: any;
+  /** The LC-05 selected mark, already resolved to a paint. */
+  markColor: string;
+}
+
+const nextKeys = new Set(["ArrowDown", "ArrowRight"]);
+const previousKeys = new Set(["ArrowUp", "ArrowLeft"]);
+
+/**
+ * A short Select inside a sheet laid out in place (LC-262 DIRECT-ACTIONS): one
+ * grouped list of radio rows, each with its glyph and label, the chosen row
+ * marked by the accent check alone. No trigger and no popover. On the web it
+ * is one tab stop, arrows move and choose, Space and Enter choose (APG radio
+ * group).
+ */
+export function InlineChoices({
+  options,
+  value,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  labelledBy,
+  "aria-label": ariaLabel,
+  knobProps,
+  markColor,
+}: InlineChoicesProps) {
+  const describedBy = useFieldDescribedBy();
+  const rowsRef = useRef<Array<HTMLElement | null>>([]);
+  const textColor = knobProps.textAccentColor;
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : 0;
+
+  const choose = (index: number) => {
+    const option = options[index];
+    if (disabled || !option || option.value === value) return;
+    onValueChange(option.value);
+  };
+
+  const onKeyDown = (index: number) => (event: KeyboardEvent) => {
+    const step = nextKeys.has(event.key) ? 1 : previousKeys.has(event.key) ? -1 : 0;
+    if (step) {
+      event.preventDefault();
+      const next = (index + step + options.length) % options.length;
+      rowsRef.current[next]?.focus();
+      choose(next);
+    } else if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      choose(index);
+    }
+  };
+
+  const rowContent = (option: InlineChoice, index: number, selected: boolean) => (
+    <XStack
+      alignItems="center"
+      height={knobProps.menuRow.minHeight}
+      paddingHorizontal={knobProps.panelPadding.padding}
+      {...knobProps.gap}
+      {...(index === 0 ? undefined : hairline.top)}
+      borderColor={formCommonColors.divider}
+      pointerEvents="none"
+    >
+      <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+        <IconSlot icon={option.icon} color={textColor} />
+      </View>
+      <Text
+        fontFamily={knobProps.body.fontFamily}
+        fontWeight={knobProps.body.fontWeight}
+        color={textColor}
+        numberOfLines={1}
+        flex={1}
+      >
+        {option.label}
+      </Text>
+      {selected ? <CheckIcon size={14} weight="bold" color={markColor} /> : null}
+    </XStack>
+  );
+
+  return (
+    <YStack
+      id={id}
+      role="radiogroup"
+      aria-labelledby={labelledBy}
+      aria-label={labelledBy ? undefined : ariaLabel}
+      aria-describedby={describedBy}
+      aria-disabled={disabled || undefined}
+      data-testid="select-inline-choices"
+      {...knobProps.borderRadius}
+      borderColor={formInputColors.border.base}
+      backgroundColor={formInputColors.background.base}
+      overflow="hidden"
+      width="100%"
+    >
+      {options.map((option, index) => {
+        const selected = option.value === value;
+        if (isWeb) {
+          return (
+            <View
+              key={option.value}
+              ref={(node: any) => {
+                rowsRef.current[index] = node;
+              }}
+              role="radio"
+              aria-checked={selected}
+              aria-disabled={disabled || undefined}
+              tabIndex={!disabled && index === tabStop ? 0 : -1}
+              cursor={disabled ? "default" : "pointer"}
+              onPress={() => choose(index)}
+              onKeyDown={onKeyDown(index)}
+              onBlur={onBlur}
+              outlineWidth={0}
+              focusVisibleStyle={keyboardFocusRingProps}
+            >
+              {rowContent(option, index, selected)}
+            </View>
+          );
+        }
+        return (
+          <Pressable
+            key={option.value}
+            {...choiceItemA11y({ name: option.label, selected, disabled: !!disabled })}
+            disabled={disabled}
+            onPress={() => choose(index)}
+          >
+            {rowContent(option, index, selected)}
+          </Pressable>
+        );
+      })}
+    </YStack>
+  );
+}

package/src/fields/Select/index.tsx

@@ -1,6 +1,15 @@
-import { useTouchSurface } from "@multiplatform.one/theme";
+import { IconSlot, useTouchSurface } from "@multiplatform.one/theme";
 import type { KeyboardEvent, MouseEvent, ReactNode, RefObject, UIEvent } from "react";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  memo,
+} from "react";
 import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import {
   useClick,
@@ -54,13 +63,16 @@ import {
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
+import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
-import { useOverlayZIndex } from "../../shared/overlayStack";
+import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack";
 import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { t } from "../../shared/t";
 import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
 import { shouldUseIosNativeSelect } from "../nativeSelect";
+import { InlineChoices } from "./InlineChoices";
+import { shouldInlineChoices } from "./shouldInlineChoices";
 
 /** Undefined on web (RNW ships no ActionSheetIOS); real on iOS. */
 const actionSheetIOS = (ReactNative as { ActionSheetIOS?: typeof ReactNative.ActionSheetIOS })
@@ -73,6 +85,12 @@ export interface SelectOption {
   label: string;
   /** Optional group label for grouping options */
   group?: string;
+  /**
+   * Leading glyph on the option's row (LC-112: every menu row carries one when
+   * the options have them). Inside a sheet, five or fewer options that all
+   * carry one render inline as an icon choice list (LC-262).
+   */
+  icon?: ReactNode;
 }
 
 export interface SelectProps {
@@ -150,8 +168,9 @@ const SelectRow = styled(View, {
   // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
   // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
+    // LC-262: the accent check alone marks the chosen row, never a grey fill.
     selected: {
-      true: { backgroundColor: formInputColors.background.base, borderRadius: 0 },
+      true: { backgroundColor: "transparent", borderRadius: 0 },
       false: { backgroundColor: "transparent" },
     },
     active: {
@@ -164,6 +183,15 @@ const SelectRow = styled(View, {
   } as const,
 });
 
+/** An option's leading glyph, in the row's ink. */
+function OptionGlyph({ icon, color }: { icon: ReactNode; color?: string }) {
+  return (
+    <View flexShrink={0} alignItems="center" justifyContent="center" minWidth={18}>
+      <IconSlot icon={icon} color={color} />
+    </View>
+  );
+}
+
 function GroupHeader(props: HouseTextProps) {
   return (
     <HouseText
@@ -432,7 +460,9 @@ const SelectItem = memo(function SelectItem({
       role="option"
       tabIndex={-1}
       selected={isSelected}
-      active={isActive}
+      // The open-time cursor sits on the chosen row; it only paints while the
+      // keyboard drives it, so the chosen row never opens grey (LC-262).
+      active={Boolean(isActive) && ctx.kbNav}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
       height={ctx.knobProps.menuRow.minHeight}
@@ -446,22 +476,15 @@ const SelectItem = memo(function SelectItem({
       {...(suppressHover
         ? {
             hoverStyle: {
-              backgroundColor: isActive
-                ? formInputColors.background.focus
-                : isSelected
-                  ? formInputColors.background.base
-                  : "transparent",
+              backgroundColor: isActive ? formInputColors.background.focus : "transparent",
             },
           }
         : {
-            hoverStyle: {
-              backgroundColor: isSelected
-                ? formInputColors.background.base
-                : formInputColors.background.focus,
-            },
+            hoverStyle: { backgroundColor: formInputColors.background.focus },
           })}
       {...transitionProps(ctx.knobProps.motion.control)}
     >
+      {option.icon ? <OptionGlyph icon={option.icon} color={ctx.textColor} /> : null}
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
         fontWeight={ctx.knobProps.body.fontWeight}
@@ -1247,6 +1270,9 @@ function NativeSelectCore({
   dismissible,
   native,
 }: FloatingSelectCoreProps) {
+  const insideOverlay = useInsideOverlay();
+  const compactFace = pickerCompactFace(options.length);
+  const asMenu = resolveCompactFace(compactFace, insideOverlay) === "menu";
   const hydrationTouch = useTouchSurface();
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1422,30 +1448,16 @@ function NativeSelectCore({
             {...(isWeb ? selectItemRingProps(active, kbNav) : undefined)}
             hoverStyle={
               activeIndex != null
-                ? {
-                    backgroundColor: active
-                      ? formInputColors.background.focus
-                      : selected
-                        ? formInputColors.background.base
-                        : "transparent",
-                  }
-                : {
-                    backgroundColor: selected
-                      ? formInputColors.background.base
-                      : formInputColors.background.focus,
-                  }
-            }
-            backgroundColor={
-              active
-                ? formInputColors.background.focus
-                : selected
-                  ? formInputColors.background.base
-                  : "transparent"
+                ? { backgroundColor: active ? formInputColors.background.focus : "transparent" }
+                : { backgroundColor: formInputColors.background.focus }
             }
+            // LC-262: the accent check alone marks the chosen row.
+            backgroundColor={active && kbNav ? formInputColors.background.focus : "transparent"}
             pressStyle={{ backgroundColor: formInputColors.background.focus }}
             // Native: parent RNPressable owns the hit; disable child stealing.
             pointerEvents={isWeb ? undefined : "none"}
           >
+            {option.icon ? <OptionGlyph icon={option.icon} color={textColor} /> : null}
             <Text
               fontFamily={knobProps.body.fontFamily}
               fontWeight={knobProps.body.fontWeight}
@@ -1481,7 +1493,9 @@ function NativeSelectCore({
       : placeholder
     : (selectedOption?.label ?? placeholder);
 
-  if (shouldUseIosNativeSelect({ native, multiple, isWeb, os: Platform.OS })) {
+  // The iOS action sheet is a sheet too: a short list, or any list inside an
+  // overlay, opens as a menu over the trigger instead (FZ-7830).
+  if (!asMenu && shouldUseIosNativeSelect({ native, multiple, isWeb, os: Platform.OS })) {
     const openNative = () => {
       if (disabled) return;
       const labels = options.map((o) => o.label);
@@ -1556,6 +1570,9 @@ function NativeSelectCore({
         if (!val) onBlur?.();
       }}
       sheet
+      // A short list opens as a menu over its trigger; a long one keeps its
+      // sheet at page level and opens as a menu inside another overlay (FZ-7830).
+      compactFace={compactFace}
       triggerA11y={{
         label: ariaLabel ?? fieldA11y?.label,
         value: triggerValueText,
@@ -1676,6 +1693,10 @@ function NativeSelectCore({
 
 // ── Select (public API) ──────────────────────────────────────
 
+const subscribeNothing = () => () => {};
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+
 export function Select({
   name,
   form: formProp,
@@ -1725,18 +1746,32 @@ export function Select({
   const isControlled = value !== undefined;
   const hasLabel = Boolean(label);
 
-  // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup.
-  warnSelectTooFewOptions({
-    count: options?.length ?? 0,
-    multiple,
-    component: "Select",
-    id,
-  });
   const viewportGtSm = useViewportGtSm();
-  // Sheet on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
-  // Floating from `$sm` up.
+  const insideOverlay = useInsideOverlay();
+  // Sheet core on native and below `$sm` (viewport < 640, OVERLAY_BREAKPOINT).
+  // Floating from `$sm` up, and on a phone-width web for a short list or
+  // inside another overlay, where a sheet would stack on a sheet (FZ-7830).
+  // Native keeps the sheet core, whose FloatingPanel opens the same menu.
+  // SSR and the hydration render keep the sheet core, as the viewport does.
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
-  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  const hydrated = useSyncExternalStore(subscribeNothing, clientSnapshot, serverSnapshot);
+  const compactMenu =
+    hydrated &&
+    resolveCompactFace(pickerCompactFace(options?.length ?? 0), insideOverlay) === "menu";
+  const shouldUseSheet = !isWeb || (!effectiveGtSm && !compactMenu);
+  const inTableCell = useIsInTableCell();
+  const inline = !inTableCell && shouldInlineChoices({ insideOverlay, multiple, options });
+  // DG-CTRL-01 / DG-CTRL-05 — short single-select lists prefer RadioGroup,
+  // which the inline face already is.
+  if (!inline) {
+    warnSelectTooFewOptions({
+      count: options?.length ?? 0,
+      multiple,
+      component: "Select",
+      id,
+    });
+  }
+  const markColor = useSelectedMarkColor();
 
   // Render skeleton placeholder
   if (skeleton) {
@@ -1801,6 +1836,26 @@ export function Select({
     handleBlur?: (...args: any[]) => void,
   ) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (inline) {
+      return (
+        <InlineChoices
+          options={options}
+          value={typeof selectValue === "string" ? selectValue : undefined}
+          onValueChange={(val) => {
+            if (disabled) return;
+            handleValueChange?.(val);
+            emitValueChange(val);
+          }}
+          onBlur={handleBlur}
+          disabled={disabled}
+          id={id}
+          labelledBy={hasLabel ? `${id}-label` : undefined}
+          aria-label={ariaLabel}
+          knobProps={knobProps}
+          markColor={markColor}
+        />
+      );
+    }
     const SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
     return (
       <SelectCore

package/src/fields/Select/shouldInlineChoices.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { INLINE_CHOICES_MAX, shouldInlineChoices } from "./shouldInlineChoices";
+
+const glyph = "•";
+const withIcons = (n: number) => Array.from({ length: n }, () => ({ icon: glyph }));
+
+describe("shouldInlineChoices (LC-262, FZ-7830)", () => {
+  it("lays out five or fewer glyphed options inline inside an overlay", () => {
+    expect(INLINE_CHOICES_MAX).toBe(5);
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(2) })).toBe(true);
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(5) })).toBe(true);
+  });
+
+  it("keeps the trigger past five, without a glyph on every option, at page level, or for multiple", () => {
+    expect(shouldInlineChoices({ insideOverlay: true, options: withIcons(6) })).toBe(false);
+    expect(shouldInlineChoices({ insideOverlay: true, options: [...withIcons(3), {}] })).toBe(
+      false,
+    );
+    expect(shouldInlineChoices({ insideOverlay: false, options: withIcons(3) })).toBe(false);
+    expect(
+      shouldInlineChoices({ insideOverlay: true, multiple: true, options: withIcons(3) }),
+    ).toBe(false);
+    expect(shouldInlineChoices({ insideOverlay: true, options: [] })).toBe(false);
+  });
+});

package/src/fields/Select/shouldInlineChoices.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+/** The most options a Select inside a sheet lays out inline (LC-262). */
+export const INLINE_CHOICES_MAX = 5;
+
+/**
+ * A single-choice Select inside a sheet, dialog or popover with five or fewer
+ * options that all carry a glyph renders inline as an icon choice list: no
+ * trigger and no popover, the choices sit in the sheet (LC-262, FZ-7830).
+ */
+export function shouldInlineChoices({
+  insideOverlay,
+  multiple,
+  options,
+}: {
+  insideOverlay: boolean;
+  multiple?: boolean;
+  options: ReadonlyArray<{ icon?: ReactNode }> | undefined;
+}): boolean {
+  if (!insideOverlay || multiple || !options?.length) return false;
+  return options.length <= INLINE_CHOICES_MAX && options.every((option) => option.icon != null);
+}

package/src/fields/Switch/Switch.rowPress.native.spec.tsx

@@ -0,0 +1,69 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { Switch } from "./index";
+import { muteBubbleInputs } from "../../../tests/muteBubbleInputs";
+
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+afterEach(cleanup);
+
+function FormSwitch({ onChange }: { onChange: (checked: boolean) => void }) {
+  const form = useForm({ defaultValues: { alerts: false } });
+  return (
+    <Form form={form}>
+      <Switch name="alerts" label="Alerts" onChange={onChange} />
+    </Form>
+  );
+}
+
+// FZ-7849. Same contract as RadioGroup's row press: the row and the label flip
+// the switch directly on native instead of through tamagui's focusable
+// registry, and each press flips it exactly once.
+describe("native Switch row press", () => {
+  muteBubbleInputs();
+
+  const rowOf = (label: HTMLElement) => label.parentElement as HTMLElement;
+
+  it("flips once from the row and once from the label, standalone", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Switch label="Dark mode" onChange={onChange} />);
+    const label = result.getByText("Dark mode");
+    expect(label.hasAttribute("for")).toBe(false);
+    fireEvent.click(rowOf(label));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    fireEvent.click(label);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("flips a form field once from its label", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<FormSwitch onChange={onChange} />);
+    fireEvent.click(result.getByText("Alerts"));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith(true);
+    fireEvent.click(rowOf(result.getByText("Alerts")));
+    expect(onChange).toHaveBeenLastCalledWith(false);
+  });
+
+  it("leaves a disabled or read-only switch's row and label dead", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <Switch label="Off limits" onChange={onChange} disabled />
+        <Switch label="Look only" onChange={onChange} readOnly />
+      </>,
+    );
+    for (const text of ["Off limits", "Look only"]) {
+      const label = result.getByText(text);
+      fireEvent.click(rowOf(label));
+      fireEvent.click(label);
+    }
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});