fix: video component to properly pass ref to root slot (#20878)

* fix: video component to properly pass ref to root slot * add changelog
microsoft · Dec 1, 2021 · ef05f56 · ef05f56
1 parent 6989d22
commit ef05f56
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
@@ -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 `Video` component to properly pass ref to root slots @chpalac ([#20878](https://github.com/microsoft/fluentui/pull/20878))
 
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))

diff --git a/packages/fluentui/react-northstar/src/components/Video/Video.tsx b/packages/fluentui/react-northstar/src/components/Video/Video.tsx
@@ -6,13 +6,13 @@ import { Accessibility, VideoBehaviorProps, videoBehavior } from '@fluentui/acce
 import { createShorthandFactory, UIComponentProps, commonPropTypes } from '../../utils';
 import { FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
   getElementType,
   useStyles,
   useFluentContext,
   useUnhandledProps,
   useTelemetry,
   useAccessibility,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface VideoProps extends UIComponentProps {
@@ -47,7 +47,7 @@ export type VideoStylesProps = Required<Pick<VideoProps, 'variables'>>;
 /**
  * A Video provides ability to embed video content.
  */
-export const Video: ComponentWithAs<'video', VideoProps> & FluentComponentStaticProps<VideoProps> = props => {
+export const Video = (React.forwardRef<HTMLVideoElement, VideoProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Video.displayName, context.telemetry);
   setStart();
@@ -94,6 +94,7 @@ export const Video: ComponentWithAs<'video', VideoProps> & FluentComponentStatic
           className: classes.root,
           autoPlay,
           controls,
+          ref,
           loop,
           poster,
           src,
@@ -104,7 +105,7 @@ export const Video: ComponentWithAs<'video', VideoProps> & FluentComponentStatic
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'video', HTMLVideoElement, VideoProps> & FluentComponentStaticProps<VideoProps>;
 
 Video.create = createShorthandFactory({ Component: Video, mappedProp: 'src' });
 
@@ -124,7 +125,7 @@ Video.propTypes = {
 };
 
 Video.defaultProps = {
-  as: 'video',
+  as: 'video' as const,
   accessibility: videoBehavior,
   controls: true,
   autoPlay: false,