fix: Label component to properly pass down ref to root slot (#20813)

* fix: Label component to properly pass down ref to root slot * add changelog
microsoft · Nov 30, 2021 · 97c8d91 · 97c8d91
1 parent c857877
commit 97c8d91
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 - Fix `Flex` component to properly pass ref to root slots @chpalac ([#20752](https://github.com/microsoft/fluentui/pull/20752))
 - Fix `Animation` to expose `Transition` state for the consumer @chpalac ([#20776](https://github.com/microsoft/fluentui/pull/20776))
+- Fix `Label` component to properly pass ref to root slots @chpalac ([#20813](https://github.com/microsoft/fluentui/pull/20813))
 - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803))
 
 ### Features

diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
@@ -1,12 +1,12 @@
 import { Accessibility } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
   getElementType,
   useUnhandledProps,
   useAccessibility,
   useFluentContext,
   useStyles,
   useTelemetry,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import * as _ from 'lodash';
@@ -68,7 +68,7 @@ export const labelClassName = 'ui-label';
 /**
  * A Label allows user to classify content.
  */
-export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticProps = props => {
+export const Label = (React.forwardRef<HTMLSpanElement, LabelProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry);
   setStart();
@@ -116,6 +116,7 @@ export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticP
       <ElementType
         {...getA11Props('root', {
           className: classes.root,
+          ref,
           ...rtlTextContainer.getAttributes({ forElements: [children] }),
           ...unhandledProps,
         })}
@@ -166,7 +167,7 @@ export const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticP
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, LabelProps> & FluentComponentStaticProps;
 
 Label.displayName = 'Label';