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 <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Dec 1, 2021 · 0ad6e1c · 0ad6e1c
1 parent f5ea942
commit 0ad6e1c
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 `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
@@ -5,14 +5,14 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { UIComponentProps, ChildrenComponentProps, commonPropTypes, createShorthandFactory } from '../../utils';
 import {
-  ComponentWithAs,
   useAutoControlled,
   getElementType,
   useTelemetry,
   useUnhandledProps,
   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,14 +123,16 @@ export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
         className: classes.root,
         value,
         disabled,
+        ref,
         onChange: handleChange,
         ...unhandledProps,
       })}
     />
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'textarea', HTMLTextAreaElement, TextAreaProps> &
+  FluentComponentStaticProps<TextAreaProps>;
 
 TextArea.displayName = 'TextArea';