fix: embed component to properly pass ref (#20703)

* fix: embed component to properly pass ref * add changelog
microsoft · Nov 22, 2021 · 5ade517 · 5ade517
1 parent c4e248b
commit 5ade517
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 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 `Embed` component to properly pass ref to root slots @chpalac ([#20703](https://github.com/microsoft/fluentui/pull/20703))
 - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 
 ### Features

diff --git a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx
@@ -11,14 +11,14 @@ import { Box, BoxProps } from '../Box/Box';
 import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types';
 import { Ref } from '@fluentui/react-component-ref';
 import {
-  ComponentWithAs,
   getElementType,
   useUnhandledProps,
   useFluentContext,
   useAutoControlled,
   useAccessibility,
   useTelemetry,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface EmbedSlotClassNames {
@@ -83,7 +83,7 @@ export type EmbedStylesProps = Required<Pick<EmbedProps, 'active'>> & { iframeLo
  * A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its
  * accessibility section.
  */
-export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticProps<EmbedProps> = props => {
+export const Embed = (React.forwardRef<HTMLSpanElement, EmbedProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Embed.displayName, context.telemetry);
   setStart();
@@ -168,6 +168,7 @@ export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticP
       {...getA11yProps('root', {
         className: classes.root,
         onClick: handleClick,
+        ref,
         ...unhandledProps,
       })}
     >
@@ -218,7 +219,7 @@ export const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticP
   setEnd();
 
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'span', HTMLSpanElement, EmbedProps> & FluentComponentStaticProps<EmbedProps>;
 
 Embed.displayName = 'Embed';
 
@@ -238,7 +239,7 @@ Embed.propTypes = {
 };
 
 Embed.defaultProps = {
-  as: 'span',
+  as: 'span' as const,
   accessibility: embedBehavior,
   control: {},
   variables: {},