Fix clicking on track to move slider in RAC (#5383)

Author: devongovett

packages/react-aria-components/src/Slider.tsx

@@ -148,7 +148,8 @@ interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'chi
 function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderTrackContext);
   let state = useContext(SliderStateContext)!;
-  let {hoverProps, isHovered} = useHover(props);
+  let {onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
+  let {hoverProps, isHovered} = useHover({onHoverStart, onHoverEnd, onHoverChange});
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-SliderTrack',
@@ -162,7 +163,7 @@ function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>)
 
   return (
     <div
-      {...mergeProps(filterDOMProps(props as any), hoverProps)}
+      {...mergeProps(otherProps, hoverProps)}
       {...renderProps}
       ref={ref}
       data-hovered={isHovered || undefined}

packages/react-aria-components/test/Slider.test.js

@@ -208,4 +208,14 @@ describe('Slider', () => {
     let output = getByRole('status');
     expect(output).toHaveTextContent('30 – 60');
   });
+
+  it('should support clicking on the track to move the thumb', async () => {
+    let onChange = jest.fn();
+    let {getByRole} = renderSlider({onChange});
+    let group = getByRole('group');
+    let track = group.querySelector('.react-aria-SliderTrack');
+
+    await user.pointer([{target: track, keys: '[MouseLeft]', coords: {x: 20}}]);
+    expect(onChange).toHaveBeenCalled();
+  });
 });