feat(TextInput): Add Focus TextInput example

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"

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;

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>;

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' }
   ]
 };

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}
       />
     );
   }

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;

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';

packages/patternfly-4/react-core/src/components/TextInput/index.js

@@ -1 +1 @@
-export { default as TextInput } from './TextInput';
+export { default as TextInput } from './ForwardRefTextInput';