fix: Grid component to properly pass ref to root slot (#20810)

* fix: Grid component to properly pass ref to root slot * add changelog
microsoft · Nov 30, 2021 · 8cd4834 · 8cd4834
1 parent ae9ff9a
commit 8cd4834
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 `Grid` component to properly pass ref to root slots @chpalac ([#20810](https://github.com/microsoft/fluentui/pull/20810))
 - Fix `Form` components to properly pass ref to root slots @chpalac ([#20809](https://github.com/microsoft/fluentui/pull/20809))
 - Fix `Loader` component to properly pass ref to root slots @chpalac ([#20814](https://github.com/microsoft/fluentui/pull/20814))
 - Fix `Label` component to properly pass ref to root slots @chpalac ([#20813](https://github.com/microsoft/fluentui/pull/20813))

diff --git a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
@@ -1,12 +1,12 @@
 import { Accessibility, GridBehaviorProps } from '@fluentui/accessibility';
 import {
-  ComponentWithAs,
   getElementType,
   useAccessibility,
   useStyles,
   useFluentContext,
   useTelemetry,
   useUnhandledProps,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import * as PropTypes from 'prop-types';
@@ -43,7 +43,7 @@ export type GridStylesProps = Pick<GridProps, 'columns' | 'rows'>;
 /**
  * A Grid is a layout component that harmonizes negative space, by controlling both the row and column alignment.
  */
-export const Grid: ComponentWithAs<'div', GridProps> & FluentComponentStaticProps<GridProps> = props => {
+export const Grid = (React.forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Grid.displayName, context.telemetry);
   setStart();
@@ -74,6 +74,7 @@ export const Grid: ComponentWithAs<'div', GridProps> & FluentComponentStaticProp
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
         ...unhandledProps,
       })}
@@ -84,7 +85,7 @@ export const Grid: ComponentWithAs<'div', GridProps> & FluentComponentStaticProp
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, GridProps> & FluentComponentStaticProps<GridProps>;
 
 Grid.displayName = 'Grid';