fix: slider component to pass ref to root slot (#20870)

* fix: slider component to pass ref to root slot * add changelog
microsoft · Dec 1, 2021 · 766416a · 766416a
1 parent 6d77a9f
commit 766416a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -68,6 +68,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803))
 - Fix `Pill` components to properly pass ref to root slots @chpalac ([#20838](https://github.com/microsoft/fluentui/pull/20838))
 - Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20837](https://github.com/microsoft/fluentui/pull/20837))
+- Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20870](https://github.com/microsoft/fluentui/pull/20870))
 - Fix `Reaction` components to properly pass ref to root slots @chpalac ([#20868](https://github.com/microsoft/fluentui/pull/20868))
 - Fix `RadioGroup` component to properly pass ref to root slots @chpalac ([#20867](https://github.com/microsoft/fluentui/pull/20867))
 - Fix `Text` component to properly pass ref to root slots @chpalac ([#20874](https://github.com/microsoft/fluentui/pull/20874))

diff --git a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
@@ -1,13 +1,13 @@
 import { Accessibility, sliderBehavior, SliderBehaviorProps } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
   getElementType,
   useUnhandledProps,
   useAccessibility,
   useStateManager,
   useFluentContext,
   useStyles,
   useTelemetry,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import { handleRef, Ref } from '@fluentui/react-component-ref';
 import * as customPropTypes from '@fluentui/react-proptypes';
@@ -126,7 +126,7 @@ export const sliderSlotClassNames: SliderSlotClassNames = {
  * [Slider - JAWS narrates slider value twice when using PageUp / PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/220)
  * [Slider - JAWS narrates current and new value in vertical slider](https://github.com/FreedomScientific/VFO-standards-support/issues/219)
  */
-export const Slider: ComponentWithAs<'input', SliderProps> & FluentComponentStaticProps = props => {
+export const Slider = (React.forwardRef<HTMLInputElement, SliderProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Slider.displayName, context.telemetry);
   setStart();
@@ -229,7 +229,7 @@ export const Slider: ComponentWithAs<'input', SliderProps> & FluentComponentStat
   });
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ...restProps })}>
+    <ElementType {...getA11Props('root', { className: classes.root, ref, ...restProps })}>
       <div
         {...getA11Props('inputWrapper', {
           className: cx(sliderSlotClassNames.inputWrapper, classes.inputWrapper),
@@ -259,7 +259,7 @@ export const Slider: ComponentWithAs<'input', SliderProps> & FluentComponentStat
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'input', HTMLInputElement, SliderProps> & FluentComponentStaticProps;
 
 Slider.displayName = 'Slider';