@appbaseio/reactivesearch-vue 1.27.0-gamma.3 → 1.29.0-preview.1

package/dist/es/ToggleButton.js

@@ -5,7 +5,7 @@ import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import { B as Button, t as toggleButtons } from './Button-91561391.js';
+import { B as Button, t as toggleButtons } from './Button-33de88e6.js';
 import { t as types } from './vueTypes-687b2304.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
 import 'redux';

package/dist/es/index.js

@@ -6,7 +6,7 @@ import '@appbaseio/reactivecore/lib/utils/helper';
 import 'emotion';
 import '@appbaseio/vue-emotion';
 import 'polished';
-import './Button-91561391.js';
+import './Button-33de88e6.js';
 import './vueTypes-687b2304.js';
 export { default as ReactiveList } from './ReactiveList.js';
 import '@appbaseio/reactivecore/lib/utils/transform';
@@ -23,14 +23,14 @@ import 'appbase-js';
 import 'url-search-params-polyfill';
 export { default as ReactiveBase } from './ReactiveBase.js';
 import 'hotkeys-js';
-export { D as DataSearch } from './DataSearch-be45e960.js';
+export { D as DataSearch } from './DataSearch-42f547cd.js';
 import './CancelSvg-c2c03a35.js';
 import './Input-e339e63a.js';
 import 'compute-scroll-into-view';
 import './Container-18b03fde.js';
 import 'vue-highlight-words';
-import { i as install } from './install-af797de0.js';
-export { S as SearchBox, i as install } from './install-af797de0.js';
+import { i as install } from './install-bd448c02.js';
+export { S as SearchBox, i as install } from './install-bd448c02.js';
 import '@appbaseio/reactivecore/lib/utils/suggestions';
 import './FormControlList-704f8dee.js';
 import './utils-64a2e5f0.js';

package/dist/es/initReactivesearch.js

@@ -1,7 +1,7 @@
 import { a as _extends, b as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-0f24d612.js';
 import { validProps, componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
-import { pushToAndClause, buildQuery } from '@appbaseio/reactivecore/lib/utils/helper';
-import { getRSQuery, extractPropsFromState, getDependentQueries } from '@appbaseio/reactivecore/lib/utils/transform';
+import { pushToAndClause, buildQuery, extractQueryFromCustomQuery, getOptionsForCustomQuery } from '@appbaseio/reactivecore/lib/utils/helper';
+import { isSearchComponent, getRSQuery, extractPropsFromState, getDependentQueries } from '@appbaseio/reactivecore/lib/utils/transform';
 import Appbase from 'appbase-js';
 import valueReducer from '@appbaseio/reactivecore/lib/reducers/valueReducer';
 import queryReducer from '@appbaseio/reactivecore/lib/reducers/queryReducer';
@@ -12,10 +12,10 @@ import dependencyTreeReducer from '@appbaseio/reactivecore/lib/reducers/dependen
 import fetchGraphQL from '@appbaseio/reactivecore/lib/utils/graphQL';
 import { isPropertyDefined } from '@appbaseio/reactivecore/lib/actions/utils';
 
-var _excluded = ["aggs", "size"];
+var _excluded = ["aggs", "size"],
+    _excluded2 = ["query"],
+    _excluded3 = ["query"];
 var X_SEARCH_CLIENT = 'ReactiveSearch Vue';
-var componentsWithHighlightQuery = [componentTypes.dataSearch, componentTypes.categorySearch];
-var componentsWithOptions = [componentTypes.reactiveList, componentTypes.reactiveMap, componentTypes.singleList, componentTypes.multiList, componentTypes.tagCloud].concat(componentsWithHighlightQuery);
 var componentsWithoutFilters = [componentTypes.numberBox, componentTypes.ratingsFilter];
 var resultComponents = [componentTypes.reactiveList, componentTypes.reactiveMap];
 
@@ -49,23 +49,40 @@ function parseValue(value, component) {
   }
 
   return value;
-}
+} // Returns query DSL with query property and other options
+
+
+function getDefaultQuery(component, value) {
+  // get custom or default query of sensor components
+  var currentValue = parseValue(value, component); // get default query of result components
+
+  if (component.defaultQuery) {
+    var defaultQuery = component.defaultQuery(currentValue, component);
+    return _extends({
+      query: extractQueryFromCustomQuery(defaultQuery)
+    }, getOptionsForCustomQuery(defaultQuery));
+  }
 
-function getQuery(component, value, componentType) {
-  // get default query of result components
-  if (resultComponents.includes(componentType)) {
-    return component.defaultQuery ? component.defaultQuery() : {};
-  } // get custom or default query of sensor components
+  return component.source.defaultQuery ? {
+    query: component.source.defaultQuery(currentValue, component)
+  } : {};
+} // Only results the query part
 
 
+function getCustomQuery(component, value) {
+  // get custom or default query of sensor components
   var currentValue = parseValue(value, component);
 
   if (component.customQuery) {
     var customQuery = component.customQuery(currentValue, component);
-    return customQuery && customQuery.query;
+    return _extends({
+      query: extractQueryFromCustomQuery(customQuery)
+    }, getOptionsForCustomQuery(customQuery));
   }
 
-  return component.source.defaultQuery ? component.source.defaultQuery(currentValue, component) : {};
+  return component.source.defaultQuery ? {
+    query: component.source.defaultQuery(currentValue, component)
+  } : null;
 }
 
 function initReactivesearch(componentCollection, searchState, settings) {
@@ -120,6 +137,11 @@ function initReactivesearch(componentCollection, searchState, settings) {
         }
       });
       var isInternalComponentPresent = false;
+
+      if (component.source.hasInternalComponent) {
+        isInternalComponentPresent = component.source.hasInternalComponent(component);
+      }
+
       var isResultComponent = resultComponents.includes(componentType);
       var internalComponent = component.componentId + "__internal";
       var label = component.filterLabel || component.componentId;
@@ -151,74 +173,66 @@ function initReactivesearch(componentCollection, searchState, settings) {
 
       if (component.defaultQuery && typeof component.defaultQuery === 'function') {
         defaultQueries[component.componentId] = component.defaultQuery(value, compProps);
-      } // [2] set query options - main component query (valid for result components)
-
+      }
 
-      if (componentsWithOptions.includes(componentType)) {
-        var options = component.source.generateQueryOptions ? component.source.generateQueryOptions(component) : null;
-        var highlightQuery = {};
+      var componentQueryOptions = {}; // [2] set query options - main component query (valid for result components)
 
-        if (componentsWithHighlightQuery.includes(componentType) && component.highlight) {
-          highlightQuery = component.source.highlightQuery(component);
-        }
+      if (component && component.source.generateQueryOptions) {
+        componentQueryOptions = _extends({}, componentQueryOptions, component.source.generateQueryOptions(component));
+      }
 
-        if (options && Object.keys(options).length || highlightQuery && Object.keys(highlightQuery).length) {
-          // eslint-disable-next-line
-          var _ref = options || {},
-              aggs = _ref.aggs,
-              size = _ref.size,
-              otherQueryOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-          if (aggs && Object.keys(aggs).length) {
-            isInternalComponentPresent = true; // query should be applied on the internal component
-            // to enable feeding the data to parent component
-
-            queryOptions = queryOptionsReducer(queryOptions, {
-              type: 'SET_QUERY_OPTIONS',
-              component: internalComponent,
-              options: {
-                aggs: aggs,
-                size: typeof size === 'undefined' ? 100 : size
-              }
-            });
-          } // sort, highlight, size, from - query should be applied on the main component
+      var highlightQuery = {};
 
+      if (component.source.highlightQuery) {
+        highlightQuery = component.source.highlightQuery(component);
+      }
 
-          if (otherQueryOptions && Object.keys(otherQueryOptions).length || highlightQuery && Object.keys(highlightQuery).length) {
-            if (!otherQueryOptions) otherQueryOptions = {};
-            if (!highlightQuery) highlightQuery = {};
+      if (componentQueryOptions && Object.keys(componentQueryOptions).length || highlightQuery && Object.keys(highlightQuery).length) {
+        // eslint-disable-next-line
+        var _ref = componentQueryOptions || {},
+            aggs = _ref.aggs,
+            size = _ref.size,
+            otherQueryOptions = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+        if (aggs && Object.keys(aggs).length) {
+          isInternalComponentPresent = true;
+          componentQueryOptions = _extends({}, componentQueryOptions, {
+            aggs: aggs,
+            size: typeof size === 'undefined' ? 100 : size
+          });
+        } // sort, highlight, size, from - query should be applied on the main component
 
-            var mainQueryOptions = _extends({}, otherQueryOptions, highlightQuery, {
-              size: size
-            });
 
-            if (isInternalComponentPresent) {
-              mainQueryOptions = _extends({}, otherQueryOptions, highlightQuery);
-            }
+        if (otherQueryOptions && Object.keys(otherQueryOptions).length || highlightQuery && Object.keys(highlightQuery).length) {
+          if (!otherQueryOptions) otherQueryOptions = {};
+          if (!highlightQuery) highlightQuery = {};
 
-            if (isResultComponent) {
-              var currentPage = component.currentPage ? component.currentPage - 1 : 0;
+          var mainQueryOptions = _extends({}, otherQueryOptions, highlightQuery, {
+            size: size
+          });
 
-              if (selectedValues[component.componentId] && selectedValues[component.componentId].value) {
-                currentPage = selectedValues[component.componentId].value - 1 || 0;
-              }
+          if (isInternalComponentPresent) {
+            mainQueryOptions = _extends({}, otherQueryOptions, highlightQuery);
+          }
 
-              var resultSize = component.size || 10;
-              var from = currentPage * resultSize; // Update props for RS API
+          if (isResultComponent) {
+            var currentPage = component.currentPage ? component.currentPage - 1 : 0;
 
-              compProps.from = from;
-              mainQueryOptions = _extends({}, mainQueryOptions, highlightQuery, {
-                size: resultSize,
-                from: from
-              });
+            if (selectedValues[component.componentId] && selectedValues[component.componentId].value) {
+              currentPage = selectedValues[component.componentId].value - 1 || 0;
             }
 
-            queryOptions = queryOptionsReducer(queryOptions, {
-              type: 'SET_QUERY_OPTIONS',
-              component: component.componentId,
-              options: _extends({}, mainQueryOptions)
+            var resultSize = component.size || 10;
+            var from = currentPage * resultSize; // Update props for RS API
+
+            compProps.from = from;
+            mainQueryOptions = _extends({}, mainQueryOptions, highlightQuery, {
+              size: resultSize,
+              from: from
             });
           }
+
+          componentQueryOptions = _extends({}, componentQueryOptions, mainQueryOptions);
         }
       } // [3] set dependency tree
 
@@ -236,25 +250,42 @@ function initReactivesearch(componentCollection, searchState, settings) {
           react: react
         });
       } // [4] set query list
+      // Do not set default query for suggestions
 
 
-      if (isResultComponent) {
-        var _getQuery = getQuery(component, value, componentType),
-            query = _getQuery.query;
+      if (isInternalComponentPresent && !isSearchComponent(component.componentType)) {
+        var _ref2 = getDefaultQuery(component, value) || {},
+            defaultQuery = _ref2.query,
+            defaultQueryOptions = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
         queryList = queryReducer(queryList, {
           type: 'SET_QUERY',
           component: internalComponent,
-          query: query
+          query: defaultQuery
         });
-      } else {
-        queryList = queryReducer(queryList, {
-          type: 'SET_QUERY',
-          component: component.componentId,
-          query: getQuery(component, value, componentType)
+        queryOptions = queryOptionsReducer(queryOptions, {
+          type: 'SET_QUERY_OPTIONS',
+          component: internalComponent,
+          options: _extends({}, componentQueryOptions, defaultQueryOptions)
         });
-      } // Set component type in component props
+      }
+
+      var _ref3 = getCustomQuery(component, value) || {},
+          query = _ref3.query,
+          options = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
+      var customQuery = query; // set custom query for main component
+
+      queryList = queryReducer(queryList, {
+        type: 'SET_QUERY',
+        component: component.componentId,
+        query: customQuery
+      });
+      queryOptions = queryOptionsReducer(queryOptions, {
+        type: 'SET_QUERY_OPTIONS',
+        component: component.componentId,
+        options: _extends({}, options)
+      }); // Set component type in component props
 
       compProps.componentType = componentType;
       componentProps[component.componentId] = compProps;
@@ -277,9 +308,10 @@ function initReactivesearch(componentCollection, searchState, settings) {
           queryObj = _buildQuery.queryObj,
           options = _buildQuery.options;
 
-      var validOptions = ['aggs', 'from', 'sort']; // check if query or options are valid - non-empty
+      var componentQueryOptions = options;
+      var validOptions = ['aggs', 'from', 'sort']; // check if query or componentQueryOptions are valid - non-empty
 
-      if (queryObj && !!Object.keys(queryObj).length || options && Object.keys(options).some(function (item) {
+      if (queryObj && !!Object.keys(queryObj).length || componentQueryOptions && Object.keys(componentQueryOptions).some(function (item) {
         return validOptions.includes(item);
       })) {
         var _extends2;
@@ -294,7 +326,7 @@ function initReactivesearch(componentCollection, searchState, settings) {
 
         var currentQuery = _extends({
           query: _extends({}, queryObj)
-        }, options, queryOptions[component.componentId]);
+        }, componentQueryOptions, queryOptions[component.componentId]);
 
         queryLog = _extends({}, queryLog, (_extends2 = {}, _extends2[component.componentId] = currentQuery, _extends2));
 

package/dist/es/{install-af797de0.js → install-bd448c02.js}

@@ -4,6 +4,7 @@ import VueTypes from 'vue-types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getQueryOptions, suggestionTypes } from '@appbaseio/reactivecore/lib/utils/helper';
 import styled from '@appbaseio/vue-emotion';
+import { B as Button } from './Button-33de88e6.js';
 import { t as types } from './vueTypes-687b2304.js';
 import ReactiveList from './ReactiveList.js';
 import { h as hasCustomRenderer, i as isQueryIdentical, g as getComponent, u as updateDefaultQuery, f as updateCustomQuery, a as isFunction, k as isEmpty, p as parseFocusShortcuts, l as extractModifierKeysFromFocusShortcuts, c as connect } from './index-78920565.js';
@@ -11,7 +12,7 @@ import { C as ComponentWrapper } from './ComponentWrapper-0f3431d1.js';
 import { T as Title } from './Title-3522ff56.js';
 import ReactiveBase from './ReactiveBase.js';
 import hotkeys from 'hotkeys-js';
-import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, b as InputGroup, C as CustomSvg, c as SuggestionItem, D as DataSearch } from './DataSearch-be45e960.js';
+import { S as SearchSvg, a as SuggestionWrapper, I as InputAddon, M as Mic, b as InputGroup, C as CustomSvg, c as SuggestionItem, D as DataSearch } from './DataSearch-42f547cd.js';
 import { C as CancelSvg, a as IconGroup, I as IconWrapper, D as Downshift, b as InputWrapper } from './CancelSvg-c2c03a35.js';
 import { s as suggestionsContainer, I as Input, a as suggestions } from './Input-e339e63a.js';
 import { C as Container } from './Container-18b03fde.js';
@@ -195,7 +196,9 @@ var SearchBox = {
     applyStopwords: VueTypes.bool,
     customStopwords: types.stringArray,
     onData: types.func,
-    renderItem: types.func
+    renderItem: types.func,
+    enterButton: VueTypes.bool.def(false),
+    renderEnterButton: VueTypes.any
   },
   mounted: function mounted() {
     this.listenForFocusShortcuts();
@@ -308,7 +311,7 @@ var SearchBox = {
         this.triggerDefaultQuery(value);
       } else if (this.$props.autosuggest) {
         this.triggerDefaultQuery(value);
-      } else {
+      } else if (!this.$props.enterButton) {
         this.triggerCustomQuery(value);
       }
     },
@@ -549,10 +552,18 @@ var SearchBox = {
       this.onValueSelectedHandler('', causes.CLEAR_VALUE);
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      if (highlightedIndex === void 0) {
+        highlightedIndex = null;
+      }
+
       // if a suggestion was selected, delegate the handling to suggestion handler
-      if (event.key === 'Enter' && highlightedIndex === null) {
-        this.setValue(event.target.value, true);
-        this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
+      if (event.key === 'Enter') {
+        if (this.$props.autosuggest === false) {
+          this.enterButtonOnClick();
+        } else if (highlightedIndex === null) {
+          this.setValue(event.target.value, true);
+          this.onValueSelectedHandler(event.target.value, causes.ENTER_PRESS);
+        }
       } // Need to review
 
 
@@ -724,15 +735,55 @@ var SearchBox = {
 
       return null;
     },
-    renderIcons: function renderIcons() {
+    enterButtonOnClick: function enterButtonOnClick() {
+      this.triggerQuery({
+        isOpen: false,
+        value: this.currentValue,
+        customQuery: true
+      });
+    },
+    renderEnterButtonElement: function renderEnterButtonElement() {
+      var _this4 = this;
+
       var h = this.$createElement;
       var _this$$props4 = this.$props,
-          iconPosition = _this$$props4.iconPosition,
-          showClear = _this$$props4.showClear,
-          innerClass = _this$$props4.innerClass,
-          getMicInstance = _this$$props4.getMicInstance,
-          showVoiceSearch = _this$$props4.showVoiceSearch,
-          showIcon = _this$$props4.showIcon;
+          enterButton = _this$$props4.enterButton,
+          innerClass = _this$$props4.innerClass;
+      var renderEnterButton = this.$scopedSlots.renderEnterButton;
+
+      if (enterButton) {
+        var getEnterButtonMarkup = function getEnterButtonMarkup() {
+          if (renderEnterButton) {
+            return renderEnterButton(_this4.enterButtonOnClick);
+          }
+
+          return h(Button, {
+            "class": "enter-btn " + getClassName(innerClass, 'enterButton'),
+            "attrs": {
+              "primary": true
+            },
+            "on": {
+              "click": _this4.enterButtonOnClick
+            }
+          }, ["Search"]);
+        };
+
+        return h("div", {
+          "class": "enter-button-wrapper"
+        }, [getEnterButtonMarkup()]);
+      }
+
+      return null;
+    },
+    renderIcons: function renderIcons() {
+      var h = this.$createElement;
+      var _this$$props5 = this.$props,
+          iconPosition = _this$$props5.iconPosition,
+          showClear = _this$$props5.showClear,
+          innerClass = _this$$props5.innerClass,
+          getMicInstance = _this$$props5.getMicInstance,
+          showVoiceSearch = _this$$props5.showVoiceSearch,
+          showIcon = _this$$props5.showIcon;
       var renderMic = this.$scopedSlots.renderMic || this.$props.renderMic;
       var currentValue = this.$data.currentValue;
       return h("div", [h(IconGroup, {
@@ -784,7 +835,7 @@ var SearchBox = {
       (_this$$refs = this.$refs) == null ? void 0 : (_this$$refs$this$$pro = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs$this$$pro.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$$props$focusSho = this.$props.focusShortcuts,
           focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
@@ -802,7 +853,7 @@ var SearchBox = {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
 
-        _this4.focusSearchBox(event);
+        _this5.focusSearchBox(event);
       }); // if one of modifier keys are used, they are handled below
 
       hotkeys('*', function (event) {
@@ -813,7 +864,7 @@ var SearchBox = {
           var element = modifierKeys[index];
 
           if (hotkeys[element]) {
-            _this4.focusSearchBox(event);
+            _this5.focusSearchBox(event);
 
             break;
           }
@@ -827,14 +878,14 @@ var SearchBox = {
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
-      var _this5 = this;
+      var _this6 = this;
 
       var h = this.$createElement;
 
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
 
-        _this5.onAutofillClick(suggestion);
+        _this6.onAutofillClick(suggestion);
       };
       /* 👇 avoid showing autofill for category suggestions👇 */
 
@@ -847,12 +898,12 @@ var SearchBox = {
     }
   },
   render: function render() {
-    var _this6 = this;
+    var _this7 = this;
 
     var h = arguments[0];
-    var _this$$props5 = this.$props,
-        theme = _this$$props5.theme,
-        expandSuggestionsContainer = _this$$props5.expandSuggestionsContainer;
+    var _this$$props6 = this.$props,
+        theme = _this$$props6.theme,
+        expandSuggestionsContainer = _this$$props6.expandSuggestionsContainer;
     var _this$$scopedSlots = this.$scopedSlots,
         recentSearchesIcon = _this$$scopedSlots.recentSearchesIcon,
         popularSearchesIcon = _this$$scopedSlots.popularSearchesIcon;
@@ -893,14 +944,14 @@ var SearchBox = {
               }
             };
 
-            return h("div", [_this6.hasCustomRenderer && _this6.getComponent({
+            return h("div", [_this7.hasCustomRenderer && _this7.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this6.renderErrorComponent(), !_this6.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": suggestions(_this6.themePreset, theme) + " " + getClassName(_this6.$props.innerClass, 'list')
-            }, [_this6.normalizedSuggestions.map(function (item, index) {
+            }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
+            }, [_this7.normalizedSuggestions.map(function (item, index) {
               return renderItem ? h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -910,7 +961,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -923,7 +974,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -934,61 +985,61 @@ var SearchBox = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "className": getClassName(_this7.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": item
                 }
-              }), _this6.renderAutoFill(item)]);
-            })]) : _this6.renderNoSuggestions(_this6.normalizedSuggestions)]);
+              }), _this7.renderAutoFill(item)]);
+            })]) : _this7.renderNoSuggestions(_this7.normalizedSuggestions)]);
           };
 
           return h("div", {
             "class": suggestionsContainer
-          }, [h(InputGroup, [_this6.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
+          }, [h(InputGroup, [_this7.renderInputAddonBefore(), h(InputWrapper, [h(Input, {
             "attrs": {
-              "id": _this6.$props.componentId + "-input",
-              "showIcon": _this6.$props.showIcon,
-              "showClear": _this6.$props.showClear,
-              "iconPosition": _this6.$props.iconPosition,
-              "placeholder": _this6.$props.placeholder,
-              "autoFocus": _this6.$props.autoFocus,
-              "themePreset": _this6.themePreset,
+              "id": _this7.$props.componentId + "-input",
+              "showIcon": _this7.$props.showIcon,
+              "showClear": _this7.$props.showClear,
+              "iconPosition": _this7.$props.iconPosition,
+              "placeholder": _this7.$props.placeholder,
+              "autoFocus": _this7.$props.autoFocus,
+              "themePreset": _this7.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this6.$props.innerRef,
-            "class": getClassName(_this6.$props.innerClass, 'input'),
+            "ref": _this7.$props.innerRef,
+            "class": getClassName(_this7.$props.innerClass, 'input'),
             "on": _extends({}, getInputEvents({
-              onInput: _this6.onInputChange,
+              onInput: _this7.onInputChange,
               onBlur: function onBlur(e) {
-                _this6.$emit('blur', e, _this6.triggerQuery);
+                _this7.$emit('blur', e, _this7.triggerQuery);
               },
-              onFocus: _this6.handleFocus,
+              onFocus: _this7.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this6.$emit('keyPress', e, _this6.triggerQuery);
+                _this7.$emit('keyPress', e, _this7.triggerQuery);
 
-                _this6.$emit('key-press', e, _this6.triggerQuery);
+                _this7.$emit('key-press', e, _this7.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this6.handleKeyDown(e, highlightedIndex);
+                return _this7.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this6.$emit('keyUp', e, _this6.triggerQuery);
+                _this7.$emit('keyUp', e, _this7.triggerQuery);
 
-                _this6.$emit('key-up', e, _this6.triggerQuery);
+                _this7.$emit('key-up', e, _this7.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this6.$data.currentValue === null ? '' : _this6.$data.currentValue
+              value: _this7.$data.currentValue === null ? '' : _this7.$data.currentValue
             }))
-          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
+          }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this7.renderInputAddonAfter(), _this7.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown()]);
         }
       }
     }) : h("div", {
@@ -1004,26 +1055,22 @@ var SearchBox = {
       },
       "on": _extends({}, {
         blur: function blur(e) {
-          _this6.$emit('blur', e, _this6.triggerQuery);
+          _this7.$emit('blur', e, _this7.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this6.$emit('keyPress', e, _this6.triggerQuery);
+          _this7.$emit('keyPress', e, _this7.triggerQuery);
 
-          _this6.$emit('key-press', e, _this6.triggerQuery);
+          _this7.$emit('key-press', e, _this7.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this6.$emit('focus', e, _this6.triggerQuery);
-        },
-        keydown: function keydown(e) {
-          _this6.$emit('keyDown', e, _this6.triggerQuery);
-
-          _this6.$emit('key-down', e, _this6.triggerQuery);
+          _this7.$emit('focus', e, _this7.triggerQuery);
         },
+        keydown: this.handleKeyDown,
         keyup: function keyup(e) {
-          _this6.$emit('keyUp', e, _this6.triggerQuery);
+          _this7.$emit('keyUp', e, _this7.triggerQuery);
 
-          _this6.$emit('key-up', e, _this6.triggerQuery);
+          _this7.$emit('key-up', e, _this7.triggerQuery);
         }
       }),
       "domProps": _extends({}, {
@@ -1031,7 +1078,7 @@ var SearchBox = {
         value: this.$data.currentValue ? this.$data.currentValue : ''
       }),
       "ref": this.$props.innerRef
-    }), this.renderIcons()]), this.renderInputAddonAfter()])])]);
+    }), this.renderIcons()]), this.renderInputAddonAfter(), this.renderEnterButtonElement()])])]);
   },
   destroyed: function destroyed() {
     document.removeEventListener('keydown', this.onKeyDown);