Fix: Allow root slot refs to merge with focus refs in Slider (microso…

…ft#26243) * fix: allow refs passed in root slot to merge with focus refs * change file * cleanup
q1b · Jan 24, 2023 · 2eb4fb7 · 2eb4fb7
1 parent 65a3c2a
commit 2eb4fb7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/change/@fluentui-react-slider-2f917409-4eb9-4200-a537-14c6a2e11be2.json b/change/@fluentui-react-slider-2f917409-4eb9-4200-a537-14c6a2e11be2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: allow refs passed in root slot to merge with focus refs",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-slider/src/components/Slider/useSlider.ts b/packages/react-components/react-slider/src/components/Slider/useSlider.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getPartitionedNativeProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getPartitionedNativeProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useSliderState_unstable } from './useSliderState';
 import { SliderProps, SliderState } from './Slider.types';
 import { useFocusWithin } from '@fluentui/react-tabster';
@@ -34,10 +34,7 @@ export const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputE
     },
     root: resolveShorthand(root, {
       required: true,
-      defaultProps: {
-        ref: useFocusWithin<HTMLDivElement>(),
-        ...nativeProps.root,
-      },
+      defaultProps: nativeProps.root,
     }),
     input: resolveShorthand(input, {
       required: true,
@@ -53,6 +50,8 @@ export const useSlider_unstable = (props: SliderProps, ref: React.Ref<HTMLInputE
     thumb: resolveShorthand(thumb, { required: true }),
   };
 
+  state.root.ref = useMergedRefs(state.root.ref, useFocusWithin<HTMLDivElement>());
+
   useSliderState_unstable(state, props);
 
   return state;