diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx index c7bacc8ede0590..674e23552056f1 100644 --- a/src/auto-complete.jsx +++ b/src/auto-complete.jsx @@ -216,7 +216,7 @@ const AutoComplete = React.createClass({ onUpdateInput: () => {}, onNewRequest: () => {}, searchText: '', - menuCloseDelay: 200, + menuCloseDelay: 300, targetOrigin: { vertical: 'top', horizontal: 'left', @@ -254,15 +254,9 @@ const AutoComplete = React.createClass({ componentWillUnmount() { clearTimeout(this.timerTouchTapCloseId); - clearTimeout(this.timerBlurCloseId); }, - componentClickAway() { - this.close(); - }, - - timerTouchTapCloseId: undefined, - timerBlurCloseId: undefined, + timerTouchTapCloseId: null, close() { this.setState({ @@ -271,6 +265,14 @@ const AutoComplete = React.createClass({ }); }, + handleRequestClose() { + // Only take into account the Popover clickAway when we are + // not focusing the TextField. + if (!this.state.focusTextField) { + this.close(); + } + }, + setValue(textValue) { warning(false, 'setValue() is deprecated, use the searchText property.'); @@ -285,6 +287,11 @@ const AutoComplete = React.createClass({ return this.state.searchText; }, + handleMouseDown(event) { + // Keep the TextField focused + event.preventDefault(); + }, + handleItemTouchTap(event, child) { const dataSource = this.props.dataSource; let chosenRequest; @@ -304,12 +311,12 @@ const AutoComplete = React.createClass({ this.props.onNewRequest(chosenRequest, index); - clearTimeout(this.timerBlurCloseId); this.timerTouchTapCloseId = setTimeout(() => { this.setState({ searchText: searchText, }); this.close(); + this.timerTouchTapCloseId = null; }, this.props.menuCloseDelay); }, @@ -360,12 +367,8 @@ const AutoComplete = React.createClass({ }, handleBlur(event) { - // Run asynchronously to wait for a potential handleItemTouchTap() call. - // The blur event occurs first on a click device and after on a touch device. - if (this.state.focusTextField) { - this.timerBlurCloseId = setTimeout(() => { - this.close(); - }, 0); + if (this.state.focusTextField && this.timerTouchTapCloseId === null) { + this.close(); } if (this.props.onBlur) { @@ -464,6 +467,7 @@ const AutoComplete = React.createClass({ onEscKeyDown={this.close} initiallyKeyboardFocused={false} onItemTouchTap={this.handleItemTouchTap} + onMouseDown={this.handleMouseDown} listStyle={Object.assign(styles.list, listStyle)} style={Object.assign(styles.menu, menuStyle)} > @@ -526,7 +530,7 @@ const AutoComplete = React.createClass({ open={open} anchorEl={anchorEl} useLayerForClickAway={false} - onRequestClose={this.close} + onRequestClose={this.handleRequestClose} animated={animated} > {menu}