Use an extra hidden input for field integration

Author: mj12albert

docs/reference/generated/slider-root.json

@@ -72,6 +72,10 @@
       "default": "'horizontal'",
       "description": "The component orientation."
     },
+    "inputRef": {
+      "type": "Ref<HTMLInputElement>",
+      "description": "A ref to access the hidden input element."
+    },
     "className": {
       "type": "string | ((state: Slider.Root.State) => string)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

docs/reference/generated/slider-thumb.json

@@ -15,10 +15,6 @@
       "default": "false",
       "description": "Whether the thumb should ignore user interaction."
     },
-    "inputRef": {
-      "type": "Ref<HTMLInputElement>",
-      "description": "A ref to access the hidden input element."
-    },
     "className": {
       "type": "string | ((state: Slider.Thumb.State) => string)",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."

docs/src/app/(private)/experiments/slider/form.tsx

@@ -0,0 +1,92 @@
+'use client';
+import * as React from 'react';
+import { Field } from '@base-ui-components/react/field';
+import { Form } from '@base-ui-components/react/form';
+import { Slider } from '@base-ui-components/react/slider';
+import formStyles from '../../../(public)/(content)/react/components/form/demos/hero/css-modules/index.module.css';
+import styles from './slider.module.css';
+
+interface FormValues {
+  priceRange: string;
+}
+
+export default function ExampleForm() {
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  return (
+    <Form
+      className={formStyles.Form}
+      style={{ maxWidth: '18rem' }}
+      errors={errors}
+      onClearErrors={setErrors}
+      onSubmit={async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.currentTarget);
+        const formValues = Object.fromEntries(formData as any) as FormValues;
+        console.log(formValues);
+
+        setLoading(true);
+        const response = await submitForm(formValues);
+        const serverErrors = {
+          priceRange: response.errors?.priceRange,
+        };
+
+        setErrors(serverErrors);
+        setLoading(false);
+        console.log('response', response);
+      }}
+    >
+      <Field.Root name="priceRange" className={formStyles.Field}>
+        <Slider.Root
+          defaultValue={[500, 1200]}
+          min={100}
+          max={2000}
+          step={1}
+          minStepsBetweenValues={1}
+          className={styles.Root}
+          format={{
+            style: 'currency',
+            currency: 'EUR',
+          }}
+          locale="nl-NL"
+          style={{ width: '18rem' }}
+        >
+          <Field.Label className={styles.Label}>Price range</Field.Label>
+          <Slider.Value className={styles.Value} />
+          <Slider.Control className={styles.Control}>
+            <Slider.Track className={styles.Track}>
+              <Slider.Indicator className={styles.Indicator} />
+              <Slider.Thumb className={styles.Thumb} />
+              <Slider.Thumb className={styles.Thumb} />
+            </Slider.Track>
+          </Slider.Control>
+        </Slider.Root>
+        <Field.Error className={formStyles.Error} />
+      </Field.Root>
+      <button disabled={loading} type="submit" className={formStyles.Button}>
+        Search
+      </button>
+    </Form>
+  );
+}
+
+async function submitForm(formValues: FormValues) {
+  await new Promise((resolve) => {
+    setTimeout(resolve, 600);
+  });
+
+  try {
+    if (formValues.priceRange === '') {
+      return { errors: { priceRange: 'server error: empty string' } };
+    }
+  } catch {
+    return { errors: { priceRange: 'server error' } };
+  }
+
+  return {
+    response: {
+      results: Math.floor(Math.random() * 20) + 1,
+    },
+  };
+}

packages/react/src/slider/control/SliderControl.tsx

@@ -105,7 +105,6 @@ export const SliderControl = React.forwardRef(function SliderControl(
     onValueCommitted,
     orientation,
     range,
-    registerInputValidationRef,
     setActive,
     setDragging,
     setValue,
@@ -353,7 +352,7 @@ export const SliderControl = React.forwardRef(function SliderControl(
 
   const renderElement = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, registerInputValidationRef, controlRef, setStylesRef],
+    ref: [forwardedRef, controlRef, setStylesRef],
     props: [
       {
         onPointerDown(event: React.PointerEvent<HTMLDivElement>) {

packages/react/src/slider/root/SliderRoot.tsx

@@ -8,22 +8,24 @@ import type { BaseUIComponentProps, Orientation } from '../../utils/types';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useControlled } from '../../utils/useControlled';
 import { useEventCallback } from '../../utils/useEventCallback';
+import { useForkRef } from '../../utils/useForkRef';
 import { useLatestRef } from '../../utils/useLatestRef';
 import { useModernLayoutEffect } from '../../utils/useModernLayoutEffect';
 import { useRenderElement } from '../../utils/useRenderElement';
+import { visuallyHidden } from '../../utils/visuallyHidden';
 import { warn } from '../../utils/warn';
 import { CompositeList, type CompositeMetadata } from '../../composite/list/CompositeList';
 import type { FieldRoot } from '../../field/root/FieldRoot';
 import { useField } from '../../field/useField';
 import { useFieldControlValidation } from '../../field/control/useFieldControlValidation';
 import { useFieldRootContext } from '../../field/root/FieldRootContext';
+import { useFormContext } from '../../form/FormContext';
 import { asc } from '../utils/asc';
 import { getSliderValue } from '../utils/getSliderValue';
 import { validateMinimumDistance } from '../utils/validateMinimumDistance';
 import type { ThumbMetadata } from '../thumb/SliderThumb';
 import { sliderStyleHookMapping } from './styleHooks';
 import { SliderRootContext } from './SliderRootContext';
-import { useFormContext } from '../../form/FormContext';
 
 function areValuesEqual(
   newValue: number | readonly number[],
@@ -53,6 +55,7 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
     defaultValue,
     disabled: disabledProp = false,
     id: idProp,
+    inputRef: inputRefProp,
     format,
     largeStep = 10,
     locale,
@@ -93,6 +96,7 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
 
   const {
     getValidationProps,
+    getInputValidationProps,
     inputRef: inputValidationRef,
     commitValidation,
   } = useFieldControlValidation();
@@ -110,10 +114,12 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
   });
 
   const sliderRef = React.useRef<HTMLElement>(null);
-  const controlRef: React.RefObject<HTMLElement | null> = React.useRef(null);
+  const controlRef = React.useRef<HTMLElement>(null);
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null);
   const thumbRefs = React.useRef<(HTMLElement | null)[]>([]);
   const lastChangedValueRef = React.useRef<number | readonly number[] | null>(null);
   const formatOptionsRef = useLatestRef(format);
+  const mergedInputRef = useForkRef(inputRefProp, hiddenInputRef, inputValidationRef);
 
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
@@ -138,16 +144,6 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
     controlRef,
   });
 
-  const registerInputValidationRef = React.useCallback(
-    (element: HTMLElement | null) => {
-      if (element) {
-        controlRef.current = element;
-        inputValidationRef.current = element.querySelector<HTMLInputElement>('input[type="range"]');
-      }
-    },
-    [inputValidationRef],
-  );
-
   const range = Array.isArray(valueUnwrapped);
 
   const values = React.useMemo(() => {
@@ -272,11 +268,9 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
       max,
       min,
       minStepsBetweenValues,
-      name,
       onValueCommitted,
       orientation,
       range,
-      registerInputValidationRef,
       setActive,
       setDragging,
       setValue,
@@ -301,11 +295,9 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
       max,
       min,
       minStepsBetweenValues,
-      name,
       onValueCommitted,
       orientation,
       range,
-      registerInputValidationRef,
       setActive,
       setDragging,
       setValue,
@@ -317,6 +309,16 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
     ],
   );
 
+  const serializedValue = React.useMemo(() => {
+    if (valueUnwrapped == null) {
+      return ''; // avoid uncontrolled -> controlled error
+    }
+    if (!Array.isArray(valueUnwrapped)) {
+      return valueUnwrapped;
+    }
+    return JSON.stringify(valueUnwrapped);
+  }, [valueUnwrapped]);
+
   const renderElement = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, sliderRef],
@@ -336,6 +338,16 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
     <SliderRootContext.Provider value={contextValue}>
       <CompositeList elementsRef={thumbRefs} onMapChange={setThumbMap}>
         {renderElement()}
+        <input
+          type="hidden"
+          {...getInputValidationProps({
+            disabled,
+            name,
+            ref: mergedInputRef,
+            value: serializedValue,
+            style: visuallyHidden,
+          })}
+        />
       </CompositeList>
     </SliderRootContext.Provider>
   );
@@ -401,6 +413,10 @@ export namespace SliderRoot {
      * Options to format the input value.
      */
     format?: Intl.NumberFormatOptions;
+    /**
+     * A ref to access the hidden input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
     /**
      * The locale used by `Intl.NumberFormat` when formatting the value.
      * Defaults to the user's runtime locale.

packages/react/src/slider/root/SliderRootContext.ts

@@ -43,7 +43,6 @@ export interface SliderRootContext {
    * The minimum steps between values in a range slider.
    */
   minStepsBetweenValues: number;
-  name: string;
   /**
    * Function to be called when drag ends and the pointer is released.
    */
@@ -57,7 +56,6 @@ export interface SliderRootContext {
    * Whether the slider is a range slider.
    */
   range: boolean;
-  registerInputValidationRef: (element: HTMLElement | null) => void;
   setActive: React.Dispatch<React.SetStateAction<number>>;
   setDragging: React.Dispatch<React.SetStateAction<boolean>>;
   /**