@appbaseio/reactivesearch-vue 1.27.0 → 1.28.0

package/dist/cjs/initReactivesearch.js

@@ -18,10 +18,10 @@ var dependencyTreeReducer = _interopDefault(require('@appbaseio/reactivecore/lib
 var fetchGraphQL = _interopDefault(require('@appbaseio/reactivecore/lib/utils/graphQL'));
 var utils = require('@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 = [constants.componentTypes.dataSearch, constants.componentTypes.categorySearch];
-var componentsWithOptions = [constants.componentTypes.reactiveList, constants.componentTypes.reactiveMap, constants.componentTypes.singleList, constants.componentTypes.multiList, constants.componentTypes.tagCloud].concat(componentsWithHighlightQuery);
 var componentsWithoutFilters = [constants.componentTypes.numberBox, constants.componentTypes.ratingsFilter];
 var resultComponents = [constants.componentTypes.reactiveList, constants.componentTypes.reactiveMap];
 
@@ -55,23 +55,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 _rollupPluginBabelHelpers._extends({
+      query: helper.extractQueryFromCustomQuery(defaultQuery)
+    }, helper.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 _rollupPluginBabelHelpers._extends({
+      query: helper.extractQueryFromCustomQuery(customQuery)
+    }, helper.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) {
@@ -126,6 +143,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;
@@ -157,74 +179,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 = _rollupPluginBabelHelpers._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 = _rollupPluginBabelHelpers._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 = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_ref, _excluded);
+
+        if (aggs && Object.keys(aggs).length) {
+          isInternalComponentPresent = true;
+          componentQueryOptions = _rollupPluginBabelHelpers._extends({}, componentQueryOptions, {
+            aggs: aggs,
+            size: typeof size === 'undefined' ? 100 : size
+          });
+        } // sort, highlight, size, from - query should be applied on the main component
 
-            var mainQueryOptions = _rollupPluginBabelHelpers._extends({}, otherQueryOptions, highlightQuery, {
-              size: size
-            });
 
-            if (isInternalComponentPresent) {
-              mainQueryOptions = _rollupPluginBabelHelpers._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 = _rollupPluginBabelHelpers._extends({}, otherQueryOptions, highlightQuery, {
+            size: size
+          });
 
-              if (selectedValues[component.componentId] && selectedValues[component.componentId].value) {
-                currentPage = selectedValues[component.componentId].value - 1 || 0;
-              }
+          if (isInternalComponentPresent) {
+            mainQueryOptions = _rollupPluginBabelHelpers._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 = _rollupPluginBabelHelpers._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: _rollupPluginBabelHelpers._extends({}, mainQueryOptions)
+            var resultSize = component.size || 10;
+            var from = currentPage * resultSize; // Update props for RS API
+
+            compProps.from = from;
+            mainQueryOptions = _rollupPluginBabelHelpers._extends({}, mainQueryOptions, highlightQuery, {
+              size: resultSize,
+              from: from
             });
           }
+
+          componentQueryOptions = _rollupPluginBabelHelpers._extends({}, componentQueryOptions, mainQueryOptions);
         }
       } // [3] set dependency tree
 
@@ -242,25 +256,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 && !transform.isSearchComponent(component.componentType)) {
+        var _ref2 = getDefaultQuery(component, value) || {},
+            defaultQuery = _ref2.query,
+            defaultQueryOptions = _rollupPluginBabelHelpers._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: _rollupPluginBabelHelpers._extends({}, componentQueryOptions, defaultQueryOptions)
         });
-      } // Set component type in component props
+      }
+
+      var _ref3 = getCustomQuery(component, value) || {},
+          query = _ref3.query,
+          options = _rollupPluginBabelHelpers._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: _rollupPluginBabelHelpers._extends({}, options)
+      }); // Set component type in component props
 
       compProps.componentType = componentType;
       componentProps[component.componentId] = compProps;
@@ -283,9 +314,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;
@@ -300,7 +332,7 @@ function initReactivesearch(componentCollection, searchState, settings) {
 
         var currentQuery = _rollupPluginBabelHelpers._extends({
           query: _rollupPluginBabelHelpers._extends({}, queryObj)
-        }, options, queryOptions[component.componentId]);
+        }, componentQueryOptions, queryOptions[component.componentId]);
 
         queryLog = _rollupPluginBabelHelpers._extends({}, queryLog, (_extends2 = {}, _extends2[component.componentId] = currentQuery, _extends2));
 

package/dist/cjs/version.js

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

package/dist/es/DataSearch.js

@@ -873,7 +873,8 @@ var updateQuery = Actions.updateQuery,
 var debounce = helper.debounce,
     checkValueChange = helper.checkValueChange,
     getClassName$1 = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery,
     isEqual = helper.isEqual,
     getCompositeAggsQuery = helper.getCompositeAggsQuery,
     withClickIds = helper.withClickIds,
@@ -1331,12 +1332,13 @@ var DataSearch = {
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
         }
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
+        defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
       }
@@ -1360,13 +1362,13 @@ var DataSearch = {
 
       if (customQuery) {
         var customQueryTobeSet = customQuery(value, props);
-        var queryTobeSet = customQueryTobeSet.query;
+        var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
 
         if (queryTobeSet) {
           query = queryTobeSet;
         }
 
-        customQueryOptions = getOptionsFromQuery(customQueryTobeSet);
+        customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
         this.setQueryOptions(componentId, _extends({}, this.queryOptions, customQueryOptions), false);
       }
@@ -2055,6 +2057,10 @@ DataSearch.highlightQuery = function (props) {
   };
 };
 
+DataSearch.hasInternalComponent = function () {
+  return true;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
@@ -2092,7 +2098,7 @@ var mapDispatchToProps = {
 };
 var DSConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchToProps)(DataSearch), {
   componentType: componentTypes.dataSearch,
-  internalComponent: true
+  internalComponent: DataSearch.hasInternalComponent()
 });
 
 DataSearch.install = function (Vue) {

package/dist/es/DynamicRangeSlider.js

@@ -22,9 +22,10 @@ var addComponent = Actions.addComponent,
     updateComponentProps = Actions.updateComponentProps;
 var checkValueChange = helper.checkValueChange,
     getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
     isEqual = helper.isEqual,
-    checkSomePropChange = helper.checkSomePropChange;
+    checkSomePropChange = helper.checkSomePropChange,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var DynamicRangeSlider = {
   name: 'DynamicRangeSlider',
   components: getComponents(),
@@ -232,28 +233,31 @@ var DynamicRangeSlider = {
     },
     updateQueryHandler: function updateQueryHandler(value) {
       var query = DynamicRangeSlider.defaultQuery(value, this.$props);
-      var customQueryOptions;
 
       if (this.$props.customQuery) {
-        var _ref2 = this.$props.customQuery(value, this.$props) || {};
+        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
+        var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
 
-        query = _ref2.query;
-        customQueryOptions = getOptionsFromQuery(this.$props.customQuery(value, this.$props));
+        if (queryTobeSet) {
+          query = queryTobeSet;
+        }
+
+        var customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
         updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
+        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
       }
 
-      var _ref3 = this.range || {
+      var _ref2 = this.range || {
         start: value[0],
         end: value[1]
       },
-          start = _ref3.start,
-          end = _ref3.end;
+          start = _ref2.start,
+          end = _ref2.end;
 
       var currentStart = value[0],
           currentEnd = value[1]; // check if the slider is at its initial position
 
       var isInitialValue = currentStart === start && currentEnd === end;
-      this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: this.$props.componentId,
         query: query,
@@ -300,13 +304,13 @@ var DynamicRangeSlider = {
     range: function range(newValue, oldValue) {
       if (isEqual(newValue, oldValue) || !this.currentValue) return;
 
-      var _ref4 = this.currentValue || [],
-          currentStart = _ref4[0],
-          currentEnd = _ref4[1];
+      var _ref3 = this.currentValue || [],
+          currentStart = _ref3[0],
+          currentEnd = _ref3[1];
 
-      var _ref5 = oldValue || {},
-          oldStart = _ref5.start,
-          oldEnd = _ref5.end;
+      var _ref4 = oldValue || {},
+          oldStart = _ref4.start,
+          oldEnd = _ref4.end;
 
       var newStart = currentStart === oldStart ? newValue.start : currentStart;
       var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
@@ -401,6 +405,10 @@ DynamicRangeSlider.parseValue = function (value) {
   return [];
 };
 
+DynamicRangeSlider.hasInternalComponent = function () {
+  return true;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   var componentId = state.aggregations[props.componentId];
   var internalRange = state.aggregations[props.componentId + "__range__internal"];

package/dist/es/MultiDropdownList.js

@@ -30,8 +30,9 @@ var isEqual = helper.isEqual,
     checkValueChange = helper.checkValueChange,
     checkPropChange = helper.checkPropChange,
     getClassName = helper.getClassName,
-    getOptionsFromQuery = helper.getOptionsFromQuery,
-    getCompositeAggsQuery = helper.getCompositeAggsQuery;
+    getCompositeAggsQuery = helper.getCompositeAggsQuery,
+    extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
+    getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
 var MultiDropdownList = {
   name: 'MultiDropdownList',
   data: function data() {
@@ -69,7 +70,7 @@ var MultiDropdownList = {
     selectAllLabel: types.string,
     showCount: VueTypes.bool.def(true),
     showFilter: VueTypes.bool.def(true),
-    size: VueTypes.number.def(100),
+    size: VueTypes.number,
     sortBy: VueTypes.oneOf(['asc', 'desc', 'count']).def('count'),
     title: types.title,
     URLParams: VueTypes.bool.def(false),
@@ -355,22 +356,22 @@ var MultiDropdownList = {
       checkValueChange(props.componentId, finalValues, props.beforeValueChange, performUpdate);
     },
     updateDefaultQueryHandler: function updateDefaultQueryHandler(value, props) {
-      var defaultQueryOptions;
       var query = MultiDropdownList.defaultQuery(value, props);
 
       if (this.defaultQuery) {
         var defaultQueryToBeSet = this.defaultQuery(value, props) || {};
+        var defaultQueryObj = extractQueryFromCustomQuery(defaultQueryToBeSet);
 
-        if (defaultQueryToBeSet.query) {
-          query = defaultQueryToBeSet.query;
-        }
+        if (defaultQueryObj) {
+          query = defaultQueryObj;
+        } // Update calculated default query in store
 
-        defaultQueryOptions = getOptionsFromQuery(defaultQueryToBeSet); // Update calculated default query in store
 
         updateDefaultQuery(props.componentId, this.setDefaultQuery, props, value);
+        var defaultQueryOptions = getOptionsForCustomQuery(defaultQueryToBeSet);
+        this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       }
 
-      this.setQueryOptions(this.internalComponent, defaultQueryOptions, false);
       this.updateQuery({
         componentId: this.internalComponent,
         query: query,
@@ -381,17 +382,15 @@ var MultiDropdownList = {
     updateQueryHandler: function updateQueryHandler(value, props) {
       var customQuery = props.customQuery;
       var query = MultiDropdownList.defaultQuery(value, props);
-      var customQueryOptions;
 
       if (customQuery) {
-        var _ref = customQuery(value, props) || {};
-
-        query = _ref.query;
-        customQueryOptions = getOptionsFromQuery(customQuery(value, props));
+        var customQueryCalc = customQuery(value, props);
+        query = extractQueryFromCustomQuery(customQueryCalc);
         updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
+        var customQueryOptions = getOptionsForCustomQuery(customQueryCalc);
+        this.setQueryOptions(props.componentId, customQueryOptions, false);
       }
 
-      this.setQueryOptions(props.componentId, customQueryOptions, false);
       this.updateQuery({
         componentId: props.componentId,
         query: query,
@@ -425,7 +424,7 @@ var MultiDropdownList = {
 
       if (props.defaultQuery) {
         var value = Object.keys(this.$data.currentValue);
-        var defaultQueryOptions = getOptionsFromQuery(props.defaultQuery(value, props));
+        var defaultQueryOptions = getOptionsForCustomQuery(props.defaultQuery(value, props));
         this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, defaultQueryOptions));
       } else {
         this.setQueryOptions(this.internalComponent, queryOptions);
@@ -461,7 +460,13 @@ var MultiDropdownList = {
 
 MultiDropdownList.defaultQuery = function (value, props) {
   var query = null;
-  var type = props.queryFormat === 'or' ? 'terms' : 'term';
+  var queryFormat = props.queryFormat;
+
+  if (queryFormat === undefined) {
+    queryFormat = 'or';
+  }
+
+  var type = queryFormat === 'or' ? 'terms' : 'term';
 
   if (!Array.isArray(value) || value.length === 0) {
     return null;
@@ -482,14 +487,14 @@ MultiDropdownList.defaultQuery = function (value, props) {
   } else if (value) {
     var listQuery;
 
-    if (props.queryFormat === 'or') {
+    if (queryFormat === 'or') {
       if (props.showMissing) {
-        var _type, _ref2;
+        var _type, _ref;
 
         var hasMissingTerm = value.includes(props.missingLabel);
-        var should = [(_ref2 = {}, _ref2[type] = (_type = {}, _type[props.dataField] = value.filter(function (item) {
+        var should = [(_ref = {}, _ref[type] = (_type = {}, _type[props.dataField] = value.filter(function (item) {
           return item !== props.missingLabel;
-        }), _type), _ref2)];
+        }), _type), _ref)];
 
         if (hasMissingTerm) {
           should = should.concat({
@@ -516,9 +521,9 @@ MultiDropdownList.defaultQuery = function (value, props) {
     } else {
       // adds a sub-query with must as an array of objects for each term/value
       var queryArray = value.map(function (item) {
-        var _type3, _ref3;
+        var _type3, _ref2;
 
-        return _ref3 = {}, _ref3[type] = (_type3 = {}, _type3[props.dataField] = item, _type3), _ref3;
+        return _ref2 = {}, _ref2[type] = (_type3 = {}, _type3[props.dataField] = item, _type3), _ref2;
       });
       listQuery = {
         bool: {
@@ -553,6 +558,10 @@ MultiDropdownList.generateQueryOptions = function (props, after) {
   }) : getAggsQuery(queryOptions, props);
 };
 
+MultiDropdownList.hasInternalComponent = function () {
+  return true;
+};
+
 var mapStateToProps = function mapStateToProps(state, props) {
   return {
     options: props.nestedField && state.aggregations[props.componentId] ? state.aggregations[props.componentId].reactivesearch_nested : state.aggregations[props.componentId],
@@ -574,7 +583,7 @@ var mapDispatchtoProps = {
 };
 var ListConnected = ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(MultiDropdownList), {
   componentType: componentTypes.multiDropdownList,
-  internalComponent: true
+  internalComponent: MultiDropdownList.hasInternalComponent()
 });
 
 MultiDropdownList.install = function (Vue) {