@reltio/components 1.4.2119 → 1.4.2120

package/TypeaheadEditor/TypeaheadEditor.js

@@ -199,7 +199,7 @@ export var TypeaheadEditor = function (_a) {
         }
     }, [multiple, onChange, value]);
     var handleKeyDown = useCallback(function (event) {
-        if (event.code !== 'Enter' || highlightedItem)
+        if (event.key !== 'Enter' || highlightedItem)
             return;
         if (multiple === true) {
             handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
@@ -209,9 +209,13 @@ export var TypeaheadEditor = function (_a) {
         }
     }, [handleInputValueChange, onChange, highlightedItem, inputValue, multiple]);
     var handleBlur = useCallback(function () {
-        if (multiple !== true)
+        if (multiple !== true) {
             onChange(inputValue);
-    }, [inputValue, onChange, multiple]);
+        }
+        else {
+            handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
+        }
+    }, [inputValue, onChange, multiple, handleInputValueChange]);
     useEffect(function () {
         var _a;
         if (multiple !== true)
@@ -224,7 +228,7 @@ export var TypeaheadEditor = function (_a) {
             container: fullWidth ? styles.suggestionsContainer : '',
             suggestionsList: styles.suggestionsList,
             suggestionsContainerOpen: styles.suggestionsContainerOpen
-        }, inputProps: __assign({ value: inputValue, onChange: pipe(nthArg(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'nope' }, inputProps), renderInputComponent: function (_a) {
+        }, inputProps: __assign({ value: inputValue, onChange: pipe(nthArg(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'off' }, inputProps), renderInputComponent: function (_a) {
             var _b, _c;
             var ref = _a.ref, otherProps = __rest(_a, ["ref"]);
             var commonClasses = {

package/TypeaheadEditor/TypeaheadEditor.test.js

@@ -421,6 +421,28 @@ describe('TypeaheadEditor', function () {
                 }
             });
         }); });
+        it('should add chip correctly on input blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var values, props, user, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        values = ['value 1', 'value 2'];
+                        props = __assign(__assign({}, defaultMultipleProps), { value: values });
+                        user = setUp(props).user;
+                        input = screen.getByRole('textbox');
+                        return [4 /*yield*/, user.type(input, 'value 3')];
+                    case 1:
+                        _a.sent();
+                        expect(input).toHaveAttribute('value', 'value 3');
+                        return [4 /*yield*/, user.tab()];
+                    case 2:
+                        _a.sent(); // simulating input blur
+                        expect(input).toHaveAttribute('value', '');
+                        expect(props.onChange).toHaveBeenCalledWith(['value 1', 'value 2', 'value 3']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should add chip correctly after select suggestion item using keyboard', function () { return __awaiter(void 0, void 0, void 0, function () {
             var values, props, user, input;
             return __generator(this, function (_a) {

package/cjs/TypeaheadEditor/TypeaheadEditor.js

@@ -228,7 +228,7 @@ var TypeaheadEditor = function (_a) {
         }
     }, [multiple, onChange, value]);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
-        if (event.code !== 'Enter' || highlightedItem)
+        if (event.key !== 'Enter' || highlightedItem)
             return;
         if (multiple === true) {
             handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
@@ -238,9 +238,13 @@ var TypeaheadEditor = function (_a) {
         }
     }, [handleInputValueChange, onChange, highlightedItem, inputValue, multiple]);
     var handleBlur = (0, react_1.useCallback)(function () {
-        if (multiple !== true)
+        if (multiple !== true) {
             onChange(inputValue);
-    }, [inputValue, onChange, multiple]);
+        }
+        else {
+            handleInputValueChange({ method: ChangeMethod.Enter, newValue: inputValue });
+        }
+    }, [inputValue, onChange, multiple, handleInputValueChange]);
     (0, react_1.useEffect)(function () {
         var _a;
         if (multiple !== true)
@@ -253,7 +257,7 @@ var TypeaheadEditor = function (_a) {
             container: fullWidth ? styles.suggestionsContainer : '',
             suggestionsList: styles.suggestionsList,
             suggestionsContainerOpen: styles.suggestionsContainerOpen
-        }, inputProps: __assign({ value: inputValue, onChange: (0, ramda_1.pipe)((0, ramda_1.nthArg)(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'nope' }, inputProps), renderInputComponent: function (_a) {
+        }, inputProps: __assign({ value: inputValue, onChange: (0, ramda_1.pipe)((0, ramda_1.nthArg)(1), handleInputValueChange), onKeyDown: handleKeyDown, onBlur: handleBlur, fullWidth: fullWidth, variant: 'standard', autoComplete: 'off' }, inputProps), renderInputComponent: function (_a) {
             var _b, _c;
             var ref = _a.ref, otherProps = __rest(_a, ["ref"]);
             var commonClasses = {

package/cjs/TypeaheadEditor/TypeaheadEditor.test.js

@@ -426,6 +426,28 @@ describe('TypeaheadEditor', function () {
                 }
             });
         }); });
+        it('should add chip correctly on input blur', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var values, props, user, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        values = ['value 1', 'value 2'];
+                        props = __assign(__assign({}, defaultMultipleProps), { value: values });
+                        user = setUp(props).user;
+                        input = react_2.screen.getByRole('textbox');
+                        return [4 /*yield*/, user.type(input, 'value 3')];
+                    case 1:
+                        _a.sent();
+                        expect(input).toHaveAttribute('value', 'value 3');
+                        return [4 /*yield*/, user.tab()];
+                    case 2:
+                        _a.sent(); // simulating input blur
+                        expect(input).toHaveAttribute('value', '');
+                        expect(props.onChange).toHaveBeenCalledWith(['value 1', 'value 2', 'value 3']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
         it('should add chip correctly after select suggestion item using keyboard', function () { return __awaiter(void 0, void 0, void 0, function () {
             var values, props, user, input;
             return __generator(this, function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2119",
+  "version": "1.4.2120",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",