@appbaseio/reactivesearch-vue 1.35.5 → 1.36.1

package/dist/es/DataSearch.js

@@ -53,7 +53,8 @@ var DataSearch = {
       selectedTags: [],
       isOpen: false,
       normalizedSuggestions: [],
-      isPending: false
+      isPending: false,
+      isSuggestionSelected: false
     };
     this.internalComponent = props.componentId + "__internal";
     return this.__state;
@@ -293,12 +294,23 @@ var DataSearch = {
         this.updateQueryHandler(this.componentId, this.$data.currentValue, this.$props);
       }
     },
+    isLoading: function isLoading(newVal) {
+      if (newVal) {
+        this.suggestions = [];
+      }
+    },
     suggestions: function suggestions(newVal) {
+      if (this.isLoading) {
+        this.normalizedSuggestions = [];
+        return;
+      }
       if (Array.isArray(newVal) && this.$data.currentValue.trim().length) {
         // shallow check allows us to set suggestions even if the next set
         // of suggestions are same as the current one
         this.$emit('suggestions', newVal);
-        this.normalizedSuggestions = this.onSuggestions(newVal);
+        if (!isEqual(this.normalizedSuggestions, newVal)) {
+          this.normalizedSuggestions = this.onSuggestions(newVal);
+        }
       }
     },
     selectedValue: function selectedValue(newVal, oldVal) {
@@ -432,12 +444,11 @@ var DataSearch = {
           return;
         }
         // Refresh recent searches when value becomes empty
-        if (!value && props.enableDefaultSuggestions === false) {
-          _this.resetStoreForComponent(props.componentId);
-        } else if (!value && _this.currentValue && _this.enableRecentSearches) {
+        if (props.enableDefaultSuggestions && !value && _this.currentValue && _this.enableRecentSearches) {
           _this.getRecentSearches();
         }
         if (isTagsMode) {
+          var isTagAdded = false;
           if (Array.isArray(_this.selectedTags) && _this.selectedTags.length) {
             // check if value already present in selectedTags
             if (typeof value === 'string' && _this.selectedTags.includes(value)) {
@@ -446,14 +457,36 @@ var DataSearch = {
             }
             _this.selectedTags = [].concat(_this.selectedTags);
             if (typeof value === 'string' && !!value) {
-              _this.selectedTags.push(value);
+              if (props.strictSelection && cause === 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 === 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 === 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 = value;
         }
@@ -473,7 +506,7 @@ var DataSearch = {
           if (props.strictSelection && props.autosuggest) {
             if (cause === causes.SUGGESTION_SELECT || props.value !== undefined) {
               _this.updateQueryHandler(props.componentId, queryHandlerValue, props);
-            } else if (_this.currentValue !== '') {
+            } else if (_this.currentValue !== '' && !props.strictSelection) {
               _this.setValue('', true);
             }
           } else {
@@ -487,12 +520,12 @@ var DataSearch = {
         _this.$emit('value-change', value);
         // Set the already fetched suggestions if query is same as used last to fetch the hits
         if (value === _this.lastUsedQuery) {
-          _this.suggestions = _this.onSuggestions(_this.suggestions);
+          _this.normalizedSuggestions = _this.onSuggestions(_this.suggestions);
           // invoke on suggestions
           _this.$emit('suggestions', _this.suggestions);
         } else if (!value) {
           // reset suggestions
-          _this.suggestions = [];
+          _this.normalizedSuggestions = [];
           // invoke on suggestions
           _this.$emit('suggestions', _this.suggestions);
         }
@@ -503,11 +536,6 @@ var DataSearch = {
       if (props === void 0) {
         props = this.$props;
       }
-      if (!value && props.enableDefaultSuggestions === false) {
-        // clear Component data from store
-        this.resetStoreForComponent(props.componentId);
-        return;
-      }
       var defaultQueryOptions;
       var query = DataSearch.defaultQuery(value, props);
       if (this.defaultQuery) {
@@ -602,17 +630,17 @@ var DataSearch = {
       var targetValue = event.target.value;
       var _this$$props2 = this.$props,
         value = _this$$props2.value,
-        strictSelection = _this$$props2.strictSelection,
-        size = _this$$props2.size,
-        autosuggest = _this$$props2.autosuggest;
+        size = _this$$props2.size;
       if (value !== undefined) {
         this.isPending = true;
       }
       // if a suggestion was selected, delegate the handling to suggestion handler
       if (event.key === 'Enter' && (highlightedIndex === null || highlightedIndex < 0 || highlightedIndex === [].concat([].concat(this.suggestionsList).slice(0, size || 10), this.defaultSearchSuggestions, this.topSuggestions).length)) {
         this.isPending = false;
-        this.setValue(this.$options.isTagsMode && autosuggest && strictSelection ? '' : targetValue, true, this.$props, undefined, false);
-        this.onValueSelectedHandler(targetValue, causes.ENTER_PRESS);
+        if (!this.isSuggestionSelected) {
+          this.setValue(targetValue, true, this.$props, undefined, false);
+          this.onValueSelectedHandler(targetValue, causes.ENTER_PRESS);
+        }
       }
       // Need to review
       this.$emit('keyDown', event, this.triggerQuery);
@@ -648,11 +676,16 @@ var DataSearch = {
       }
     },
     onSuggestionSelected: function onSuggestionSelected(suggestion) {
+      var _this3 = this;
       var value = this.$props.value;
       // Record analytics for selected suggestions
       this.triggerClickAnalytics(suggestion._click_id);
       if (value === undefined) {
         this.setValue(suggestion.value, true, this.$props, causes.SUGGESTION_SELECT);
+        this.isSuggestionSelected = true;
+        setTimeout(function () {
+          _this3.isSuggestionSelected = false;
+        }, 50);
       } else if (this.$options.isTagsMode) {
         var emitValue = Array.isArray(this.selectedTags) ? [].concat(this.selectedTags) : [];
         if (this.selectedTags.includes(suggestion.value)) {
@@ -758,7 +791,7 @@ var DataSearch = {
       return null;
     },
     renderTag: function renderTag(item) {
-      var _this3 = this;
+      var _this4 = this;
       var h = this.$createElement;
       var innerClass = this.$props.innerClass;
       return h(TagItem, {
@@ -771,7 +804,7 @@ var DataSearch = {
         "class": "close-icon",
         "on": {
           "click": function click() {
-            return _this3.clearTag(item);
+            return _this4.clearTag(item);
           }
         }
       }, [h(CancelSvg)])]);
@@ -793,7 +826,7 @@ var DataSearch = {
       }
     },
     renderTags: function renderTags() {
-      var _this4 = this;
+      var _this5 = this;
       var h = this.$createElement;
       if (!Array.isArray(this.selectedTags)) {
         return null;
@@ -806,7 +839,7 @@ var DataSearch = {
         handleClear: this.clearTag,
         handleClearAll: this.clearAllTags
       }) : h(TagsContainer, [tagsList.map(function (item) {
-        return _this4.renderTag(item);
+        return _this5.renderTag(item);
       }), shouldRenderClearAllTag && h(TagItem, {
         "class": getClassName(this.$props.innerClass, 'selected-tag') || ''
       }, [h("span", ["Clear All"]), h("span", {
@@ -885,7 +918,7 @@ var DataSearch = {
       (_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 (isEmpty(focusShortcuts)) {
@@ -900,7 +933,7 @@ var DataSearch = {
       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
@@ -910,7 +943,7 @@ var DataSearch = {
         for (var index = 0; index < modifierKeys.length; index += 1) {
           var element = modifierKeys[index];
           if (hotkeys[element]) {
-            _this5.focusSearchBox(event);
+            _this6.focusSearchBox(event);
             break;
           }
         }
@@ -918,7 +951,7 @@ var DataSearch = {
     }
   },
   render: function render() {
-    var _this6 = this;
+    var _this7 = this;
     var h = arguments[0];
     var _this$$props6 = this.$props,
       theme = _this$$props6.theme,
@@ -953,14 +986,14 @@ var DataSearch = {
             highlightedIndex = _ref4.highlightedIndex,
             setHighlightedIndex = _ref4.setHighlightedIndex;
           var renderSuggestionsContainer = function renderSuggestionsContainer() {
-            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.suggestionsList.slice(0, size || 10).map(function (item, index) {
+            }), _this7.renderErrorComponent(), !_this7.hasCustomRenderer && isOpen && hasSuggestions ? h("ul", {
+              "class": suggestions(_this7.themePreset, theme) + " " + getClassName(_this7.$props.innerClass, 'list')
+            }, [_this7.suggestionsList.slice(0, size || 10).map(function (item, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: item
@@ -970,15 +1003,15 @@ var DataSearch = {
                 })),
                 "key": index + 1 + "-" + item.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, index)
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, index)
                 }
               }, [h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": item
                 }
               })]);
-            }), _this6.defaultSearchSuggestions.map(function (sugg, index) {
+            }), _this7.defaultSearchSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -986,9 +1019,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this7.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, _this7.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -997,28 +1030,28 @@ var DataSearch = {
                 }
               }, [sugg.source && sugg.source._recent_search && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'recent-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'recent-search-icon') || null,
                   "icon": recentSearchesIcon,
                   "type": "recent-search-icon"
                 }
               }), sugg.source && sugg.source._popular_suggestion && h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            }), hasQuerySuggestionsRenderer(_this6) ? _this6.getComponent({
+            }), hasQuerySuggestionsRenderer(_this7) ? _this7.getComponent({
               isOpen: isOpen,
               getItemProps: getItemProps,
               getItemEvents: getItemEvents,
               highlightedIndex: highlightedIndex
-            }, true) : _this6.topSuggestions.map(function (sugg, index) {
+            }, true) : _this7.topSuggestions.map(function (sugg, index) {
               return h("li", {
                 "domProps": _extends({}, getItemProps({
                   item: sugg
@@ -1026,9 +1059,9 @@ var DataSearch = {
                 "on": _extends({}, getItemEvents({
                   item: sugg
                 })),
-                "key": _this6.suggestionsList.length + index + 1 + "-" + sugg.value,
+                "key": _this7.suggestionsList.length + index + 1 + "-" + sugg.value,
                 "style": {
-                  backgroundColor: _this6.getBackgroundColor(highlightedIndex, _this6.suggestionsList.length + index),
+                  backgroundColor: _this7.getBackgroundColor(highlightedIndex, _this7.suggestionsList.length + index),
                   justifyContent: 'flex-start'
                 }
               }, [h("div", {
@@ -1037,58 +1070,58 @@ var DataSearch = {
                 }
               }, [h(CustomSvg, {
                 "attrs": {
-                  "className": getClassName(_this6.$props.innerClass, 'popular-search-icon') || null,
+                  "className": getClassName(_this7.$props.innerClass, 'popular-search-icon') || null,
                   "icon": popularSearchesIcon,
                   "type": "popular-search-icon"
                 }
               })]), h(SuggestionItem, {
                 "attrs": {
-                  "currentValue": _this6.currentValue,
+                  "currentValue": _this7.currentValue,
                   "suggestion": sugg
                 }
               })]);
-            })]) : _this6.renderNoSuggestions(_this6.suggestionsList)]);
+            })]) : _this7.renderNoSuggestions(_this7.suggestionsList)]);
           };
           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);
-                _this6.$emit('key-press', e, _this6.triggerQuery);
+                _this7.$emit('keyPress', e, _this7.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);
-                _this6.$emit('key-up', e, _this6.triggerQuery);
+                _this7.$emit('keyUp', e, _this7.triggerQuery);
+                _this7.$emit('key-up', e, _this7.triggerQuery);
               },
               onClick: function onClick() {
                 setHighlightedIndex(null);
               }
             })),
             "domProps": _extends({}, getInputProps({
-              value: _this6.$data.currentValue === null || typeof _this6.$data.currentValue !== 'string' ? '' : _this6.$data.currentValue
+              value: _this7.$data.currentValue === null || typeof _this7.$data.currentValue !== 'string' ? '' : _this7.$data.currentValue
             }))
-          }), _this6.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this6.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this6.renderTags()]);
+          }), _this7.renderIcons(), !expandSuggestionsContainer && renderSuggestionsContainer()]), ' ', _this7.renderInputAddonAfter()]), expandSuggestionsContainer && renderSuggestionsContainer(), _this7.renderTags()]);
         }
       }
     }) : h("div", {
@@ -1104,22 +1137,22 @@ var DataSearch = {
       },
       "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);
-          _this6.$emit('key-press', e, _this6.triggerQuery);
+          _this7.$emit('keyPress', e, _this7.triggerQuery);
+          _this7.$emit('key-press', e, _this7.triggerQuery);
         },
         input: this.onInputChange,
         focus: function focus(e) {
-          _this6.$emit('focus', e, _this6.triggerQuery);
+          _this7.$emit('focus', e, _this7.triggerQuery);
         },
         keydown: function keydown(e) {
-          _this6.handleKeyDown(e, null);
+          _this7.handleKeyDown(e, null);
         },
         keyup: function keyup(e) {
-          _this6.$emit('keyUp', e, _this6.triggerQuery);
-          _this6.$emit('key-up', e, _this6.triggerQuery);
+          _this7.$emit('keyUp', e, _this7.triggerQuery);
+          _this7.$emit('key-up', e, _this7.triggerQuery);
         }
       }),
       "domProps": _extends({}, {