fix: Form component to properly pass ref to root slot (microsoft#20809)

* fix: Form component to properly pass ref to root slot

* add changelog

packages/fluentui/CHANGELOG.md

@@ -57,11 +57,11 @@ 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 `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))
 - Fix `MenuItemIcon` to allow icon `size` to be in effect @yuanboxue-amber ([#20803](https://github.com/microsoft/fluentui/pull/20803))
 
-
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))
 

packages/fluentui/react-northstar/src/components/Form/Form.tsx

@@ -15,13 +15,13 @@ import {
 import { ComponentEventHandler, ShorthandCollection, FluentComponentStaticProps } from '../../types';
 import { FormField, FormFieldProps } from './FormField';
 import {
-  ComponentWithAs,
   useTelemetry,
   getElementType,
   useUnhandledProps,
   useStyles,
   useFluentContext,
   useAccessibility,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface FormProps extends UIComponentProps, ChildrenComponentProps {
@@ -54,7 +54,7 @@ export type FormStylesProps = never;
 /**
  * A Form is used to collect, oprionally validate, and submit the user input, in a structured way.
  */
-export const Form: ComponentWithAs<'form', FormProps> & FluentComponentStaticProps<FormProps> = props => {
+export const Form = (React.forwardRef<HTMLFormElement, FormProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Form.displayName, context.telemetry);
   setStart();
@@ -96,6 +96,7 @@ export const Form: ComponentWithAs<'form', FormProps> & FluentComponentStaticPro
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
       })}
@@ -107,7 +108,7 @@ export const Form: ComponentWithAs<'form', FormProps> & FluentComponentStaticPro
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'form', HTMLFormElement, FormProps> & FluentComponentStaticProps<FormProps>;
 
 Form.displayName = 'Form';
 
@@ -121,7 +122,7 @@ Form.propTypes = {
 };
 
 Form.defaultProps = {
-  as: 'form',
+  as: 'form' as const,
 };
 
 Form.handledProps = Object.keys(Form.propTypes) as any;

packages/fluentui/react-northstar/src/components/Form/FormField.tsx

@@ -15,13 +15,13 @@ import { Text, TextProps } from '../Text/Text';
 import { Input } from '../Input/Input';
 import { Box, BoxProps } from '../Box/Box';
 import {
-  ComponentWithAs,
   getElementType,
   useUnhandledProps,
   useFluentContext,
   useTelemetry,
   useStyles,
   useAccessibility,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps {
@@ -71,7 +71,7 @@ export type FormFieldStylesProps = Required<Pick<FormFieldProps, 'type' | 'inlin
 /**
  * A FormField represents a Form element containing a label and an input.
  */
-export const FormField: ComponentWithAs<'div', FormFieldProps> & FluentComponentStaticProps<FormFieldProps> = props => {
+export const FormField = (React.forwardRef<HTMLDivElement, FormFieldProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(FormField.displayName, context.telemetry);
   setStart();
@@ -175,6 +175,7 @@ export const FormField: ComponentWithAs<'div', FormFieldProps> & FluentComponent
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
       })}
     >
@@ -183,7 +184,7 @@ export const FormField: ComponentWithAs<'div', FormFieldProps> & FluentComponent
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, FormFieldProps> & FluentComponentStaticProps<FormFieldProps>;
 
 FormField.displayName = 'FormField';
 

packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx

@@ -41,8 +41,7 @@ export type FormFieldCustomStylesProps = Required<Pick<FormFieldCustomProps, 'ty
 /**
  * A FormFieldCustom represents a Form element containing a label and an input.
  */
-export const FormFieldCustom: React.FC<FormFieldCustomProps> &
-  FluentComponentStaticProps<FormFieldCustomProps> = props => {
+export const FormFieldCustom = (React.forwardRef<HTMLDivElement, FormFieldCustomProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(FormFieldCustom.displayName, context.telemetry);
   setStart();
@@ -77,6 +76,7 @@ export const FormFieldCustom: React.FC<FormFieldCustomProps> &
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
       })}
     >
@@ -85,7 +85,7 @@ export const FormFieldCustom: React.FC<FormFieldCustomProps> &
   );
   setEnd();
   return element;
-};
+}) as unknown) as React.FC<FormFieldCustomProps> & FluentComponentStaticProps<FormFieldCustomProps>;
 
 FormFieldCustom.displayName = 'FormFieldCustom';