fix(carbon-components-react) Added ref for inputs and textareas (#42187)

* Added support of ref for TextArea and Input

* removed old code

* Reused the old forwardingcomponent + added number

* removed forward ref from  NumberInput

* lint fix

types/carbon-components-react/carbon-components-react-tests.tsx

@@ -5,6 +5,7 @@ import {
     DataTableCustomRenderProps,
     DataTableHeader,
     DataTableRow,
+    NumberInput,
     Slider,
     Tab,
     Table,
@@ -12,6 +13,8 @@ import {
     TableHeader,
     TableRow,
     TooltipDefinition,
+    TextArea,
+    TextInput,
 } from 'carbon-components-react';
 import Link from 'carbon-components-react/lib/components/UIShell/Link';
 
@@ -267,7 +270,7 @@ const uisLinkT5 = (
 
 // TooltipDefinition
 const tooltipDefHasAlign = (
-  <TooltipDefinition tooltipText="my text" align="end" />
+    <TooltipDefinition tooltipText="my text" align="end" />
 );
 
 const tooltipDefHasTriggerClassName = (
@@ -295,3 +298,71 @@ const SliderHasOnChange = (
         onChange={(newValue) => newValue.value}
     />
 );
+
+// TextArea
+const textAreaWithDefaultRef = (
+    <TextArea labelText=""/>
+);
+
+const HtmlTextAreaRef = React.createRef<HTMLTextAreaElement>();
+const textAreaWithRef = (
+    <TextArea
+        ref={HtmlTextAreaRef}
+        labelText=""
+    />
+);
+
+// TextInput
+const inputWithoutRef = (
+    <TextInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const passwordInputWithoutRef = (
+    <TextInput.PasswordInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const controlledPasswordInputWithoutRef = (
+    <TextInput.ControlledPasswordInput
+        id="my-id"
+        labelText=""
+    />
+);
+
+const inputRef = React.createRef<HTMLInputElement>();
+const inputWithRef = (
+    <TextInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+const passwordInputWithRef = (
+    <TextInput.PasswordInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+const controlledPasswordInputWithRef = (
+    <TextInput.ControlledPasswordInput
+        id="my-id"
+        ref={inputRef}
+        labelText=""
+    />
+);
+
+// NumberInput
+const numberInput = (
+    <NumberInput
+        id="my-id"
+        value={12}
+    />
+);

types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EmbeddedIconProps, InternationalProps, ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps } from "../../../typings/shared";
+import { EmbeddedIconProps, InternationalProps, ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps, RefForwardingProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-label" | "id" | "ref";
 export type NumberInputTranslationKey = "decrement.number" | "increment.number";
@@ -9,7 +9,8 @@ interface InheritedProps extends
     InternationalProps<NumberInputTranslationKey>,
     RequiresIdProps,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLInputElement>
 {
     value: number,
 }
@@ -22,6 +23,6 @@ export interface NumberInputProps extends InheritedProps {
     isMobile?: boolean,
 }
 
-declare const NumberInput: React.RefForwardingComponent<HTMLInputElement, NumberInputProps>;
+declare class NumberInput extends React.Component<NumberInputProps> { }
 
 export default NumberInput;

types/carbon-components-react/lib/components/TextArea/TextArea.d.ts

@@ -1,11 +1,12 @@
 import * as React from "react";
-import { ThemeProps, ValidityProps } from "../../../typings/shared";
+import { RefForwardingProps, ThemeProps, ValidityProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-invalid" | "aria-describedby" | "defaultValue" | "value";
 interface InheritedProps extends
     Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, ExcludedAttributes>,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLTextAreaElement>
 { }
 
 export interface TextAreaProps extends InheritedProps {

types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EmbeddedTooltipProps } from "../../../typings/shared";
+import { EmbeddedTooltipProps, RefForwardingProps } from "../../../typings/shared";
 import { TextInputInheritedProps } from "./props";
 
 interface InheritedProps extends TextInputInheritedProps, EmbeddedTooltipProps { }

types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts

@@ -6,6 +6,6 @@ interface InheritedProps extends TextInputInheritedProps, EmbeddedTooltipProps {
 
 export interface PasswordInputProps extends InheritedProps { }
 
-declare const PasswordInput: React.FC<PasswordInputProps>;
+declare const PasswordInput: React.RefForwardingComponent<HTMLInputElement, PasswordInputProps>;
 
 export default PasswordInput;

types/carbon-components-react/lib/components/TextInput/props.d.ts

@@ -1,12 +1,13 @@
 import * as React from "react";
-import { ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps } from "../../../typings/shared";
+import { ReactInputAttr, RequiresIdProps, ThemeProps, ValidityProps, RefForwardingProps } from "../../../typings/shared";
 
 type ExcludedAttributes = "aria-describedby" | "aria-invalid" | "defaultValue" | "id" | "value";
 export interface TextInputInheritedProps extends
     Omit<ReactInputAttr, ExcludedAttributes>,
     RequiresIdProps,
     ThemeProps,
-    ValidityProps
+    ValidityProps,
+    RefForwardingProps<HTMLInputElement>
 {
     defaultValue?: TextInputInheritedProps["value"],
     helperText?: React.ReactNode,

types/carbon-components-react/typings/shared.d.ts

@@ -71,3 +71,7 @@ export interface SideNavSharedProps {
 export interface SideNavSizingProps {
     large?: boolean;
 }
+
+export interface RefForwardingProps<T = HTMLElement> {
+    ref?: React.RefObject<T>;
+}