[slider] Fix range slider onValueCommitted not called (#3600)

Author: mj12albert

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

@@ -322,7 +322,6 @@ export const SliderControl = React.forwardRef(function SliderControl(
 
     pressedInputRef.current = null;
     pressedThumbCenterOffsetRef.current = null;
-    pressedThumbIndexRef.current = -1;
 
     const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
     const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
@@ -343,6 +342,7 @@ export const SliderControl = React.forwardRef(function SliderControl(
       controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
     }
 
+    pressedThumbIndexRef.current = -1;
     touchIdRef.current = null;
     pressedValuesRef.current = null;
     // eslint-disable-next-line @typescript-eslint/no-use-before-define

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

@@ -594,6 +594,100 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
     });
   });
 
+  describe('prop: onValueCommitted', () => {
+    it('single value', async () => {
+      const handleValueCommitted = spy((newValue: number, eventDetails) => ({
+        newValue,
+        reason: eventDetails.reason,
+      }));
+
+      await render(
+        <Slider.Root onValueCommitted={handleValueCommitted} defaultValue={0}>
+          <Slider.Control data-testid="control">
+            <Slider.Thumb />
+          </Slider.Control>
+        </Slider.Root>,
+      );
+
+      const sliderControl = screen.getByTestId('control');
+
+      stub(sliderControl, 'getBoundingClientRect').callsFake(getHorizontalSliderRect);
+
+      const slider = screen.getByRole('slider');
+
+      fireEvent.pointerDown(sliderControl, {
+        buttons: 1,
+        clientX: 10,
+      });
+      fireEvent.pointerUp(sliderControl, {
+        buttons: 1,
+        clientX: 10,
+      });
+
+      expect(handleValueCommitted.callCount).to.equal(1);
+      expect(handleValueCommitted.lastCall.returnValue.newValue).to.equal(10);
+      expect(handleValueCommitted.lastCall.returnValue.reason).to.equal(REASONS.trackPress);
+
+      await act(async () => {
+        slider.focus();
+      });
+
+      fireEvent.change(slider, { target: { value: 23 } });
+      expect(handleValueCommitted.callCount).to.equal(2);
+      expect(handleValueCommitted.lastCall.returnValue.reason).to.equal(REASONS.inputChange);
+    });
+
+    it('array value', async () => {
+      const handleValueCommitted = spy((newValue: number[], eventDetails) => ({
+        newValue,
+        reason: eventDetails.reason,
+      }));
+
+      await render(
+        <Slider.Root onValueCommitted={handleValueCommitted} defaultValue={[10, 20]}>
+          <Slider.Control data-testid="control">
+            <Slider.Thumb index={0} />
+            <Slider.Thumb index={1} />
+          </Slider.Control>
+        </Slider.Root>,
+      );
+
+      const sliderControl = screen.getByTestId('control');
+
+      stub(sliderControl, 'getBoundingClientRect').callsFake(getHorizontalSliderRect);
+
+      const [thumb1, thumb2] = screen.getAllByRole('slider');
+
+      fireEvent.pointerDown(thumb2, {
+        buttons: 1,
+        clientX: 20,
+      });
+
+      fireEvent.pointerMove(thumb2, {
+        buttons: 1,
+        clientX: 30,
+      });
+
+      expect(handleValueCommitted.callCount).to.equal(0);
+
+      fireEvent.pointerUp(thumb2, {
+        buttons: 1,
+        clientX: 30,
+      });
+
+      expect(handleValueCommitted.callCount).to.equal(1);
+      expect(handleValueCommitted.lastCall.returnValue.reason).to.equal(REASONS.drag);
+
+      await act(async () => {
+        thumb1.focus();
+      });
+
+      fireEvent.change(thumb1, { target: { value: 23 } });
+      expect(handleValueCommitted.callCount).to.equal(2);
+      expect(handleValueCommitted.lastCall.returnValue.reason).to.equal(REASONS.inputChange);
+    });
+  });
+
   describe('events', () => {
     it.skipIf(isJSDOM)('should call handlers', async () => {
       const handleValueChange = spy();