@multiplatform.one/forms 6.1.0 → 6.3.0

package/src/fields/Slider/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
 import type { LabelProps, SizeTokens } from "tamagui";
 import {
@@ -6,11 +6,15 @@ import {
   Slider as TamaguiSlider,
   View,
   XStack,
+  isWeb,
   styled,
+  useTheme,
 } from "tamagui";
+import { animationConfig, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Skeleton } from "../../Skeleton";
-import { Field, FieldLayout } from "../../fieldLayout";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { formControlColors } from "../../shared/colorRamps";
+import { t } from "../../shared/t";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -18,6 +22,13 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
+import {
+  getNextSortedValues,
+  getSliderThumbRenderSize,
+  hasMinStepsBetween,
+  snapSliderValue,
+  useSliderJumpMotion,
+} from "./jumpMotion";
 
 // Track styling helper - returns props to pass to TamaguiSlider.Track
 const getTrackProps = (outlined: boolean | undefined, borderRadius: number | string) => ({
@@ -28,15 +39,52 @@ const getTrackProps = (outlined: boolean | undefined, borderRadius: number | str
   borderRadius,
 });
 
+/** Single source for the thumb size: styled default + native jump-delta math. */
+const THUMB_SIZE_TOKEN = "$1.5";
+
 const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
-  size: "$1.5",
-  circular: true,
+  size: THUMB_SIZE_TOKEN,
+  // LC-04 SOLID-THUMB: the thumb is a solid physical handle lifted off the
+  // track by a subtle drop shadow (same values as the Switch thumb) — never a
+  // border. Single overhead light source (y:blur 0.5 per the OPTICS audit).
   borderWidth: 0,
   backgroundColor: formControlColors.thumb.base,
   hoverStyle: { backgroundColor: formControlColors.thumb.hover },
   pressStyle: { backgroundColor: formControlColors.thumb.press },
+  ...(isWeb
+    ? { boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)" }
+    : {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.15,
+        shadowRadius: 2,
+        elevation: 2,
+      }),
 });
 
+const JUMP_KEYS = new Set([
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+]);
+
+/** Clear jump-tween shortly after the transition window so later layout does not re-tween. */
+const JUMP_MOTION_MS = 180;
+
+/** VoiceOver adjustable actions (native): swipe up/down steps the value. */
+const A11Y_ADJUSTABLE_ACTIONS = [{ name: "increment" }, { name: "decrement" }] as const;
+
+function valuesEqual(a: number[] | undefined, b: number[] | undefined) {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  return a.every((v, i) => v === b[i]);
+}
+
 export interface SliderProps {
   name?: string;
   form?: AnyFormApi;
@@ -52,6 +100,12 @@ export interface SliderProps {
   id?: string;
   value?: number[];
   defaultValue?: number[];
+  /**
+   * Canonical change handler, consistent with the rest of the field family.
+   * Prefer this over `onValueChange`.
+   */
+  onChange?: (value: number[]) => void;
+  /** @deprecated Use `onChange` instead. Kept as an alias for the tamagui name. */
   onValueChange?: (value: number[]) => void;
   onBlur?: (...args: any[]) => void;
   min?: number;
@@ -65,6 +119,394 @@ export interface SliderProps {
   skeleton?: boolean;
   /** When true, uses compact sizing */
   compact?: boolean;
+  "aria-label"?: string;
+}
+
+type SliderControlProps = {
+  id: string;
+  sliderValue: number[];
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  hasLabel?: boolean;
+  /** Plain-text field label, used to build per-thumb accessible names. */
+  labelText?: string;
+  "aria-label"?: string;
+  size?: SizeTokens;
+  sizeToken: SizeTokens;
+  outlined?: boolean;
+  borderRadius: number | string;
+  pointy?: boolean;
+  transitionToken: string;
+  elevationWrapperProps: ReturnType<typeof getElevationWrapperProps>;
+  sliderProps?: SliderProps["sliderProps"];
+  onChangeValues?: (values: number[]) => void;
+  onBlur?: (...args: any[]) => void;
+};
+
+/**
+ * Jump-only motion (LC-25): tween thumb + TrackActive only for discrete jumps
+ * (track click, keyboard, controlled value change). Drag and first paint stay
+ * transition-off so the handle never lags the pointer or wiggles on mount.
+ */
+function SliderControl({
+  id,
+  sliderValue,
+  min,
+  max,
+  step,
+  disabled,
+  readOnly,
+  required,
+  hasError,
+  hasLabel,
+  labelText,
+  "aria-label": ariaLabel,
+  size,
+  sizeToken,
+  outlined,
+  borderRadius,
+  pointy,
+  transitionToken,
+  elevationWrapperProps,
+  sliderProps,
+  onChangeValues,
+  onBlur,
+}: SliderControlProps) {
+  const describedBy = useFieldDescribedBy();
+  const { disabledState } = useResolvedKnobs();
+  // DG-A11Y-01: the thumb renders inside tamagui's t_SliderThumb component
+  // sub-theme, an INVERSE template whose `$outlineColor` clears 3:1 against
+  // its own (inverted) surfaces — but the ring draws on the parent surface,
+  // where it measured 1.05:1 (invisible). Resolve the ring color at the
+  // field's scope instead and pin the LITERAL on the thumb (`.val`, not
+  // `.get()` — the CSS var re-resolves inside the sub-theme).
+  const fieldTheme = useTheme();
+  const thumbFocusRing = {
+    outlineWidth: 2,
+    outlineStyle: "solid" as const,
+    outlineColor: (fieldTheme.outlineColor?.val as string | undefined) ?? "$outlineColor",
+    outlineOffset: 2,
+  };
+  const [animateJump, setAnimateJump] = useState(false);
+  const sessionRef = useRef<"idle" | "drag" | "jump">("idle");
+  const jumpClearRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const paintedRef = useRef(false);
+  const prevValueRef = useRef(sliderValue);
+  /** After a drag ends, ignore the trailing controlled sync so it does not re-tween. */
+  const ignoreJumpUntilRef = useRef(0);
+
+  const isSquare = pointy || borderRadius === "$0" || borderRadius === 0;
+
+  // Native jump tween rides transform (FLIP) — the RN driver cannot animate
+  // the thumb's `left` percent (see ./jumpMotion.ts). Web keeps the css
+  // transition session below untouched.
+  const trackWidthRef = useRef(0);
+  // RENDERED thumb diameter — the same number tamagui's internal x-offset
+  // resolves to after measuring itself (the `circular` variant renders the
+  // UNSHIFTED size token and wins over the size variant's shift -1; see
+  // getSliderThumbRenderSize). Using the shifted token here put the base-x
+  // replica 1-4pt off the true rendered position.
+  const thumbSize = useMemo(
+    () => getSliderThumbRenderSize(THUMB_SIZE_TOKEN, !isSquare),
+    [isSquare],
+  );
+  const jumpMotionEnabled =
+    !isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
+  const jumpMotion = useSliderJumpMotion({
+    enabled: jumpMotionEnabled,
+    min,
+    max,
+    step,
+    transitionToken,
+    initialValues: sliderValue,
+    minStepsBetweenThumbs: sliderProps?.minStepsBetweenThumbs ?? 0,
+    getTrackWidth: () => trackWidthRef.current,
+    thumbSize,
+    resolveAnimationConfig: (token) => (animationConfig as Record<string, unknown>)[token],
+  });
+
+  // ── Native accessibility (VoiceOver) ────────────────────────────────────
+  // The web path names/values the thumbs via aria-*; on native the slider was
+  // absent from the accessibility tree entirely. Each thumb becomes an
+  // "adjustable" element with label/value/hint and increment/decrement
+  // actions mapped to step changes. All state below is native-only: web never
+  // updates it, so the web render path stays byte-identical.
+  const fieldA11y = useFieldA11y();
+  /**
+   * VoiceOver-driven values. Tamagui is uncontrolled (`defaultValue` only),
+   * so an a11y action moves the thumb by temporarily passing `value` — while
+   * controlled, tamagui keeps its internal state synced to the prop, so
+   * clearing this on the next touch gesture hands control back seamlessly.
+   */
+  const [a11yValues, setA11yValues] = useState<number[] | null>(null);
+  /** Freshest committed values for accessibilityValue announcements. */
+  const [nativeValues, setNativeValues] = useState<number[]>(sliderValue);
+  const currentValuesRef = useRef(sliderValue);
+
+  const handleA11yAdjust = (thumbIndex: number, direction: 1 | -1) => {
+    if (disabled || readOnly) return;
+    const current = a11yValues ?? currentValuesRef.current;
+    const currentValue = current[thumbIndex];
+    if (currentValue === undefined) return;
+    // Mirror tamagui's updateValues semantics: step, snap, clamp, sort,
+    // reject when minStepsBetweenThumbs would be violated.
+    const next = snapSliderValue(currentValue + direction * step, min, max, step);
+    const nextValues = getNextSortedValues(current, next, thumbIndex);
+    if (!hasMinStepsBetween(nextValues, (sliderProps?.minStepsBetweenThumbs ?? 0) * step)) return;
+    if (valuesEqual(current, nextValues)) return;
+    currentValuesRef.current = nextValues;
+    jumpMotion.onInternalValueChange(nextValues);
+    setA11yValues(nextValues);
+    setNativeValues(nextValues);
+    onChangeValues?.(nextValues);
+  };
+
+  const clearJumpTimer = () => {
+    if (jumpClearRef.current !== null) {
+      clearTimeout(jumpClearRef.current);
+      jumpClearRef.current = null;
+    }
+  };
+
+  const armJump = () => {
+    sessionRef.current = "jump";
+    setAnimateJump(true);
+    clearJumpTimer();
+    jumpClearRef.current = setTimeout(() => {
+      if (sessionRef.current === "jump") {
+        sessionRef.current = "idle";
+        setAnimateJump(false);
+      }
+      jumpClearRef.current = null;
+    }, JUMP_MOTION_MS);
+  };
+
+  useEffect(() => () => clearJumpTimer(), []);
+
+  // Controlled / external value jumps animate; first paint and drag sync do not.
+  useEffect(() => {
+    const prev = prevValueRef.current;
+    prevValueRef.current = sliderValue;
+    if (!paintedRef.current) {
+      paintedRef.current = true;
+      return;
+    }
+    if (valuesEqual(prev, sliderValue)) return;
+    // A genuine external value change: adopt it as the current value and
+    // release any VoiceOver-held value override (native only).
+    currentValuesRef.current = sliderValue;
+    if (!isWeb) {
+      setNativeValues(sliderValue);
+      setA11yValues(null);
+    }
+    if (sessionRef.current === "drag") return;
+    if (Date.now() < ignoreJumpUntilRef.current) return;
+    armJump();
+  }, [sliderValue]);
+
+  const motionTransition = animateJump ? transitionToken : undefined;
+  const thumbRadius = isSquare ? 0 : 1000;
+
+  // `"none"` (not omitted): Tamagui styled defaults / animateOnly can leave a
+  // residual tween if the prop is absent after a jump session. This string
+  // session drives web thumbs + TrackActive; native thumbs use jumpMotion
+  // (TrackActive edges are layout props the RN driver cannot animate, so the
+  // fill snaps on native — the gliding thumb is the perceptual anchor).
+  const transitionProp = motionTransition ?? "none";
+
+  const trackActive = (
+    <TamaguiSlider.TrackActive
+      backgroundColor={formControlColors.border}
+      transition={transitionProp}
+    />
+  );
+
+  return (
+    <XStack
+      height={size || sizeToken}
+      alignItems="center"
+      width="100%"
+      onLayout={(event) => {
+        trackWidthRef.current = event.nativeEvent.layout.width;
+      }}
+    >
+      <TamaguiSlider
+        size={sizeToken}
+        width="100%"
+        {...sliderProps}
+        disabled={disabled}
+        // LC-40 DISABLED-VISIBLE: track+thumb are text-free chrome — dim the
+        // whole slider while the sibling label/helper stay readable.
+        {...(disabled ? disabledState.chromeKnobProps : undefined)}
+        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+        id={id}
+        defaultValue={sliderValue}
+        // Native only: while VoiceOver adjusts the value the slider runs
+        // controlled (tamagui syncs its internal state to the prop), and the
+        // next touch gesture releases it back to uncontrolled seamlessly.
+        {...(!isWeb && a11yValues ? { value: a11yValues } : undefined)}
+        min={min}
+        max={max}
+        step={step}
+        onSlideStart={(_event, value, target) => {
+          if (disabled || readOnly) return;
+          if (!isWeb && a11yValues) setA11yValues(null);
+          if (target === "track") {
+            jumpMotion.onTrackPress(value);
+            armJump();
+          } else {
+            jumpMotion.onDragStart();
+            sessionRef.current = "drag";
+            clearJumpTimer();
+            setAnimateJump(false);
+          }
+        }}
+        onSlideEnd={() => {
+          if (!isWeb) setNativeValues(currentValuesRef.current);
+          if (sessionRef.current === "drag") {
+            sessionRef.current = "idle";
+            ignoreJumpUntilRef.current = Date.now() + 50;
+          }
+        }}
+        onKeyDown={(event: KeyboardEvent) => {
+          if (disabled || readOnly) return;
+          if (JUMP_KEYS.has(event.key)) {
+            armJump();
+          }
+        }}
+        onValueChange={(values) => {
+          // Position tracking first: the jump/drag machine must see every
+          // internal value even when the value-emit below is gated.
+          jumpMotion.onInternalValueChange(values);
+          currentValuesRef.current = values;
+          // Keep announcements fresh without re-rendering per drag move.
+          if (!isWeb && sessionRef.current !== "drag") {
+            setNativeValues(values);
+          }
+          if (disabled) return;
+          onChangeValues?.(values);
+        }}
+        {...(onBlur ? { onBlur } : undefined)}
+        aria-required={required || undefined}
+        aria-invalid={hasError || undefined}
+        aria-readonly={readOnly || undefined}
+        aria-label={ariaLabel}
+        aria-labelledby={!ariaLabel && hasLabel ? `${id}-label` : undefined}
+        aria-describedby={describedBy}
+      >
+        {elevationWrapperProps.elevation ? (
+          <View {...elevationWrapperProps} width="100%" height="100%" borderRadius={borderRadius}>
+            <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
+              {trackActive}
+            </TamaguiSlider.Track>
+          </View>
+        ) : (
+          <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
+            {trackActive}
+          </TamaguiSlider.Track>
+        )}
+        {sliderValue.map((_thumbValue, thumbIndex) => {
+          // Per-thumb accessible names (values are announced via the
+          // aria-valuenow the thumb already carries). Range sliders name each
+          // thumb "Minimum"/"Maximum" (prefixed with the field label context)
+          // — a labelledby pointing at the shared field label would make all
+          // thumbs announce identically, so it is dropped when a per-thumb
+          // label exists (aria-labelledby otherwise wins name computation).
+          const isRange = sliderValue.length > 1;
+          const labelContext = ariaLabel ?? labelText;
+          const positionLabel =
+            thumbIndex === 0
+              ? t("Minimum")
+              : thumbIndex === sliderValue.length - 1
+                ? t("Maximum")
+                : t("Value {{number}}", { number: thumbIndex + 1 });
+          const thumbLabel = isRange
+            ? labelContext
+              ? `${labelContext} ${positionLabel}`
+              : positionLabel
+            : (ariaLabel ?? labelText ?? (hasLabel ? undefined : t("Slider")));
+          const thumbA11y = {
+            "aria-label": thumbLabel,
+            "aria-labelledby": !thumbLabel && hasLabel ? `${id}-label` : undefined,
+            "aria-describedby": describedBy,
+          };
+          // Native mirror of the web aria wiring: an "adjustable" element per
+          // thumb with the accessible name (id-based aria-labelledby has no
+          // native equivalent, so the label string comes from the field a11y
+          // context), current value, helper/error hint, and step actions.
+          const thumbValueNow =
+            (a11yValues ?? nativeValues)[thumbIndex] ?? sliderValue[thumbIndex] ?? min;
+          const nativeThumbA11y = isWeb
+            ? undefined
+            : {
+                accessible: true,
+                // Tamagui's Thumb sets role="slider" (web semantics); on this
+                // RN version it shadows accessibilityRole without mapping to
+                // the iOS adjustable trait — clear it so the trait applies.
+                role: undefined,
+                accessibilityRole: "adjustable" as const,
+                accessibilityLabel: thumbLabel ?? fieldA11y?.label ?? t("Slider"),
+                accessibilityHint: fieldA11y?.description,
+                accessibilityValue: {
+                  min,
+                  max,
+                  now: thumbValueNow,
+                  text: String(thumbValueNow),
+                },
+                accessibilityState: { disabled: !!disabled },
+                accessibilityActions: A11Y_ADJUSTABLE_ACTIONS,
+                onAccessibilityAction: (event: { nativeEvent: { actionName: string } }) => {
+                  if (event.nativeEvent.actionName === "increment") {
+                    handleA11yAdjust(thumbIndex, 1);
+                  } else if (event.nativeEvent.actionName === "decrement") {
+                    handleA11yAdjust(thumbIndex, -1);
+                  }
+                },
+              };
+          // Web: string transition session (css driver tweens `left`).
+          // Native: per-property transform transition + FLIP `x` override.
+          const thumbMotionProps = jumpMotionEnabled
+            ? (jumpMotion.getThumbMotionProps(thumbIndex) as Record<string, unknown>)
+            : { transition: transitionProp };
+          // The elevation wrapper is WEB-ONLY: on iOS the wrapper is a
+          // zero-height flow view (the thumb inside is absolutely positioned),
+          // and iOS accessibility culls the entire subtree under a zero-rect
+          // ancestor — the thumb was invisible to VoiceOver. The wrapper also
+          // draws nothing on native (a zero-rect casts no shadow; the thumb
+          // carries its own LC-04 shadow), so dropping it changes no pixels.
+          return elevationWrapperProps.elevation && isWeb ? (
+            <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
+              <SliderThumbFrame
+                index={thumbIndex}
+                circular={!isSquare}
+                borderRadius={thumbRadius}
+                focusVisibleStyle={thumbFocusRing}
+                {...thumbMotionProps}
+                {...thumbA11y}
+                {...(nativeThumbA11y as Record<string, unknown> | undefined)}
+              />
+            </View>
+          ) : (
+            <SliderThumbFrame
+              key={thumbIndex}
+              index={thumbIndex}
+              circular={!isSquare}
+              borderRadius={thumbRadius}
+              focusVisibleStyle={thumbFocusRing}
+              {...thumbMotionProps}
+              {...thumbA11y}
+              {...(nativeThumbA11y as Record<string, unknown> | undefined)}
+            />
+          );
+        })}
+      </TamaguiSlider>
+    </XStack>
+  );
 }
 
 export function Slider({
@@ -82,6 +524,7 @@ export function Slider({
   id: idProp,
   value,
   defaultValue,
+  onChange,
   onValueChange,
   onBlur,
   min = 0,
@@ -90,14 +533,23 @@ export function Slider({
   sliderProps,
   skeleton,
   compact,
+  "aria-label": ariaLabel,
 }: SliderProps) {
+  // Canonical `onChange` and the alias `onValueChange` both fire from the
+  // single emit site below (same reconciliation as Switch).
+  const handleValueChange = (values: number[]) => {
+    onChange?.(values);
+    onValueChange?.(values);
+  };
   const { resolvedForm, knobProps, elevation, id } = useFormField({
     form: formProp,
     id: idProp,
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const hasLabel = Boolean(label);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const transitionToken = (knobProps.transition as string | undefined) || "quick";
 
   // Render skeleton placeholder
   if (skeleton) {
@@ -110,58 +562,39 @@ export function Slider({
     );
   }
 
-  const renderSlider = (
+  const control = (
     sliderValue: number[],
     handleChange?: (values: number[]) => void,
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
   ) => (
-    <XStack height={size || knobProps.sizeToken} alignItems="center" width="100%">
-      <TamaguiSlider
-        size={knobProps.sizeToken}
-        width="100%"
-        {...sliderProps}
-        disabled={disabled}
-        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
-        id={id}
-        defaultValue={sliderValue}
-        min={min}
-        max={max}
-        step={step}
-        onValueChange={(values) => {
-          if (disabled) return;
-          handleChange?.(values);
-          onValueChange?.(values);
-        }}
-        {...(handleBlur ? { onBlur: handleBlur } : undefined)}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-        aria-readonly={readOnly || undefined}
-      >
-        {elevationWrapperProps.elevation ? (
-          <View {...elevationWrapperProps} borderRadius={knobProps.borderRadius.borderRadius}>
-            <TamaguiSlider.Track
-              {...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius)}
-            >
-              <TamaguiSlider.TrackActive backgroundColor={formControlColors.border} />
-            </TamaguiSlider.Track>
-          </View>
-        ) : (
-          <TamaguiSlider.Track
-            {...getTrackProps(knobProps.outlined, knobProps.borderRadius.borderRadius)}
-          >
-            <TamaguiSlider.TrackActive backgroundColor={formControlColors.border} />
-          </TamaguiSlider.Track>
-        )}
-        {elevationWrapperProps.elevation ? (
-          <View {...elevationWrapperProps} borderRadius={1000}>
-            <SliderThumbFrame index={0} />
-          </View>
-        ) : (
-          <SliderThumbFrame index={0} />
-        )}
-      </TamaguiSlider>
-    </XStack>
+    <SliderControl
+      id={id}
+      sliderValue={sliderValue}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      hasError={hasError}
+      hasLabel={hasLabel}
+      labelText={typeof label === "string" ? label : undefined}
+      aria-label={ariaLabel}
+      size={size}
+      sizeToken={knobProps.sizeToken}
+      outlined={knobProps.outlined}
+      borderRadius={knobProps.borderRadius.borderRadius}
+      pointy={knobProps.pointy}
+      transitionToken={transitionToken}
+      elevationWrapperProps={elevationWrapperProps}
+      sliderProps={sliderProps}
+      onChangeValues={(values) => {
+        handleChange?.(values);
+        handleValueChange(values);
+      }}
+      onBlur={handleBlur}
+    />
   );
 
   if (!resolvedForm || !name) {
@@ -175,8 +608,9 @@ export function Slider({
         helperText={helperText}
         size={size}
         knobProps={knobProps}
+        disabled={disabled}
       >
-        {renderSlider(value ?? defaultValue ?? [min], undefined, onBlur, !!error)}
+        {control(value ?? defaultValue ?? [min], undefined, onBlur, !!error)}
       </FieldLayout>
     );
   }
@@ -206,11 +640,12 @@ export function Slider({
             helperText={helperText}
             size={size}
             knobProps={knobProps}
+            disabled={disabled}
           >
-            {renderSlider(
+            {control(
               value !== undefined ? value : normalizedValue,
               (values) => {
-                field.handleChange(values[0] as any);
+                field.handleChange((values.length > 1 ? values : values[0]) as any);
               },
               mergeFieldHandler(field, "handleBlur", onBlur),
               !!resolvedError,