diff --git a/react/components/Input/index.js b/react/components/Input/index.js index 37aa40a49..87af6d446 100755 --- a/react/components/Input/index.js +++ b/react/components/Input/index.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, { Component, createRef } from 'react' import PropTypes from 'prop-types' import Button from '../Button' @@ -13,6 +13,8 @@ class Input extends Component { this.state = { active: false, } + + this.ref = createRef(null) } handleChange = event => { @@ -32,17 +34,17 @@ class Input extends Component { } handleFocus = event => { - if (!this.props.readOnly) { - this.setState({ active: true }) - this.props.onFocus && this.props.onFocus(event) - } + if (this.props.readOnly) return + + this.setState({ active: true }) + this.props.onFocus && this.props.onFocus(event) } handleBlur = event => { - if (!this.props.readOnly) { - this.setState({ active: false }) - this.props.onBlur && this.props.onBlur(event) - } + if (this.props.readOnly) return + + this.setState({ active: false }) + this.props.onBlur && this.props.onBlur(event) } handleMouseEnter = event => { @@ -53,6 +55,17 @@ class Input extends Component { this.props.onMouseLeave && this.props.onMouseLeave(event) } + handleAutoFocus = () => { + const { forwardedRef, autoFocus } = this.props + if (!autoFocus) return + + if (forwardedRef && forwardedRef.current) { + forwardedRef.current.focus() + } else if (this.ref.current) { + this.ref.focus() + } + } + componentDidMount() { if (this.props.size === 'x-large') { console.warn( @@ -71,6 +84,12 @@ class Input extends Component { 'You should not use both prefix and suffix props in the same input. ' ) } + + this.handleAutoFocus() + } + + componentDidUpdate() { + this.handleAutoFocus() } render() { @@ -208,7 +227,7 @@ class Input extends Component { )} { const { onChange } = this.props + const ssr = typeof document === 'undefined' || typeof window === 'undefined' + const event = ssr ? defaultEvent : window.event + onChange && onChange({ ...event, diff --git a/react/components/InputPassword/index.js b/react/components/InputPassword/index.js index 19331dc11..e4695f536 100755 --- a/react/components/InputPassword/index.js +++ b/react/components/InputPassword/index.js @@ -18,7 +18,16 @@ class InputPassword extends Component { showPassword: false, } - toggle = () => this.setState(state => ({ showPassword: !state.showPassword })) + handleToggle = () => + this.setState(state => ({ showPassword: !state.showPassword })) + + handleKeyPress = ({ key }) => { + const SPACE = ' ' + const ENTER = 'Enter' + if (key === SPACE || key === ENTER) { + this.handleToggle() + } + } render() { const iconSize = @@ -32,7 +41,13 @@ class InputPassword extends Component { token spellCheck="false" suffix={ - this.toggle()}> + {this.state.showPassword ? ( ) : ( diff --git a/react/components/InputSearch/index.js b/react/components/InputSearch/index.js index 4f4571b94..fc6017210 100755 --- a/react/components/InputSearch/index.js +++ b/react/components/InputSearch/index.js @@ -48,10 +48,19 @@ class InputSearch extends Component { ...event.target, value, }, - preventDefault: event.preventDefault || (() => {}), + preventDefault: event.preventDefault || (() => null), }) } + handleKeyPress = (event, handler) => { + const SPACE = ' ' + const ENTER = 'Enter' + const { key } = event + if (key === SPACE || key === ENTER) { + handler(event) + } + } + handleHovering = hover => { this.setState({ hover }) } @@ -60,6 +69,8 @@ class InputSearch extends Component { this.setState({ focus }) } + pressedEnter = event => event.key === 'Enter' + render() { const { hover, focus } = this.state const { size } = this.props @@ -73,15 +84,17 @@ class InputSearch extends Component { onBlur={() => this.handleFocus(false)} onMouseEnter={() => this.handleHovering(true)} onMouseLeave={() => this.handleHovering(false)} - onKeyUp={e => e.key === 'Enter' && this.handleSubmit(e)} + onKeyUp={e => this.pressedEnter(e) && this.handleSubmit(e)} type="search" suffix={
{this.props.value && ( this.handleKeyPress(e, this.handleClickClear)} + role="button" + tabIndex={0} > @@ -96,7 +109,13 @@ class InputSearch extends Component { InputSearch.separatorHeight.regular, }} /> - + this.handleKeyPress(e, this.handleSubmit)} + role="button" + tabIndex={0} + >