fix: Divider component to properly pass ref (microsoft#20700)

* fix: Divider component to properly pass ref * add changelog
mlp73 · Jan 17, 2022 · 1481029 · 1481029
1 parent c1182cf
commit 1481029
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -44,6 +44,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Card` comoponent to properly pass ref to root slots @chpalac ([#20644](https://github.com/microsoft/fluentui/pull/20644))
 - Fix `Dropdown` by conditionally adding `aria-expanded="true"` to the button trigger @chpalac ([#20671](https://github.com/microsoft/fluentui/pull/20671))
 - Optimized `felaInvokeKeyframesPlugin` to not create new objects but reuse existing one in `reduce` @mbman ([#20649](https://github.com/microsoft/fluentui/pull/20649))
+- Fix `Divider` component to properly pass ref to root slots @chpalac ([#20700](https://github.com/microsoft/fluentui/pull/20700))
 - Fix `Dropdown` component to properly pass ref to root slots @chpalac ([#20702](https://github.com/microsoft/fluentui/pull/20702))
 - Fix `Checkbox` component to properly pass down ref to root slots @chpalac ([#20696](https://github.com/microsoft/fluentui/pull/20696))
 - Fix `Datepicker` components to properly pass ref to root slots @chpalac ([#20697](https://github.com/microsoft/fluentui/pull/20697))

diff --git a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
@@ -6,7 +6,7 @@ import {
   useFluentContext,
   useUnhandledProps,
   useStyles,
-  ComponentWithAs,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -60,10 +60,7 @@ export const dividerClassName = 'ui-divider';
 /**
  * A Divider visually segments content.
  */
-export const Divider: ComponentWithAs<'div', DividerProps> &
-  FluentComponentStaticProps<DividerProps> & {
-    Content: typeof DividerContent;
-  } = props => {
+export const Divider = (React.forwardRef<HTMLDivElement, DividerProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Divider.displayName, context.telemetry);
   setStart();
@@ -111,6 +108,7 @@ export const Divider: ComponentWithAs<'div', DividerProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
       })}
@@ -120,7 +118,10 @@ export const Divider: ComponentWithAs<'div', DividerProps> &
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, DividerProps> &
+  FluentComponentStaticProps<DividerProps> & {
+    Content: typeof DividerContent;
+  };
 
 Divider.displayName = 'Divider';