@pingux/astro 2.24.0-alpha.1 → 2.24.1-alpha.0

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

@@ -237,7 +237,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   // 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) {
+    if (hasCustomValue && filteredItems.length === 1) {
       selectTheOnlyFilteredItem();
     } else if (hasCustomValue) {
       addNewBadgeFromInput(filterString);
@@ -256,8 +256,11 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
               selectionManager.toggleSelection(selectionManager.focusedKey);
               setFilterString('');
             }
-          } else if (!hasCustomValue && filteredItems.length === 1) {
+          } else if (hasCustomValue && filteredItems.length === 1) {
             selectTheOnlyFilteredItem();
+          } else if (!hasCustomValue) {
+            setFilterString('');
+            close();
           } else if (hasCustomValue) {
             var _key = e.target.value;
             if (_key === '') {
@@ -279,6 +282,12 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           if (prevKey) selectionManager.setFocusedKey(prevKey);
           break;
         }
+      case 'Escape':
+        {
+          setFilterString('');
+          close();
+          break;
+        }
       default:
         break;
     }
@@ -442,18 +451,19 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         border: 'none'
       }
     },
-    status: status,
-    isRestrictiveMultivalues: !hasCustomValue
+    status: status
   });
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, (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 (filterString !== '') onBlurTextField();
       if (_onBlur) _onBlur(e.nativeEvent);
+      if (!hasCustomValue) setFilterString('');
     },
     onChange: function onChange(e) {
+      if (!isOpen) setIsOpen(true);
       setFilterString(e.target.value);
       if (onInputChange) onInputChange(e.target.value);
     },
@@ -599,7 +609,6 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
 MultivaluesField.defaultProps = _objectSpread({
   direction: 'bottom',
   isReadOnly: false,
-  mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300
   }

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

@@ -600,8 +600,8 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   var value = 'custom';
   _userEvent["default"].type(input, value);
-  expect(input).toHaveValue('');
   _userEvent["default"].type(input, '{enter}');
+  expect(input).toHaveValue('');
   expect(onFormSubmit).not.toHaveBeenCalled();
 });
 test('in non-restrictive mode the value should be trimmed', function () {
@@ -677,4 +677,47 @@ test('deleting the last badge via keyboard moves focus to the previous badge', f
   });
   expect(badge2).not.toBeInTheDocument();
   expect(deleteButton1).toHaveClass('is-focused');
+});
+test('pressing Esc should clear the input', function () {
+  getComponent();
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].type(input, '{esc}');
+  expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+  expect(input).toHaveFocus();
+  _userEvent["default"].type(input, 'Aardvark');
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('should clear the input text onBlur', function () {
+  getComponent();
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  _userEvent["default"].type(input, value);
+  _userEvent["default"].tab();
+  expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+});
+test('should clear the input text onBlur and enter when a single filter result is showing', function () {
+  getComponent();
+  var input = _testWrapper.screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'Snake';
+  _userEvent["default"].type(input, value);
+  var listbox = _testWrapper.screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  _userEvent["default"].tab();
+  expect(_testWrapper.screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+  _userEvent["default"].type(input, value);
+  expect(options.length).toBe(1);
+  _userEvent["default"].type(input, '{enter}', {
+    skipClick: true
+  });
+  expect(input).toHaveValue('');
 });

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -225,7 +225,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   // 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) {
+    if (hasCustomValue && filteredItems.length === 1) {
       selectTheOnlyFilteredItem();
     } else if (hasCustomValue) {
       addNewBadgeFromInput(filterString);
@@ -244,8 +244,11 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
               setFilterString('');
             }
-          } else if (!hasCustomValue && filteredItems.length === 1) {
+          } else if (hasCustomValue && filteredItems.length === 1) {
             selectTheOnlyFilteredItem();
+          } else if (!hasCustomValue) {
+            setFilterString('');
+            close();
           } else if (hasCustomValue) {
             var _key = e.target.value;
             if (_key === '') {
@@ -267,6 +270,12 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           if (prevKey) selectionManager.setFocusedKey(prevKey);
           break;
         }
+      case 'Escape':
+        {
+          setFilterString('');
+          close();
+          break;
+        }
       default:
         break;
     }
@@ -430,18 +439,19 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
         border: 'none'
       }
     },
-    status: status,
-    isRestrictiveMultivalues: !hasCustomValue
+    status: status
   });
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       setIsOpen(false);
-      if (mode === 'non-restrictive' && filterString !== '') onBlurTextField();
+      if (filterString !== '') onBlurTextField();
       if (_onBlur) _onBlur(e.nativeEvent);
+      if (!hasCustomValue) setFilterString('');
     },
     onChange: function onChange(e) {
+      if (!isOpen) setIsOpen(true);
       setFilterString(e.target.value);
       if (onInputChange) onInputChange(e.target.value);
     },
@@ -587,7 +597,6 @@ MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
 MultivaluesField.defaultProps = _objectSpread({
   direction: 'bottom',
   isReadOnly: false,
-  mode: 'restrictive',
   scrollBoxProps: {
     maxHeight: 300
   }

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

@@ -597,8 +597,8 @@ test('form does not submit when adding custom value', function () {
   expect(input).toHaveValue('');
   var value = 'custom';
   userEvent.type(input, value);
-  expect(input).toHaveValue('');
   userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
   expect(onFormSubmit).not.toHaveBeenCalled();
 });
 test('in non-restrictive mode the value should be trimmed', function () {
@@ -674,4 +674,47 @@ test('deleting the last badge via keyboard moves focus to the previous badge', f
   });
   expect(badge2).not.toBeInTheDocument();
   expect(deleteButton1).toHaveClass('is-focused');
+});
+test('pressing Esc should clear the input', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{esc}');
+  expect(screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+  expect(input).toHaveFocus();
+  userEvent.type(input, 'Aardvark');
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('should clear the input text onBlur', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.tab();
+  expect(screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+});
+test('should clear the input text onBlur and enter when a single filter result is showing', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'Snake';
+  userEvent.type(input, value);
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  userEvent.tab();
+  expect(screen.queryByText(value)).not.toBeInTheDocument();
+  expect(input).toHaveValue('');
+  userEvent.type(input, value);
+  expect(options.length).toBe(1);
+  userEvent.type(input, '{enter}', {
+    skipClick: true
+  });
+  expect(input).toHaveValue('');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.24.0-alpha.1",
+  "version": "2.24.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",