From 0ad6e1cc954de5e5bdf4b8a79c863bb52e9ecdb9 Mon Sep 17 00:00:00 2001
From: chassunc <86579954+chpalac@users.noreply.github.com>
Date: Wed, 1 Dec 2021 08:42:53 -0300
Subject: [PATCH] fix: text area component to properly pass ref to root slot
 (#20875)

* fix: text area component to properly pass ref to root slot

* add changelog

* Update packages/fluentui/CHANGELOG.md

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
---
 packages/fluentui/CHANGELOG.md                           | 1 +
 .../react-northstar/src/components/TextArea/TextArea.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index 8deafbbb967252..8df515a72ab825 100644
--- 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 `TextArea` component to properly pass ref to root slots @chpalac ([#20875](https://github.com/microsoft/fluentui/pull/20875))
 - Fix `Tree` component to properly pass ref to root slots @chpalac ([#20877](https://github.com/microsoft/fluentui/pull/20877))
 - Fix `Video` component to properly pass ref to root slots @chpalac ([#20878](https://github.com/microsoft/fluentui/pull/20878))
 
diff --git a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
index 92b0e12e1c555f..995802ecb11047 100644
--- a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
+++ b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { UIComponentProps, ChildrenComponentProps, commonPropTypes, createShorthandFactory } from '../../utils';
 import {
-  ComponentWithAs,
   useAutoControlled,
   getElementType,
   useTelemetry,
@@ -13,6 +12,7 @@ import {
   useFluentContext,
   useAccessibility,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface TextAreaProps extends UIComponentProps, ChildrenComponentProps {
@@ -66,8 +66,7 @@ export const textAreaClassName = 'ui-textarea';
  * [NVDA - No announcement of maxlength](https://github.com/nvaccess/nvda/issues/7910)
  * [JAWS - textarea - no announcement of maxlength](https://github.com/FreedomScientific/VFO-standards-support/issues/300)
  */
-export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
-  FluentComponentStaticProps<TextAreaProps> = props => {
+export const TextArea = (React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(TextArea.displayName, context.telemetry);
 
@@ -124,6 +123,7 @@ export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
         className: classes.root,
         value,
         disabled,
+        ref,
         onChange: handleChange,
         ...unhandledProps,
       })}
@@ -131,7 +131,8 @@ export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'textarea', HTMLTextAreaElement, TextAreaProps> &
+  FluentComponentStaticProps<TextAreaProps>;
 
 TextArea.displayName = 'TextArea';