Merge pull request #3669 from oliviertassinari/auto-complete-open-on-focus

[AutoComplete] Fix openOnFocus and item click

Author: mbrookes

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}