Added autoselect first option on enter

react-toolbox · Jun 15, 2016 · 7bffe8a · 7bffe8a
1 parent afde8b1
commit 7bffe8a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/components/autocomplete/Autocomplete.js b/components/autocomplete/Autocomplete.js
@@ -112,8 +112,17 @@ const factory = (Chip, Input) => {
    };
 
    handleQueryKeyUp = (event) => {
-     if (event.which === 13 && this.state.active) this.select(this.state.active, event);
+     if (event.which === 13) {
+       let target = this.state.active;
+       if (!target) {
+         target = [...this.suggestions().keys()][0];
+         this.setState({active: target});
+       }
+       this.select(target, event);
+     }
+
      if (event.which === 27) ReactDOM.findDOMNode(this).querySelector('input').blur();
+
      if ([40, 38].indexOf(event.which) !== -1) {
        const suggestionsKeys = [...this.suggestions().keys()];
        let index = suggestionsKeys.indexOf(this.state.active) + (event.which === 40 ? +1 : -1);

diff --git a/lib/autocomplete/Autocomplete.js b/lib/autocomplete/Autocomplete.js
@@ -100,8 +100,17 @@ var factory = function factory(Chip, Input) {
           _this.setState({ query: '' });
         }
       }, _this.handleQueryKeyUp = function (event) {
-        if (event.which === 13 && _this.state.active) _this.select(_this.state.active, event);
+        if (event.which === 13) {
+          var target = _this.state.active;
+          if (!target) {
+            target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
+            _this.setState({ active: target });
+          }
+          _this.select(target, event);
+        }
+
         if (event.which === 27) _reactDom2.default.findDOMNode(_this).querySelector('input').blur();
+
         if ([40, 38].indexOf(event.which) !== -1) {
           var suggestionsKeys = [].concat(_toConsumableArray(_this.suggestions().keys()));
           var index = suggestionsKeys.indexOf(_this.state.active) + (event.which === 40 ? +1 : -1);