@marcura/marcura-combobox 4.7.1 → 4.7.2

package/bundles/marcura-marcura-combobox.umd.js

@@ -1550,6 +1550,14 @@
             _this.defaultValue = [];
             _this.hasCssClass = true;
             _this.allowCustom = false;
+            /**
+             * This field contains factory method which takes a custom text input and returns an Observable<TItem>.
+             * The observable sends the text to a remote service, which processes it and returns a generated TItem.
+             * Works when allowCustom is true.
+             *
+             * @memberof MultiselectComponent
+             */
+            _this.itemFactory$ = undefined;
             _this.changed = new core.EventEmitter();
             _this.isReadOnlyTag = null;
             _this.isActivatedTag = function () { return false; };
@@ -1563,11 +1571,10 @@
                 var _c;
                 return _c = {}, _c[_this.valueField] = null, _c[_this.textField] = text, _c;
             };
-            _this.valueNormalizer = function (text$) { return text$.pipe(operators.map(function () {
+            _this.valueNormalizer = function (text$) { return text$.pipe(operators.switchMap(function () {
                 var _a, _b;
-                var value = null;
                 if (!_this.component) {
-                    return value;
+                    return rxjs.of(null);
                 }
                 // Can't use this._searchText.value here as it might be empty, consider:
                 // 1) type custom text, 2) focus out and back in 3) there's a text in searchbar,
@@ -1575,41 +1582,35 @@
                 // So this.component.searchbar.value is to be used.
                 var text = (_this.component.searchbar.value || '').trim();
                 if (!text) {
-                    return value;
+                    return rxjs.of(null);
                 }
                 var matchingValue = (_b = (_a = _this.component.value) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item[_this.textField].toLowerCase() === text.toLowerCase(); })) !== null && _b !== void 0 ? _b : null;
                 // Handle case when value already contains items that match the search text.
                 if (matchingValue) {
-                    value = matchingValue;
+                    return rxjs.of(matchingValue);
                 }
                 // If no matches found in the selected values, check if item is in cache.
-                else if (_this.getItem(_this._valueNormalizerItems, text)) {
-                    // If areItemsCached is off, then this.data will be lost by this moment,
-                    // so we use a cache this.valueNormalizerItems.
-                    // This is relevant especially in IE/Edge where this.component.value is null,
-                    // so the code falls back to this condition section.
-                    value = _this.getItem(_this._valueNormalizerItems, text);
+                var cachedValue = matchingValue ? null : _this.getItem(_this._valueNormalizerItems, text);
+                // If areItemsCached is off, then this.data will be lost by this moment,
+                // so we use a cache this.valueNormalizerItems.
+                // This is relevant especially in IE/Edge where this.component.value is null,
+                // so the code falls back to this condition section.
+                if (cachedValue) {
+                    return rxjs.of(cachedValue);
                 }
                 // If no match is found and custom values are allowed, create a new custom item
-                else if (_this.allowCustom) {
-                    value = _this.itemFactory(text);
-                    if (_this._isSync) {
-                        // Restore original items after selection, otherwise when opening the list
-                        // next time, only the selected item will appear.
-                        _this.loadItems();
-                    }
-                }
-                else {
-                    // Clears search text if suggestion hasn't been selected.
-                    // Steps to reproduce.
-                    // 1. Use Dymanic Empty sample.
-                    // 2. Type 'to', wait for the list to load, but don't select 'Tokai'. Instead hit Esc key.
-                    // 3. See that the search bar still contains 'to' text, while the value is null,
-                    // which is wrong - search bar text should be removed.
-                    // this.component.searchbar.suggestedText = ''; // This doesn't work.
-                    // As the above line doesn't work, so workaround it by setting form control value to null.
-                    _this.valueFormControl.setValue(value);
+                if (_this.allowCustom) {
+                    return (_this.itemFactory$ ? _this.itemFactory$(text) : rxjs.of(_this.itemFactory(text))).pipe(function (newValue) {
+                        if (_this._isSync) {
+                            // Restore original items after selection, otherwise when opening the list
+                            // next time, only the selected item will appear.
+                            _this.loadItems();
+                        }
+                        return newValue;
+                    });
                 }
+                return rxjs.of(null);
+            }), operators.map(function (value) {
                 _this._valueNormalizerItems = [];
                 return value;
             })); };
@@ -1770,6 +1771,14 @@
                 }
             });
             this._observer.listen(this._isOpen.pipe(operators.filter(function (event) { return event.isOpen; })), function () { return _this.opened.emit(); });
+            // Blurred: Manually clear the filter text, as it will persist by default when allowCustom=true.
+            if (this.allowCustom) {
+                this._observer.listen(this._isFocused.pipe(operators.skip(1), operators.debounceTime(100)), function (isFocused) {
+                    if (!isFocused) {
+                        _this.component.clearFilter();
+                    }
+                });
+            }
         };
         return MultiselectComponent;
     }(AbstractComboboxComponent));
@@ -1828,6 +1837,7 @@
         noItemsText: [{ type: core.Input }],
         minSearchText: [{ type: core.Input }],
         allowCustom: [{ type: core.Input }],
+        itemFactory$: [{ type: core.Input }],
         changed: [{ type: core.Output }],
         isReadOnlyTag: [{ type: core.Input }],
         isActivatedTag: [{ type: core.Input }],