From 633ad03be27f1c4832de467377be4e93da635652 Mon Sep 17 00:00:00 2001
From: Boaz Shuster <boaz.shuster.github@gmail.com>
Date: Tue, 13 Nov 2018 16:47:37 +0000
Subject: [PATCH] feat(TextInput): Add Focus TextInput example

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
---
 .../__snapshots__/LoginForm.test.js.snap      | 24 -----------
 .../TextInput/ForwardRefTextInput.d.ts        |  0
 .../TextInput/ForwardRefTextInput.js          |  8 ++++
 .../src/components/TextInput/TextInput.d.ts   |  1 +
 .../components/TextInput/TextInput.docs.js    |  4 +-
 .../src/components/TextInput/TextInput.js     | 14 ++++++-
 .../TextInput/examples/FocusTextInput.js      | 41 +++++++++++++++++++
 .../src/components/TextInput/index.d.ts       |  3 +-
 .../src/components/TextInput/index.js         |  2 +-
 9 files changed, 69 insertions(+), 28 deletions(-)
 create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.js
 create mode 100644 packages/patternfly-4/react-core/src/components/TextInput/examples/FocusTextInput.js

diff --git a/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginForm.test.js.snap b/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginForm.test.js.snap
index f0f1b516c6b..d386dd9856e 100644
--- a/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginForm.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/LoginPage/__snapshots__/LoginForm.test.js.snap
@@ -19,11 +19,7 @@ exports[`LoginForm with rememberMeLabel and no rememberMeAriaLabel generates con
     label="Username"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-username-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-username-id"
@@ -41,11 +37,7 @@ exports[`LoginForm with rememberMeLabel and no rememberMeAriaLabel generates con
     label="Password"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-password-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-password-id"
@@ -114,11 +106,7 @@ exports[`LoginForm with rememberMeLabel and rememberMeAriaLabel does not generat
     label="Username"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-username-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-username-id"
@@ -136,11 +124,7 @@ exports[`LoginForm with rememberMeLabel and rememberMeAriaLabel does not generat
     label="Password"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-password-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-password-id"
@@ -209,11 +193,7 @@ exports[`should render Login form 1`] = `
     label="Username"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-username-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-username-id"
@@ -231,11 +211,7 @@ exports[`should render Login form 1`] = `
     label="Password"
   >
     <TextInput
-      aria-label={null}
-      className=""
       id="pf-login-password-id"
-      isDisabled={false}
-      isReadOnly={false}
       isRequired={true}
       isValid={true}
       name="pf-login-password-id"
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.d.ts b/packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.d.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.js b/packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.js
new file mode 100644
index 00000000000..982a43b1e2a
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextInput/ForwardRefTextInput.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import TextInput from './TextInput';
+import PropTypes from 'prop-types';
+
+const ForwardRefWrapper = React.forwardRef((props, ref) => <TextInput innerRef={ref} {...props} />);
+ForwardRefWrapper.displayName = 'TextInput';
+
+export default ForwardRefWrapper;
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
index 3f637b6e37c..b253addcb0b 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
+++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.d.ts
@@ -7,6 +7,7 @@ export interface TextInputProps extends Omit<HTMLProps<HTMLInputElement>, 'onCha
   isDisabled?: boolean;
   onChange?(value: string, event: FormEvent<HTMLInputElement>): void;
   isReadOnly?: boolean;
+  innerRef?: RefObject<HTMLInputElement>;
 }
 
 declare const TextInput: FunctionComponent<TextInputProps>;
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.docs.js b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.docs.js
index 39f442ddf44..f4b46cad989 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.docs.js
+++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.docs.js
@@ -3,6 +3,7 @@ import Simple from './examples/SimpleTextInput';
 import Disabled from './examples/DisabledTextInput';
 import ReadOnly from './examples/ReadOnlyTextInput';
 import Invalid from './examples/InvalidTextInput';
+import Focus from './examples/FocusTextInput';
 
 export default {
   title: 'TextInput',
@@ -14,6 +15,7 @@ export default {
     { component: Simple, title: 'Simple TextInput' },
     { component: Disabled, title: 'Disabled TextInput' },
     { component: ReadOnly, title: 'ReadOnly TextInput' },
-    { component: Invalid, title: 'Invalid TextInput' }
+    { component: Invalid, title: 'Invalid TextInput' },
+    { component: Focus, title: 'Focus TextInput' }
   ]
 };
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
index a885fda75e3..6c4e40f183d 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
+++ b/packages/patternfly-4/react-core/src/components/TextInput/TextInput.js
@@ -63,7 +63,18 @@ class TextInput extends React.Component {
   };
 
   render() {
-    const { className, type, value, onChange, isValid, isReadOnly, isRequired, isDisabled, ...props } = this.props;
+    const {
+      className,
+      type,
+      value,
+      onChange,
+      isValid,
+      isReadOnly,
+      isRequired,
+      isDisabled,
+      innerRef,
+      ...props
+    } = this.props;
     return (
       <input
         {...props}
@@ -75,6 +86,7 @@ class TextInput extends React.Component {
         required={isRequired}
         disabled={isDisabled}
         readOnly={isReadOnly}
+        ref={innerRef}
       />
     );
   }
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/examples/FocusTextInput.js b/packages/patternfly-4/react-core/src/components/TextInput/examples/FocusTextInput.js
new file mode 100644
index 00000000000..b74eeb319db
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/TextInput/examples/FocusTextInput.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextInput, Button } from '@patternfly/react-core';
+
+class FocusTextInput extends React.Component {
+  state = {
+    value: ''
+  };
+
+  inputRef = React.createRef();
+
+  componentDidUpdate() {
+    this.inputRef && this.inputRef.current.focus();
+  }
+
+  handleTextInputChange = value => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { value } = this.state;
+    return (
+      <React.Fragment>
+        <TextInput
+          aria-label={'focus text input example'}
+          ref={this.inputRef}
+          value={value}
+          onChange={this.handleTextInputChange}
+        />
+        <Button
+          onClick={() => {
+            this.inputRef && this.inputRef.current.focus();
+          }}
+        >
+          Focus
+        </Button>
+      </React.Fragment>
+    );
+  }
+}
+
+export default FocusTextInput;
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts b/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
index 8aa666afeea..bb1169399b8 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
+++ b/packages/patternfly-4/react-core/src/components/TextInput/index.d.ts
@@ -1 +1,2 @@
-export { default as TextInput, TextInputProps } from './TextInput';
+export { TextInputProps } from './TextInput';
+export { default as TextInput } from './ForwardRefTextInput';
diff --git a/packages/patternfly-4/react-core/src/components/TextInput/index.js b/packages/patternfly-4/react-core/src/components/TextInput/index.js
index 137a1443c0a..71fec56dc40 100644
--- a/packages/patternfly-4/react-core/src/components/TextInput/index.js
+++ b/packages/patternfly-4/react-core/src/components/TextInput/index.js
@@ -1 +1 @@
-export { default as TextInput } from './TextInput';
+export { default as TextInput } from './ForwardRefTextInput';