fix: preserve controlled Slider invalid state (#22152)

adamalston · web-flow · commit 19a1247295d6 · 2026-05-05T07:02:27.000Z
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -705,11 +705,20 @@ const Slider = (props: SliderProps) => {
     // Set needsOnRelease flag so event fires on next update.
     setState({
       needsOnRelease: true,
-      isValid: true,
-      isValidUpper: true,
     });
   };
 
+  const getValidityUpdateForHandle = (
+    handle: HandlePosition,
+    validity: boolean
+  ) => {
+    if (typeof invalid !== 'undefined') return {};
+
+    return handle === HandlePosition.UPPER
+      ? { isValidUpper: validity }
+      : { isValid: validity };
+  };
+
   // TODO: Rename this reference.
   /**
    * Handles a "drag" event by recalculating the value/thumb and setting state
@@ -751,7 +760,7 @@ const Slider = (props: SliderProps) => {
       setState({
         value: nearestStepValue(value),
         left,
-        isValid: true,
+        ...getValidityUpdateForHandle(HandlePosition.LOWER, true),
       });
     }
     // TODO: Investigate if it would be better to not call `setState`
@@ -826,7 +835,7 @@ const Slider = (props: SliderProps) => {
       setState({
         value: nearestStepValue(value),
         left,
-        isValid: true,
+        ...getValidityUpdateForHandle(HandlePosition.LOWER, true),
       });
     }
     setState({ correctedValue: null, correctedPosition: null });
@@ -925,12 +934,12 @@ const Slider = (props: SliderProps) => {
       | HandlePosition
       | undefined;
 
-    if (handlePosition === HandlePosition.LOWER) {
-      setState({ isValid: validity });
-    } else if (handlePosition === HandlePosition.UPPER) {
-      setState({ isValidUpper: validity });
-    }
-    setState({ isValid: validity });
+    setState(
+      getValidityUpdateForHandle(
+        handlePosition ?? HandlePosition.LOWER,
+        validity
+      )
+    );
 
     if (validity) {
       const adjustedValue = handlePosition
@@ -1101,13 +1110,13 @@ const Slider = (props: SliderProps) => {
       setState({
         value: valueUpper && newValue > valueUpper ? valueUpper : newValue,
         left: valueUpper && newValue > valueUpper ? leftUpper : newLeft,
-        isValid: true,
+        ...getValidityUpdateForHandle(handle, true),
       });
     } else {
       setState({
         valueUpper: value && newValue < value ? value : newValue,
         leftUpper: value && newValue < value ? left : newLeft,
-        isValidUpper: true,
+        ...getValidityUpdateForHandle(handle, true),
       });
     }
   };
@@ -1123,7 +1132,7 @@ const Slider = (props: SliderProps) => {
         // @ts-expect-error - Passing a string to something that expects a
         // number.
         value,
-        isValid: true,
+        ...getValidityUpdateForHandle(handle, true),
       });
     } else {
       setState({
@@ -1132,7 +1141,7 @@ const Slider = (props: SliderProps) => {
         // @ts-expect-error - Passing a string to something that expects a
         // number.
         valueUpper: value,
-        isValidUpper: true,
+        ...getValidityUpdateForHandle(handle, true),
       });
     }
   };
diff --git a/packages/react/src/components/Slider/__tests__/Slider-test.js b/packages/react/src/components/Slider/__tests__/Slider-test.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import Slider from '../Slider';
 import userEvent from '@testing-library/user-event';
 import {
@@ -267,6 +267,153 @@ describe('Slider', () => {
       expect(onChange).toHaveBeenLastCalledWith({ value: 999 });
     });
 
+    it('should keep controlled invalid state after dragging to another invalid value', async () => {
+      const ControlledSlider = () => {
+        const [value, setValue] = useState(20);
+
+        return (
+          <Slider
+            labelText="Slider"
+            value={value}
+            min={0}
+            max={100}
+            ariaLabelInput={inputAriaValue}
+            invalid={value > 25}
+            invalidText="Error message"
+            onChange={({ value }) => setValue(value)}
+          />
+        );
+      };
+
+      render(<ControlledSlider />);
+
+      const inputElement = screen.getByLabelText(inputAriaValue);
+      const slider = screen.getByRole('slider');
+      const sliderRoot = screen.getByRole('presentation');
+
+      jest
+        .spyOn(sliderRoot, 'getBoundingClientRect')
+        .mockImplementation(() => createDOMRect({ left: 0, width: 100 }));
+
+      await userEvent.clear(inputElement);
+      await userEvent.type(inputElement, '30');
+
+      expect(inputElement).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+
+      fireEvent.mouseDown(slider, { clientX: 35 });
+      fireEvent.mouseUp(document);
+
+      await waitFor(() => {
+        expect(slider).toHaveAttribute('aria-valuenow', '35');
+      });
+
+      expect(screen.getByLabelText(inputAriaValue)).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
+    it('should keep controlled invalid state after keyboard interaction changes to another invalid value', async () => {
+      const ControlledSlider = () => {
+        const [value, setValue] = useState(20);
+
+        return (
+          <Slider
+            labelText="Slider"
+            value={value}
+            min={0}
+            max={100}
+            ariaLabelInput={inputAriaValue}
+            invalid={value > 25}
+            invalidText="Error message"
+            onChange={({ value }) => setValue(value)}
+          />
+        );
+      };
+
+      render(<ControlledSlider />);
+
+      const inputElement = screen.getByLabelText(inputAriaValue);
+      const slider = screen.getByRole('slider');
+
+      await userEvent.clear(inputElement);
+      await userEvent.type(inputElement, '30');
+
+      expect(inputElement).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+
+      await userEvent.click(slider);
+      await userEvent.keyboard('{ArrowRight}');
+
+      await waitFor(() => {
+        expect(slider).toHaveAttribute('aria-valuenow', '31');
+      });
+
+      expect(screen.getByLabelText(inputAriaValue)).toHaveAttribute(
+        'aria-invalid',
+        'true'
+      );
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
+    it('should keep controlled invalid state for the upper handle after dragging to another invalid value', async () => {
+      const ControlledRangeSlider = () => {
+        const [value, setValue] = useState(20);
+        const [valueUpper, setValueUpper] = useState(70);
+
+        return (
+          <Slider
+            labelText="Slider"
+            value={value}
+            unstable_valueUpper={valueUpper}
+            min={0}
+            max={100}
+            ariaLabelInput={defaultAriaLabelInput}
+            unstable_ariaLabelInputUpper={defaultAriaLabelInputUpper}
+            invalid={valueUpper > 75}
+            invalidText="Error message"
+            onChange={({ value, valueUpper }) => {
+              setValue(value);
+              if (typeof valueUpper !== 'undefined') {
+                setValueUpper(valueUpper);
+              }
+            }}
+          />
+        );
+      };
+
+      render(<ControlledRangeSlider />);
+
+      const upperInput = screen.getByLabelText(defaultAriaLabelInputUpper, {
+        selector: 'input',
+      });
+      const sliderRoot = screen.getByRole('presentation');
+      const [lowerThumb, upperThumb] = screen.getAllByRole('slider');
+
+      jest
+        .spyOn(sliderRoot, 'getBoundingClientRect')
+        .mockImplementation(() => createDOMRect({ left: 0, width: 100 }));
+
+      await userEvent.clear(upperInput);
+      await userEvent.type(upperInput, '80');
+
+      expect(upperInput).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+
+      fireEvent.mouseDown(upperThumb, { clientX: 84 });
+      fireEvent.mouseUp(document);
+
+      await waitFor(() => {
+        expect(upperThumb).toHaveAttribute('aria-valuenow', '84');
+      });
+
+      expect(lowerThumb).toHaveAttribute('aria-valuenow', '20');
+      expect(upperInput).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
     it('sets correct state when typing a valid value in input field', async () => {
       const { type } = userEvent;
       renderSlider({
