@pingux/astro 1.37.0 → 1.37.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.37.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.37.0...@pingux/astro@1.37.1) (2022-12-06)
+
+
+### Bug Fixes
+
+* [UIP-5903] Multivaluesfield improvements epic ([f82a7da](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f82a7da926a9c9a9d9f61fd51b6ccbef75502826))
+
+
+
+
+
 # [1.37.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.36.2...@pingux/astro@1.37.0) (2022-12-01)
 
 

package/NOTICE.html

@@ -146,7 +146,7 @@
 
   <main class="u-padding--xl">
     <h1>Snyk Licenses Attribution Report</h1>
-    <h4>Report date: 12/1/2022</h4>
+    <h4>Report date: 12/6/2022</h4>
       <h2>Organization: <a href="https://app.snyk.io/org/ux-fbf">UX</a></h2>
     <div class="u-padding-top--sm">
       <h1>

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -263,11 +263,50 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   (0, _react.useEffect)(function () {
     if (onOpenChange) onOpenChange(isOpen);
   }, [isOpen]);
-  (0, _react.useEffect)(function () {
-    if (!state.collection.size) close();
-  }, [state.collection]);
+
+  var addNewChipFromInput = function addNewChipFromInput(inputValue) {
+    var _context3, _context4;
+
+    var key = inputValue;
+
+    if (state.selectionManager.isSelected(key)) {
+      return;
+    }
+
+    selectionManager.setSelectedKeys((0, _concat["default"])(_context3 = []).call(_context3, (0, _from["default"])(selectionManager.state.selectedKeys), [key]));
+    setCustomItems((0, _concat["default"])(_context4 = []).call(_context4, customItems, [{
+      id: key,
+      key: key,
+      name: key
+    }]));
+    setFilterString('');
+  }; // there actually is a test for this, but coverage is not picking it up.
+
+  /* istanbul ignore next */
+
+
+  var selectTheOnlyFilteredItem = function selectTheOnlyFilteredItem() {
+    var key = filteredItems[0].key;
+
+    if (!(0, _includes["default"])(disabledKeys).call(disabledKeys, key)) {
+      selectionManager.toggleSelection(filteredItems[0].key);
+      setFilterString('');
+    }
+  }; // there actually is a test for this, but coverage is not picking it up.
+
+  /* istanbul ignore next */
+
+
+  var onBlurTextField = function onBlurTextField() {
+    if (!hasCustomValue && filteredItems.length === 1) {
+      selectTheOnlyFilteredItem();
+    } else if (hasCustomValue) {
+      addNewChipFromInput(filterString);
+    }
+  };
   /* istanbul ignore next */
 
+
   var keyDown = function keyDown(e) {
     switch (e.key) {
       case 'Enter':
@@ -282,28 +321,15 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               setFilterString('');
             }
           } else if (!hasCustomValue && filteredItems.length === 1) {
-            var _key = filteredItems[0].key;
-
-            if (!(0, _includes["default"])(disabledKeys).call(disabledKeys, _key)) {
-              selectionManager.toggleSelection(filteredItems[0].key);
-              setFilterString('');
-            }
+            selectTheOnlyFilteredItem();
           } else if (hasCustomValue) {
-            var _context3, _context4;
-
-            var _key2 = e.target.value;
+            var _key = e.target.value;
 
-            if (state.selectionManager.isSelected(_key2)) {
+            if (_key === '') {
               return;
             }
 
-            selectionManager.setSelectedKeys((0, _concat["default"])(_context3 = []).call(_context3, (0, _from["default"])(selectionManager.state.selectedKeys), [_key2]));
-            setCustomItems((0, _concat["default"])(_context4 = []).call(_context4, customItems, [{
-              id: _key2,
-              key: _key2,
-              name: _key2
-            }]));
-            setFilterString('');
+            addNewChipFromInput(e.target.value);
           }
 
           break;
@@ -417,9 +443,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
     return null;
   }));
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, {
-    restoreFocus: true
-  }, (0, _react2.jsx)(_overlays.DismissButton, {
+  var listbox = (0, _react2.jsx)(_focus.FocusScope, null, (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: close
   }), (0, _react2.jsx)(_.ScrollBox, scrollBoxProps, (0, _react2.jsx)(_ListBox["default"], {
     ref: listBoxRef,
@@ -452,12 +476,14 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         border: 'none'
       }
     },
-    status: status
+    status: status,
+    isRestrictiveMultivalues: !hasCustomValue
   });
 
   return (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       setIsOpen(false);
+      if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
       if (_onBlur) _onBlur(e.nativeEvent);
     },
     onChange: function onChange(e) {
@@ -483,9 +509,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "aria-invalid": status === 'error' && true
   }, ariaProps, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
     hasNoArrow: true,
-    isDismissable: true,
     isNonModal: true,
-    isOpen: isOpen,
+    isOpen: !state.collection.size ? false : isOpen,
     onClose: close,
     placement: placement,
     ref: popoverRef,

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -198,6 +198,71 @@ test('clicking an option renders chip with option name', function () {
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('after clicking an option, and then clicking the text input, the listbox remains open', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  _userEvent["default"].tab();
+
+  expect(input).toHaveFocus();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('no chips are rendered, if nothing is selected', function () {
+  getComponent({
+    isReadOnly: false
+  });
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument(0);
+});
+test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var input, options, firstOption, value, listbox, filteredOptions;
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = _testWrapper.screen.getByRole('combobox');
+
+          _userEvent["default"].tab();
+
+          expect(input).toHaveFocus();
+          options = _testWrapper.screen.getAllByRole('option');
+          firstOption = options[0];
+          firstOption.click();
+          expect(firstOption).not.toBeInTheDocument();
+          _context.next = 10;
+          return _userEvent["default"].clear(input);
+
+        case 10:
+          value = 'ka';
+          _context.next = 13;
+          return _userEvent["default"].type(input, value);
+
+        case 13:
+          listbox = _testWrapper.screen.queryByRole('listbox');
+          expect(listbox).toBeInTheDocument();
+          filteredOptions = (0, _testWrapper.within)(listbox).getAllByRole('option');
+          expect(filteredOptions.length).toBe(1);
+
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
 test('clicking on delete button deletes selection, and re-adds option to list', function () {
   getComponent();
 
@@ -257,7 +322,8 @@ test('clicking an option fires "onSelectionChange"', function () {
 test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
   var onInputChange = jest.fn();
   getComponent({
-    onInputChange: onInputChange
+    onInputChange: onInputChange,
+    mode: 'non-restrictive'
   });
 
   var input = _testWrapper.screen.getByRole('combobox');
@@ -274,6 +340,87 @@ test('changing the input value opens listbox, filters options, and fires "onInpu
   expect(onInputChange).toBeCalledTimes(value.length);
   expect(onInputChange).toHaveBeenCalledWith(value);
 });
+test('in non-restrictive mode, a chip gets added if there is input, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].tab();
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(input.value).toBe('');
+});
+test('in non-restrictive mode, a chip gets added if there is only one matching filtered option, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  _userEvent["default"].tab();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  var value = 'Aardvark';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].tab();
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(firstOption).not.toBeInTheDocument();
+});
+test('dropdown with options reappears after entering a custom input', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var input, value1, value2, listbox, options2;
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = _testWrapper.screen.getByRole('combobox');
+          value1 = 'longstring';
+
+          _userEvent["default"].type(input, value1);
+
+          expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+          value2 = '';
+          _context2.next = 8;
+          return _userEvent["default"].clear(input);
+
+        case 8:
+          _context2.next = 10;
+          return _userEvent["default"].type(input, value2);
+
+        case 10:
+          listbox = _testWrapper.screen.getByRole('listbox');
+          options2 = (0, _testWrapper.within)(listbox).getAllByRole('option');
+          expect(options2.length).toBe(items.length);
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
 test('changing the input value and hitting enter by default do nothing', function () {
   getComponent();
 
@@ -286,8 +433,7 @@ test('changing the input value and hitting enter by default do nothing', functio
 
   _userEvent["default"].type(input, '{enter}');
 
-  expect(input).toHaveValue(value);
-  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
 });
 test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
   getComponent({
@@ -313,6 +459,22 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).toBeCalledTimes(0);
+});
 test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
   var onSelectionChange = jest.fn();
   getComponent({
@@ -479,28 +641,28 @@ test('selected keys', function () {
 
   expect(secondChip).toBeInTheDocument();
 });
-test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
   var _getComponent, container, results;
 
-  return _regenerator["default"].wrap(function _callee$(_context) {
+  return _regenerator["default"].wrap(function _callee3$(_context3) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context.next = 4;
+          _context3.next = 4;
           return (0, _jestAxe.axe)(container);
 
         case 4:
-          results = _context.sent;
+          results = _context3.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context3.stop();
       }
     }
-  }, _callee);
+  }, _callee3);
 })));
 test('read only keys', function () {
   getComponent({
@@ -606,7 +768,7 @@ test('form does not submit when adding custom value', function () {
 
   _userEvent["default"].type(input, value);
 
-  expect(input).toHaveValue(value);
+  expect(input).toHaveValue('');
 
   _userEvent["default"].type(input, '{enter}');
 

package/lib/cjs/hooks/useField/useField.js

@@ -52,7 +52,7 @@ var _hooks = require("../../hooks");
 
 var _constants = require("../../components/Label/constants");
 
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -88,6 +88,7 @@ var useField = function useField() {
       isIndeterminate = props.isIndeterminate,
       isReadOnly = props.isReadOnly,
       isRequired = props.isRequired,
+      isRestrictiveMultivalues = props.isRestrictiveMultivalues,
       isSelected = props.isSelected,
       label = props.label,
       labelMode = props.labelMode,
@@ -216,7 +217,7 @@ var useField = function useField() {
     name: name,
     onChange: fieldOnChange,
     placeholder: placeholder,
-    readOnly: isReadOnly,
+    readOnly: isRestrictiveMultivalues ? true : isReadOnly,
     required: isRequired,
     role: role,
     spellCheck: spellCheck,

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -211,11 +211,50 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (onOpenChange) onOpenChange(isOpen);
   }, [isOpen]);
-  useEffect(function () {
-    if (!state.collection.size) close();
-  }, [state.collection]);
+
+  var addNewChipFromInput = function addNewChipFromInput(inputValue) {
+    var _context3, _context4;
+
+    var key = inputValue;
+
+    if (state.selectionManager.isSelected(key)) {
+      return;
+    }
+
+    selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [key]));
+    setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
+      id: key,
+      key: key,
+      name: key
+    }]));
+    setFilterString('');
+  }; // there actually is a test for this, but coverage is not picking it up.
+
+  /* istanbul ignore next */
+
+
+  var selectTheOnlyFilteredItem = function selectTheOnlyFilteredItem() {
+    var key = filteredItems[0].key;
+
+    if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, key)) {
+      selectionManager.toggleSelection(filteredItems[0].key);
+      setFilterString('');
+    }
+  }; // there actually is a test for this, but coverage is not picking it up.
+
+  /* istanbul ignore next */
+
+
+  var onBlurTextField = function onBlurTextField() {
+    if (!hasCustomValue && filteredItems.length === 1) {
+      selectTheOnlyFilteredItem();
+    } else if (hasCustomValue) {
+      addNewChipFromInput(filterString);
+    }
+  };
   /* istanbul ignore next */
 
+
   var keyDown = function keyDown(e) {
     switch (e.key) {
       case 'Enter':
@@ -230,28 +269,15 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               setFilterString('');
             }
           } else if (!hasCustomValue && filteredItems.length === 1) {
-            var _key = filteredItems[0].key;
-
-            if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, _key)) {
-              selectionManager.toggleSelection(filteredItems[0].key);
-              setFilterString('');
-            }
+            selectTheOnlyFilteredItem();
           } else if (hasCustomValue) {
-            var _context3, _context4;
-
-            var _key2 = e.target.value;
+            var _key = e.target.value;
 
-            if (state.selectionManager.isSelected(_key2)) {
+            if (_key === '') {
               return;
             }
 
-            selectionManager.setSelectedKeys(_concatInstanceProperty(_context3 = []).call(_context3, _Array$from(selectionManager.state.selectedKeys), [_key2]));
-            setCustomItems(_concatInstanceProperty(_context4 = []).call(_context4, customItems, [{
-              id: _key2,
-              key: _key2,
-              name: _key2
-            }]));
-            setFilterString('');
+            addNewChipFromInput(e.target.value);
           }
 
           break;
@@ -368,9 +394,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return null;
   }));
 
-  var listbox = ___EmotionJSX(FocusScope, {
-    restoreFocus: true
-  }, ___EmotionJSX(DismissButton, {
+  var listbox = ___EmotionJSX(FocusScope, null, ___EmotionJSX(DismissButton, {
     onDismiss: close
   }), ___EmotionJSX(ScrollBox, scrollBoxProps, ___EmotionJSX(ListBox, {
     ref: listBoxRef,
@@ -403,12 +427,14 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         border: 'none'
       }
     },
-    status: status
+    status: status,
+    isRestrictiveMultivalues: !hasCustomValue
   });
 
   return ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       setIsOpen(false);
+      if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
       if (_onBlur) _onBlur(e.nativeEvent);
     },
     onChange: function onChange(e) {
@@ -434,9 +460,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-invalid": status === 'error' && true
   }, ariaProps, inputProps)), ___EmotionJSX(PopoverContainer, {
     hasNoArrow: true,
-    isDismissable: true,
     isNonModal: true,
-    isOpen: isOpen,
+    isOpen: !state.collection.size ? false : isOpen,
     onClose: close,
     placement: placement,
     ref: popoverRef,

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -158,6 +158,62 @@ test('clicking an option renders chip with option name', function () {
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('after clicking an option, and then clicking the text input, the listbox remains open', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  expect(input).toHaveFocus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  userEvent.click(input);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('no chips are rendered, if nothing is selected', function () {
+  getComponent({
+    isReadOnly: false
+  });
+  expect(screen.queryByRole('presentation')).not.toBeInTheDocument(0);
+});
+test('after clicking an option, and then typing a custom input, the listbox remains open and filters the options', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var input, options, firstOption, value, listbox, filteredOptions;
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = screen.getByRole('combobox');
+          userEvent.tab();
+          expect(input).toHaveFocus();
+          options = screen.getAllByRole('option');
+          firstOption = options[0];
+          firstOption.click();
+          expect(firstOption).not.toBeInTheDocument();
+          _context.next = 10;
+          return userEvent.clear(input);
+
+        case 10:
+          value = 'ka';
+          _context.next = 13;
+          return userEvent.type(input, value);
+
+        case 13:
+          listbox = screen.queryByRole('listbox');
+          expect(listbox).toBeInTheDocument();
+          filteredOptions = within(listbox).getAllByRole('option');
+          expect(filteredOptions.length).toBe(1);
+
+        case 17:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
 test('clicking on delete button deletes selection, and re-adds option to list', function () {
   getComponent();
   var input = screen.getByRole('combobox');
@@ -201,7 +257,8 @@ test('clicking an option fires "onSelectionChange"', function () {
 test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
   var onInputChange = jest.fn();
   getComponent({
-    onInputChange: onInputChange
+    onInputChange: onInputChange,
+    mode: 'non-restrictive'
   });
   var input = screen.getByRole('combobox');
   var value = 'aa';
@@ -213,6 +270,71 @@ test('changing the input value opens listbox, filters options, and fires "onInpu
   expect(onInputChange).toBeCalledTimes(value.length);
   expect(onInputChange).toHaveBeenCalledWith(value);
 });
+test('in non-restrictive mode, a chip gets added if there is input, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.tab();
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(input.value).toBe('');
+});
+test('in non-restrictive mode, a chip gets added if there is only one matching filtered option, onBlur', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  var value = 'Aardvark';
+  userEvent.type(input, value);
+  userEvent.tab();
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+  expect(firstOption).not.toBeInTheDocument();
+});
+test('dropdown with options reappears after entering a custom input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var input, value1, value2, listbox, options2;
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent({
+            mode: 'non-restrictive'
+          });
+          input = screen.getByRole('combobox');
+          value1 = 'longstring';
+          userEvent.type(input, value1);
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+          value2 = '';
+          _context2.next = 8;
+          return userEvent.clear(input);
+
+        case 8:
+          _context2.next = 10;
+          return userEvent.type(input, value2);
+
+        case 10:
+          listbox = screen.getByRole('listbox');
+          options2 = within(listbox).getAllByRole('option');
+          expect(options2.length).toBe(items.length);
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
 test('changing the input value and hitting enter by default do nothing', function () {
   getComponent();
   var input = screen.getByRole('combobox');
@@ -220,8 +342,7 @@ test('changing the input value and hitting enter by default do nothing', functio
   var value = 'custom';
   userEvent.type(input, value);
   userEvent.type(input, '{enter}');
-  expect(input).toHaveValue(value);
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
 });
 test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
   getComponent({
@@ -239,6 +360,18 @@ test('changing the input value and hitting enter creates new value in non-restri
   var chipContainer = chip.parentElement;
   expect(chipContainer).toHaveAttribute('role', 'presentation');
 });
+test('pressing enter, when the input values is an empty string does not add an option, in non-restrictive mode', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).toBeCalledTimes(0);
+});
 test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
   var onSelectionChange = jest.fn();
   getComponent({
@@ -350,28 +483,28 @@ test('selected keys', function () {
   var secondChip = screen.getByText(items[2].name);
   expect(secondChip).toBeInTheDocument();
 });
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
   var _getComponent, container, results;
 
-  return _regeneratorRuntime.wrap(function _callee$(_context) {
+  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
     while (1) {
-      switch (_context.prev = _context.next) {
+      switch (_context3.prev = _context3.next) {
         case 0:
           jest.useRealTimers();
           _getComponent = getComponent(), container = _getComponent.container;
-          _context.next = 4;
+          _context3.next = 4;
           return axe(container);
 
         case 4:
-          results = _context.sent;
+          results = _context3.sent;
           expect(results).toHaveNoViolations();
 
         case 6:
         case "end":
-          return _context.stop();
+          return _context3.stop();
       }
     }
-  }, _callee);
+  }, _callee3);
 })));
 test('read only keys', function () {
   getComponent({
@@ -450,7 +583,7 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   var value = 'custom';
   userEvent.type(input, value);
-  expect(input).toHaveValue(value);
+  expect(input).toHaveValue('');
   userEvent.type(input, '{enter}');
   expect(onFormSubmit).not.toHaveBeenCalled();
 });

package/lib/hooks/useField/useField.js

@@ -9,7 +9,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
+var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "children", "className", "containerProps", "controlProps", "defaultText", "defaultValue", "direction", "disabledKeys", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "isSelected", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onClear", "onFocus", "onFocusChange", "onLoadMore", "onOpenChange", "onSelectionChange", "placeholder", "role", "selectedKey", "spellCheck", "status", "statusClasses", "type", "value"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -58,6 +58,7 @@ var useField = function useField() {
       isIndeterminate = props.isIndeterminate,
       isReadOnly = props.isReadOnly,
       isRequired = props.isRequired,
+      isRestrictiveMultivalues = props.isRestrictiveMultivalues,
       isSelected = props.isSelected,
       label = props.label,
       labelMode = props.labelMode,
@@ -187,7 +188,7 @@ var useField = function useField() {
     name: name,
     onChange: fieldOnChange,
     placeholder: placeholder,
-    readOnly: isReadOnly,
+    readOnly: isRestrictiveMultivalues ? true : isReadOnly,
     required: isRequired,
     role: role,
     spellCheck: spellCheck,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.37.0",
+  "version": "1.37.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",