From abcf09cba4d9da331173fe2f4d6bd9ea33cf1212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien?= <sgregoire@users.noreply.github.com>
Date: Fri, 7 Feb 2020 22:10:37 +0100
Subject: [PATCH] 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
---
 .../carbon-components-react-tests.tsx         | 73 ++++++++++++++++++-
 .../components/NumberInput/NumberInput.d.ts   |  7 +-
 .../lib/components/TextArea/TextArea.d.ts     |  5 +-
 .../TextInput/ControlledPasswordInput.d.ts    |  2 +-
 .../components/TextInput/PasswordInput.d.ts   |  2 +-
 .../lib/components/TextInput/props.d.ts       |  5 +-
 .../typings/shared.d.ts                       |  4 +
 7 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/types/carbon-components-react/carbon-components-react-tests.tsx b/types/carbon-components-react/carbon-components-react-tests.tsx
index 87db4e8875..0d022b761d 100644
--- a/types/carbon-components-react/carbon-components-react-tests.tsx
+++ b/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}
+    />
+);
diff --git a/types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts b/types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts
index d8940b98b3..e33e51008f 100644
--- a/types/carbon-components-react/lib/components/NumberInput/NumberInput.d.ts
+++ b/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;
diff --git a/types/carbon-components-react/lib/components/TextArea/TextArea.d.ts b/types/carbon-components-react/lib/components/TextArea/TextArea.d.ts
index bfcfbb5533..59b99875ac 100644
--- a/types/carbon-components-react/lib/components/TextArea/TextArea.d.ts
+++ b/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 {
diff --git a/types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts b/types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts
index c877273b5a..fef752b62a 100644
--- a/types/carbon-components-react/lib/components/TextInput/ControlledPasswordInput.d.ts
+++ b/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 { }
diff --git a/types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts b/types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts
index e5381cbb78..0c8445b1e6 100644
--- a/types/carbon-components-react/lib/components/TextInput/PasswordInput.d.ts
+++ b/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;
diff --git a/types/carbon-components-react/lib/components/TextInput/props.d.ts b/types/carbon-components-react/lib/components/TextInput/props.d.ts
index e8432ce5f4..3f9e25d935 100644
--- a/types/carbon-components-react/lib/components/TextInput/props.d.ts
+++ b/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,
diff --git a/types/carbon-components-react/typings/shared.d.ts b/types/carbon-components-react/typings/shared.d.ts
index 25b719ba7b..65bedba476 100644
--- a/types/carbon-components-react/typings/shared.d.ts
+++ b/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>;
+}