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" > ); +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, 'onCha isDisabled?: boolean; onChange?(value: string, event: FormEvent): void; isReadOnly?: boolean; + innerRef?: RefObject; } declare const TextInput: FunctionComponent; 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 ( ); } 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 ( + + + + + ); + } +} + +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';