diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx index aaf070c40..be6715144 100644 --- a/src/framework/ui/input/input.component.tsx +++ b/src/framework/ui/input/input.component.tsx @@ -6,7 +6,6 @@ import React from 'react'; import { - Image, ImageProps, StyleProp, StyleSheet, @@ -31,7 +30,6 @@ import { } from '../support/services'; import { FlexStyleProps, - InputEndEditEvent, InputFocusEvent, } from '../support/typings'; @@ -59,6 +57,15 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps; * * @extends React.Component * + * @method {() => void} focus - Requests focus for the given input or view. The exact behavior triggered + * will depend on the platform and type of view. + * + * @method {() => void} blur - Removes focus from an input or view. This is the opposite of `focus()`. + * + * @method {() => boolean} isFocused - Returns if the input is currently focused. + * + * @method {() => void} clear - Removes all text from the input. + * * @property {boolean} disabled - Determines whether component is disabled. * Default is `false`. * @@ -140,7 +147,23 @@ export class InputComponent extends React.Component { static styledComponentName: string = 'Input'; - static Icon: React.ComponentClass = Image; + private textInputRef: React.RefObject = React.createRef(); + + public focus = () => { + this.textInputRef.current.focus(); + }; + + public blur = () => { + this.textInputRef.current.blur(); + }; + + public isFocused = (): boolean => { + return this.textInputRef.current.isFocused(); + }; + + public clear = () => { + this.textInputRef.current.clear(); + }; private onFocus = (event: InputFocusEvent) => { this.props.dispatch([Interaction.FOCUSED]); @@ -150,11 +173,11 @@ export class InputComponent extends React.Component { } }; - private onEndEditing = (event: InputEndEditEvent) => { + private onBlur = (event: InputFocusEvent) => { this.props.dispatch([]); - if (this.props.onEndEditing) { - this.props.onEndEditing(event); + if (this.props.onBlur) { + this.props.onBlur(event); } }; @@ -322,12 +345,13 @@ export class InputComponent extends React.Component { {labelElement} {iconElement} diff --git a/src/framework/ui/input/input.spec.tsx b/src/framework/ui/input/input.spec.tsx index d3fb7cffe..2599f4e5c 100644 --- a/src/framework/ui/input/input.spec.tsx +++ b/src/framework/ui/input/input.spec.tsx @@ -42,6 +42,55 @@ const renderComponent = (props?: InputProps): RenderAPI => { ); }; +describe('@input: native methods', () => { + + const RefMock = React.forwardRef((props: InputProps, ref: React.Ref) => { + return ( + + + + ); + }); + + it('* focus', () => { + const componentRef: React.RefObject = React.createRef(); + render( + , + ); + + expect(componentRef.current.focus).toBeTruthy(); + }); + + it('* blur', () => { + const componentRef: React.RefObject = React.createRef(); + render( + , + ); + + expect(componentRef.current.blur).toBeTruthy(); + }); + + it('* isFocused', () => { + const componentRef: React.RefObject = React.createRef(); + render( + , + ); + + expect(componentRef.current.isFocused).toBeTruthy(); + }); + + it('* clear', () => { + const componentRef: React.RefObject = React.createRef(); + render( + , + ); + + expect(componentRef.current.clear).toBeTruthy(); + }); +}); + describe('@input: matches snapshot', () => { describe('* interaction', () => {