Add inputRef support for RAC SliderThumb (#6392)

Add inputRef support for RAC SliderThumb

Author: yihuiliao

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

@@ -210,13 +210,22 @@ export interface SliderThumbRenderProps {
   isDisabled: boolean
 }
 
-export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps> {}
+export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps> {
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement>
+}
 
 function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+  let {
+    inputRef: userInputRef = null
+  } = props;
   let state = useContext(SliderStateContext)!;
   let {ref: trackRef} = useSlottedContext(SliderTrackContext)!;
   let {index = 0} = props;
-  let inputRef = useRef<HTMLInputElement>(null);
+  let defaultInputRef = useRef<HTMLInputElement>(null);
+  let inputRef = userInputRef || defaultInputRef;
   let [labelRef, label] = useSlot();
   let {thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled} = useSliderThumb({
     ...props,

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

@@ -275,3 +275,21 @@ describe('Slider', () => {
     expect(onChange).toHaveBeenCalled();
   });
 });
+
+it('should support input ref', () => {
+  let inputRef = React.createRef();
+
+  let {getByRole} = render(
+    <Slider>
+      <Label>Test</Label>
+      <SliderOutput />
+      <SliderTrack>
+        <SliderThumb inputRef={inputRef} />
+      </SliderTrack>
+    </Slider>
+  );
+
+  let group = getByRole('group');
+  let thumbInput = group.querySelector('input');
+  expect(inputRef.current).toBe(thumbInput);
+});