Fix tests

Author: mj12albert

packages/react/src/field/root/FieldRoot.tsx

@@ -56,7 +56,9 @@ export const FieldRoot = React.forwardRef(function FieldRoot(
     setDirtyUnwrapped(value);
   }, []);
 
-  const invalid = Boolean(invalidProp || (name && {}.hasOwnProperty.call(errors, name)));
+  const invalid = Boolean(
+    invalidProp || (name && {}.hasOwnProperty.call(errors, name) && errors[name] !== undefined),
+  );
 
   const [validityData, setValidityData] = React.useState<FieldValidityData>({
     state: DEFAULT_VALIDITY_STATE,

packages/react/src/form/Form.tsx

@@ -5,6 +5,8 @@ import { FormContext } from './FormContext';
 import { useEventCallback } from '../utils/useEventCallback';
 import { useRenderElement } from '../utils/useRenderElement';
 
+const EMPTY = {};
+
 /**
  * A native form element with consolidated error handling.
  * Renders a `<form>` element.
@@ -55,10 +57,8 @@ export const Form = React.forwardRef(function Form(
     }
   }, [errors, focusControl]);
 
-  const state = React.useMemo<Form.State>(() => ({}), []);
-
   const element = useRenderElement('form', componentProps, {
-    state,
+    state: EMPTY,
     ref: forwardedRef,
     props: [
       {
@@ -89,7 +89,7 @@ export const Form = React.forwardRef(function Form(
   });
 
   const clearErrors = useEventCallback((name: string | undefined) => {
-    if (name && errors && {}.hasOwnProperty.call(errors, name)) {
+    if (name && errors && EMPTY.hasOwnProperty.call(errors, name)) {
       const nextErrors = { ...errors };
       delete nextErrors[name];
       onClearErrors(nextErrors);

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

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

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

@@ -1894,18 +1894,17 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
     });
 
     it('should receive name prop from Field.Root', async () => {
-      const { getByTestId } = await render(
+      const { container } = await render(
         <Field.Root name="field-slider">
           <Slider.Root>
             <Slider.Control>
-              <Slider.Thumb data-testid="thumb" />
+              <Slider.Thumb />
             </Slider.Control>
           </Slider.Root>
         </Field.Root>,
       );
 
-      const thumb = getByTestId('thumb');
-      const input = thumb.querySelector('input');
+      const input = container.querySelector('input[type="hidden"]');
       expect(input).to.have.attribute('name', 'field-slider');
     });
 
@@ -1976,7 +1975,7 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
     });
 
     it('prop: validate', async () => {
-      const { container } = await render(
+      await render(
         <Field.Root validate={() => 'error'}>
           <Slider.Root>
             <Slider.Control>
@@ -1987,7 +1986,7 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
         </Field.Root>,
       );
 
-      const input = container.querySelector<HTMLInputElement>('input')!;
+      const input = screen.getByRole('slider');
       const thumb = screen.getByTestId('thumb');
 
       expect(input).not.to.have.attribute('aria-invalid');
@@ -2024,7 +2023,7 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
     });
 
     it('prop: validationMode=onBlur', async () => {
-      const { container } = await render(
+      await render(
         <Field.Root
           validationMode="onBlur"
           validate={(value) => {
@@ -2040,7 +2039,7 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
         </Field.Root>,
       );
 
-      const input = container.querySelector<HTMLInputElement>('input')!;
+      const input = screen.getByRole('slider');
       const thumb = screen.getByTestId('thumb');
 
       expect(input).not.to.have.attribute('aria-invalid');

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

@@ -144,6 +144,12 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
     controlRef,
   });
 
+  const registerFieldControlRef = useEventCallback((element: HTMLElement | null) => {
+    if (element) {
+      controlRef.current = element;
+    }
+  });
+
   const range = Array.isArray(valueUnwrapped);
 
   const values = React.useMemo(() => {
@@ -271,6 +277,7 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
       onValueCommitted,
       orientation,
       range,
+      registerFieldControlRef,
       setActive,
       setDragging,
       setValue,
@@ -298,6 +305,7 @@ export const SliderRoot = React.forwardRef(function SliderRoot<
       onValueCommitted,
       orientation,
       range,
+      registerFieldControlRef,
       setActive,
       setDragging,
       setValue,

packages/react/src/slider/thumb/SliderThumb.tsx

@@ -137,7 +137,7 @@ export const SliderThumb = React.forwardRef(function SliderThumb(
 
   const direction = useDirection();
   const { setTouched, setFocused, validationMode } = useFieldRootContext();
-  const { commitValidation } = useFieldControlValidation();
+  const { commitValidation, getValidationProps } = useFieldControlValidation();
 
   const thumbRef = React.useRef<HTMLElement>(null);
 
@@ -292,48 +292,53 @@ export const SliderThumb = React.forwardRef(function SliderThumb(
     cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
   }
 
-  const inputProps = mergeProps<'input'>({
-    'aria-label':
-      typeof getAriaLabelProp === 'function' ? getAriaLabelProp(index) : elementProps['aria-label'],
-    'aria-labelledby': labelId,
-    'aria-orientation': orientation,
-    'aria-valuemax': max,
-    'aria-valuemin': min,
-    'aria-valuenow': thumbValue,
-    'aria-valuetext':
-      typeof getAriaValueTextProp === 'function'
-        ? getAriaValueTextProp(
-            formatNumber(thumbValue, locale, formatOptionsRef.current ?? undefined),
-            thumbValue,
-            index,
-          )
-        : elementProps['aria-valuetext'] ||
-          getDefaultAriaValueText(
-            sliderValues,
-            index,
-            formatOptionsRef.current ?? undefined,
-            locale,
-          ),
-    [SliderThumbDataAttributes.index as string]: index,
-    disabled,
-    id: inputId,
-    max,
-    min,
-    onChange(event: React.ChangeEvent<HTMLInputElement>) {
-      handleInputChange(event.target.valueAsNumber, index, event);
-    },
-    step,
-    style: {
-      ...visuallyHidden,
-      // So that VoiceOver's focus indicator matches the thumb's dimensions
-      width: '100%',
-      height: '100%',
-      writingMode: cssWritingMode,
+  const inputProps = mergeProps<'input'>(
+    {
+      'aria-label':
+        typeof getAriaLabelProp === 'function'
+          ? getAriaLabelProp(index)
+          : elementProps['aria-label'],
+      'aria-labelledby': labelId,
+      'aria-orientation': orientation,
+      'aria-valuemax': max,
+      'aria-valuemin': min,
+      'aria-valuenow': thumbValue,
+      'aria-valuetext':
+        typeof getAriaValueTextProp === 'function'
+          ? getAriaValueTextProp(
+              formatNumber(thumbValue, locale, formatOptionsRef.current ?? undefined),
+              thumbValue,
+              index,
+            )
+          : elementProps['aria-valuetext'] ||
+            getDefaultAriaValueText(
+              sliderValues,
+              index,
+              formatOptionsRef.current ?? undefined,
+              locale,
+            ),
+      [SliderThumbDataAttributes.index as string]: index,
+      disabled,
+      id: inputId,
+      max,
+      min,
+      onChange(event: React.ChangeEvent<HTMLInputElement>) {
+        handleInputChange(event.target.valueAsNumber, index, event);
+      },
+      step,
+      style: {
+        ...visuallyHidden,
+        // So that VoiceOver's focus indicator matches the thumb's dimensions
+        width: '100%',
+        height: '100%',
+        writingMode: cssWritingMode,
+      },
+      tabIndex: -1,
+      type: 'range',
+      value: thumbValue ?? '',
     },
-    tabIndex: -1,
-    type: 'range',
-    value: thumbValue ?? '',
-  });
+    getValidationProps,
+  );
 
   if (typeof render === 'function') {
     return render(thumbProps, inputProps, state);