@appbaseio/reactivesearch-vue 1.35.2 → 1.35.3

package/dist/cjs/{ReactiveComponentPrivate-1f2d132b.js → ReactiveComponentPrivate-b7df895b.js}

@@ -83,7 +83,8 @@ var SearchBox = {
       currentValue: '',
       selectedTags: [],
       isOpen: false,
-      normalizedSuggestions: []
+      normalizedSuggestions: [],
+      isSuggestionSelected: false
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -283,7 +284,9 @@ var SearchBox = {
         if (this.$options.isTagsMode) {
           cause = configureStore.causes.SUGGESTION_SELECT;
         }
-        this.setValue(newVal || '', true, this.$props, cause);
+        if (!this.isSuggestionSelected) {
+          this.setValue(newVal || '', true, this.$props, cause);
+        }
       }
     },
     focusShortcuts: function focusShortcuts() {
@@ -412,10 +415,11 @@ var SearchBox = {
         categoryValue = undefined;
       }
       var performUpdate = function performUpdate() {
+        var isTagAdded = false;
         if (_this.$options.isTagsMode && isEqual(value, _this.selectedTags)) {
           return;
         }
-        if (_this.$options.isTagsMode && cause === configureStore.causes.SUGGESTION_SELECT) {
+        if (_this.$options.isTagsMode) {
           if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
             // check if value already present in selectedTags
             if (typeof value === 'string' && _this.selectedTags.includes(value)) {
@@ -424,14 +428,36 @@ var SearchBox = {
             }
             _this.selectedTags = [].concat(_this.selectedTags);
             if (typeof value === 'string' && !!value) {
-              _this.selectedTags.push(value);
+              if (props.strictSelection && cause === configureStore.causes.SUGGESTION_SELECT) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              } else if (!props.strictSelection) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              }
             } else if (Array.isArray(value) && !isEqual(_this.selectedTags, value)) {
-              _this.selectedTags = value;
+              if (props.strictSelection && cause === configureStore.causes.SUGGESTION_SELECT) {
+                _this.selectedTags = value;
+                isTagAdded = true;
+              } else if (!props.strictSelection) {
+                _this.selectedTags.push(value);
+                isTagAdded = true;
+              }
             }
           } else if (value) {
-            _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+            if (props.strictSelection && cause === configureStore.causes.SUGGESTION_SELECT) {
+              _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+              isTagAdded = true;
+            } else if (!props.strictSelection) {
+              _this.selectedTags = typeof value !== 'string' ? value : [].concat(value);
+              isTagAdded = true;
+            }
+          }
+          if (props.strictSelection && !isTagAdded) {
+            _this.currentValue = value;
+          } else {
+            _this.currentValue = '';
           }
-          _this.currentValue = '';
         } else {
           _this.currentValue = index.decodeHtml(value);
         }
@@ -444,16 +470,22 @@ var SearchBox = {
             if (toggleIsOpen) {
               _this.isOpen = false;
             }
-            if (typeof _this.currentValue === 'string') _this.triggerDefaultQuery(_this.currentValue);
+            if (typeof _this.currentValue === 'string') {
+              if (_this.$options.isTagsMode && props.strictSelection && isTagAdded) {
+                _this.triggerDefaultQuery(_this.currentValue);
+              } else if (!_this.$options.isTagsMode) {
+                _this.triggerDefaultQuery(_this.currentValue);
+              }
+            }
           } // in case of strict selection only SUGGESTION_SELECT should be able
           // to set the query otherwise the value should reset
-          if (props.strictSelection) {
+          if (_this.$options.isTagsMode && props.strictSelection && isTagAdded) {
             if (cause === configureStore.causes.SUGGESTION_SELECT || (_this.$options.isTagsMode ? _this.selectedTags.length === 0 : value === '')) {
               _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
-            } else {
+            } else if (!props.strictSelection) {
               _this.setValue('', true);
             }
-          } else if (props.value === undefined || cause === configureStore.causes.SUGGESTION_SELECT || cause === configureStore.causes.CLEAR_VALUE) {
+          } else if (!_this.$options.isTagsMode && (props.value === undefined || cause === configureStore.causes.SUGGESTION_SELECT || cause === configureStore.causes.CLEAR_VALUE)) {
             _this.triggerCustomQuery(queryHandlerValue, _this.$options.isTagsMode ? undefined : categoryValue);
           }
         } else {
@@ -572,6 +604,7 @@ var SearchBox = {
       this.onValueSelectedHandler('', configureStore.causes.CLEAR_VALUE);
     },
     handleKeyDown: function handleKeyDown(event, highlightedIndex) {
+      var _this2 = this;
       if (highlightedIndex === void 0) {
         highlightedIndex = null;
       }
@@ -580,7 +613,11 @@ var SearchBox = {
         if (this.$props.autosuggest === false) {
           this.enterButtonOnClick();
         } else if (highlightedIndex === null) {
-          this.setValue(event.target.value, true, this.$props, this.$options.isTagsMode ? configureStore.causes.SUGGESTION_SELECT : undefined // to handle tags
+          this.isSuggestionSelected = true;
+          setTimeout(function () {
+            _this2.isSuggestionSelected = false;
+          }, 50);
+          this.setValue(event.target.value, true, this.$props, undefined // to handle tags
           );
 
           this.onValueSelectedHandler(event.target.value, configureStore.causes.ENTER_PRESS);
@@ -592,7 +629,7 @@ var SearchBox = {
       this.$emit('key-down', event, this.triggerQuery);
     },
     onInputChange: function onInputChange(e) {
-      var _this2 = this;
+      var _this3 = this;
       var inputValue = e.target.value;
       if (!this.$data.isOpen && this.$props.autosuggest) {
         this.isOpen = true;
@@ -603,7 +640,7 @@ var SearchBox = {
       } else {
         this.$emit('change', inputValue, function (_ref3) {
           var isOpen = _ref3.isOpen;
-          return _this2.triggerQuery({
+          return _this3.triggerQuery({
             defaultQuery: true,
             customQuery: true,
             value: inputValue,
@@ -613,7 +650,7 @@ var SearchBox = {
       }
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
-      var _this3 = this;
+      var _this4 = this;
       this.isOpen = false;
       var value = this.$props.value;
       // Record analytics for selected suggestions
@@ -634,10 +671,10 @@ var SearchBox = {
         this.setValue(emitValue, true, this.$props, configureStore.causes.SUGGESTION_SELECT, false, suggestion._category);
         this.$emit('change', emitValue, function (_ref4) {
           var isOpen = _ref4.isOpen;
-          return _this3.triggerQuery(_rollupPluginBabelHelpers._extends({
+          return _this4.triggerQuery(_rollupPluginBabelHelpers._extends({
             isOpen: isOpen,
             value: emitValue
-          }, !_this3.$options.isTagsMode && {
+          }, !_this4.$options.isTagsMode && {
             categoryValue: suggestion._category
           }));
         });
@@ -752,7 +789,7 @@ var SearchBox = {
       });
     },
     renderEnterButtonElement: function renderEnterButtonElement() {
-      var _this4 = this;
+      var _this5 = this;
       var h = this.$createElement;
       var _this$$props4 = this.$props,
         enterButton = _this$$props4.enterButton,
@@ -761,7 +798,7 @@ var SearchBox = {
       if (enterButton) {
         var getEnterButtonMarkup = function getEnterButtonMarkup() {
           if (renderEnterButton) {
-            return renderEnterButton(_this4.enterButtonOnClick);
+            return renderEnterButton(_this5.enterButtonOnClick);
           }
           return h(Button.Button, {
             "class": "enter-btn " + getClassName(innerClass, 'enter-button'),
@@ -769,7 +806,7 @@ var SearchBox = {
               "primary": true
             },
             "on": {
-              "click": _this4.enterButtonOnClick
+              "click": _this5.enterButtonOnClick
             }
           }, ["Search"]);
         };
@@ -836,7 +873,7 @@ var SearchBox = {
       (_this$$refs = this.$refs) == null || (_this$$refs = _this$$refs[this.$props.innerRef]) == null ? void 0 : _this$$refs.focus(); // eslint-disable-line
     },
     listenForFocusShortcuts: function listenForFocusShortcuts() {
-      var _this5 = this;
+      var _this6 = this;
       var _this$$props$focusSho = this.$props.focusShortcuts,
         focusShortcuts = _this$$props$focusSho === void 0 ? ['/'] : _this$$props$focusSho;
       if (index.isEmpty(focusShortcuts)) {
@@ -851,7 +888,7 @@ var SearchBox = {
       function (event, handler) {
         // Prevent the default refresh event under WINDOWS system
         event.preventDefault();
-        _this5.focusSearchBox(event);
+        _this6.focusSearchBox(event);
       });
 
       // if one of modifier keys are used, they are handled below
@@ -861,7 +898,7 @@ var SearchBox = {
         for (var index$1 = 0; index$1 < modifierKeys.length; index$1 += 1) {
           var element = modifierKeys[index$1];
           if (hotkeys[element]) {
-            _this5.focusSearchBox(event);
+            _this6.focusSearchBox(event);
             break;
           }
         }
@@ -874,11 +911,11 @@ var SearchBox = {
       this.triggerDefaultQuery(value);
     },
     renderAutoFill: function renderAutoFill(suggestion) {
-      var _this6 = this;
+      var _this7 = this;
       var h = this.$createElement;
       var handleAutoFillClick = function handleAutoFillClick(e) {
         e.stopPropagation();
-        _this6.onAutofillClick(suggestion);
+        _this7.onAutofillClick(suggestion);
       };
       /* 👇 avoid showing autofill for category suggestions👇 */
       return suggestion._category ? null : h(AutoFillSvg, {
@@ -888,7 +925,7 @@ var SearchBox = {
       });
     },
     renderTag: function renderTag(item) {
-      var _this7 = this;
+      var _this8 = this;
       var h = this.$createElement;
       var innerClass = this.$props.innerClass;
       return h(Tags.TagItem, {
@@ -901,7 +938,7 @@ var SearchBox = {
         "class": "close-icon",
         "on": {
           "click": function click() {
-            return _this7.clearTag(item);
+            return _this8.clearTag(item);
           }
         }
       }, [h(CancelSvg.CancelSvg)])]);
@@ -923,7 +960,7 @@ var SearchBox = {
       }
     },
     renderTags: function renderTags() {
-      var _this8 = this;
+      var _this9 = this;
       var h = this.$createElement;
       if (!Array.isArray(this.selectedTags)) {
         return null;
@@ -936,7 +973,7 @@ var SearchBox = {
         handleClear: this.clearTag,
         handleClearAll: this.clearAllTags
       }) : h(Tags.TagsContainer, [tagsList.map(function (item) {
-        return _this8.renderTag(item);
+        return _this9.renderTag(item);
       }), shouldRenderClearAllTag && h(Tags.TagItem, {
         "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
       }, [h("span", ["Clear All"]), h("span", {
@@ -952,7 +989,7 @@ var SearchBox = {
     }
   },
   render: function render() {
-    var _this9 = this;
+    var _this10 = this;
     var h = arguments[0];
     var _this$$props6 = this.$props,
       theme = _this$$props6.theme,
@@ -993,14 +1030,14 @@ var SearchBox = {
                   return null;
               }
             };
-            return h("div", [_this9.hasCustomRenderer && _this9.getComponent({
+            return h("div", [_this10.hasCustomRenderer && _this10.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }), _this9.renderErrorComponent(), !_this9.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
-              "class": Input.suggestions(_this9.themePreset, theme) + " " + getClassName(_this9.$props.innerClass, 'list')
-            }, [_this9.normalizedSuggestions.map(function (item, index) {
+            }), _this10.renderErrorComponent(), !_this10.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": Input.suggestions(_this10.themePreset, theme) + " " + getClassName(_this10.$props.innerClass, 'list')
+            }, [_this10.normalizedSuggestions.map(function (item, index) {
               return renderItem ? h("li", {
                 "domProps": _rollupPluginBabelHelpers._extends({}, getItemProps({
                   item: item
@@ -1010,7 +1047,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this10.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -1023,7 +1060,7 @@ var SearchBox = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this9.getBackgroundColor(highlightedIndex, index),
+                  backgroundColor: _this10.getBackgroundColor(highlightedIndex, index),
                   justifyContent: 'flex-start',
                   alignItems: 'center'
                 }
@@ -1034,58 +1071,58 @@ var SearchBox = {
                 }
               }, [h(Tags.CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this9.$props.innerClass, item._suggestion_type + "-search-icon") || null,
+                  "className": getClassName(_this10.$props.innerClass, item._suggestion_type + "-search-icon") || null,
                   "icon": getIcon(item._suggestion_type),
                   "type": item._suggestion_type + "-search-icon"
                 }
               })]), h(Tags.SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this9.currentValue,
+                  "currentValue": _this10.currentValue,
                   "suggestion": item
                 }
-              }), _this9.renderAutoFill(item)]);
-            })]) : _this9.renderNoSuggestions(_this9.normalizedSuggestions)]);
+              }), _this10.renderAutoFill(item)]);
+            })]) : _this10.renderNoSuggestions(_this10.normalizedSuggestions)]);
           };
           return h("div", {
             "class": Input.suggestionsContainer
-          }, [h(Tags.InputGroup, [_this9.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
+          }, [h(Tags.InputGroup, [_this10.renderInputAddonBefore(), h(CancelSvg.InputWrapper, [h(Input.Input, {
             "attrs": {
-              "id": _this9.$props.componentId + "-input",
-              "showIcon": _this9.$props.showIcon,
-              "showClear": _this9.$props.showClear,
-              "iconPosition": _this9.$props.iconPosition,
-              "placeholder": _this9.$props.placeholder,
-              "autoFocus": _this9.$props.autoFocus,
-              "themePreset": _this9.themePreset,
+              "id": _this10.$props.componentId + "-input",
+              "showIcon": _this10.$props.showIcon,
+              "showClear": _this10.$props.showClear,
+              "iconPosition": _this10.$props.iconPosition,
+              "placeholder": _this10.$props.placeholder,
+              "autoFocus": _this10.$props.autoFocus,
+              "themePreset": _this10.themePreset,
               "autocomplete": "off"
             },
-            "ref": _this9.$props.innerRef,
-            "class": getClassName(_this9.$props.innerClass, 'input'),
+            "ref": _this10.$props.innerRef,
+            "class": getClassName(_this10.$props.innerClass, 'input'),
             "on": _rollupPluginBabelHelpers._extends({}, getInputEvents({
-              onInput: _this9.onInputChange,
+              onInput: _this10.onInputChange,
               onBlur: function onBlur(e) {
-                _this9.$emit('blur', e, _this9.triggerQuery);
+                _this10.$emit('blur', e, _this10.triggerQuery);
               },
-              onFocus: _this9.handleFocus,
+              onFocus: _this10.handleFocus,
               onKeyPress: function onKeyPress(e) {
-                _this9.$emit('keyPress', e, _this9.triggerQuery);
-                _this9.$emit('key-press', e, _this9.triggerQuery);
+                _this10.$emit('keyPress', e, _this10.triggerQuery);
+                _this10.$emit('key-press', e, _this10.triggerQuery);
               },
               onKeyDown: function onKeyDown(e) {
-                return _this9.handleKeyDown(e, highlightedIndex);
+                return _this10.handleKeyDown(e, highlightedIndex);
               },
               onKeyUp: function onKeyUp(e) {
-                _this9.$emit('keyUp', e, _this9.triggerQuery);
-                _this9.$emit('key-up', e, _this9.triggerQuery);
+                _this10.$emit('keyUp', e, _this10.triggerQuery);
+                _this10.$emit('key-up', e, _this10.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _rollupPluginBabelHelpers._extends({}, getInputProps({
-              value: _this9.$data.currentValue === null ? '' : _this9.$data.currentValue
+              value: _this10.$data.currentValue === null ? '' : _this10.$data.currentValue
             }))
-          }), _this9.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this9.renderInputAddonAfter(), _this9.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this9.renderTags()]);
+          }), _this10.renderIcons(), !expandSuggestionsContainer && renderSuggestionsDropdown()]), _this10.renderInputAddonAfter(), _this10.renderEnterButtonElement()]), expandSuggestionsContainer && renderSuggestionsDropdown(), _this10.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1101,20 +1138,20 @@ var SearchBox = {
       },
       "on": _rollupPluginBabelHelpers._extends({}, {
         blur: function blur(e) {
-          _this9.$emit('blur', e, _this9.triggerQuery);
+          _this10.$emit('blur', e, _this10.triggerQuery);
         },
         keypress: function keypress(e) {
-          _this9.$emit('keyPress', e, _this9.triggerQuery);
-          _this9.$emit('key-press', e, _this9.triggerQuery);
+          _this10.$emit('keyPress', e, _this10.triggerQuery);
+          _this10.$emit('key-press', e, _this10.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this9.$emit('focus', e, _this9.triggerQuery);
+          _this10.$emit('focus', e, _this10.triggerQuery);
         },
         keydown: this.handleKeyDown,
         keyup: function keyup(e) {
-          _this9.$emit('keyUp', e, _this9.triggerQuery);
-          _this9.$emit('key-up', e, _this9.triggerQuery);
+          _this10.$emit('keyUp', e, _this10.triggerQuery);
+          _this10.$emit('key-up', e, _this10.triggerQuery);
         }
       }),
       "domProps": _rollupPluginBabelHelpers._extends({}, {

package/dist/cjs/ReactiveComponentPrivate.js

@@ -31,7 +31,7 @@ require('./Input-ead4cd84.js');
 require('compute-scroll-into-view');
 require('./Container-e699ea95.js');
 require('vue-highlight-words');
-var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-1f2d132b.js');
+var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-b7df895b.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 require('./FormControlList-bbb5cd24.js');
 require('./utils-83fd01e9.js');

package/dist/cjs/index.js

@@ -37,7 +37,7 @@ require('compute-scroll-into-view');
 require('./Container-e699ea95.js');
 require('vue-highlight-words');
 var DataSearch = require('./DataSearch.js');
-var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-1f2d132b.js');
+var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-b7df895b.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 require('./FormControlList-bbb5cd24.js');
 require('./utils-83fd01e9.js');

package/dist/cjs/install.js

@@ -37,7 +37,7 @@ require('compute-scroll-into-view');
 require('./Container-e699ea95.js');
 require('vue-highlight-words');
 var DataSearch = require('./DataSearch.js');
-var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-1f2d132b.js');
+var ReactiveComponentPrivate = require('./ReactiveComponentPrivate-b7df895b.js');
 require('@appbaseio/reactivecore/lib/utils/suggestions');
 require('./FormControlList-bbb5cd24.js');
 require('./utils-83fd01e9.js');

package/dist/cjs/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.35.2";
+var version = "1.35.3";
 
 exports.default = version;