@pingux/astro 2.6.0-alpha.3 → 2.6.0-alpha.4

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

@@ -20,6 +20,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -46,7 +48,7 @@ var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerP
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context10, _context11; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(source), !0)).call(_context10, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context11 = ownKeys(Object(source))).call(_context11, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
  * Complex control that lets you choose several tags from the dropdown list.
  * Or to add your own values in non-restrictive mode.
@@ -57,7 +59,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Stately.
  */
 var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context7, _listBoxRef$current;
+  var _context8, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -141,8 +143,13 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var close = function close() {
     return setIsOpen(false);
   };
+  var closeBadgeRefs = (0, _react.useRef)([]);
+  var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   /* istanbul ignore next */
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputWrapperRef.current;
+  });
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
@@ -156,7 +163,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       placement: "".concat(direction, " end"),
       scrollRef: listBoxRef,
       shouldFlip: !isNotFlippable,
-      targetRef: inputRef
+      targetRef: inputWrapperRef
     }),
     overlayProps = _useOverlayPosition.overlayProps,
     placement = _useOverlayPosition.placement,
@@ -180,12 +187,12 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     setMenuWidth = _useState10[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
-    if (inputRef.current) {
-      setMenuWidth("".concat(inputRef.current.offsetWidth + 2, "px"));
+    if (inputWrapperRef.current) {
+      setMenuWidth("".concat(inputWrapperRef.current.offsetWidth + 2, "px"));
     }
-  }, [inputRef, isOpen, setMenuWidth]);
+  }, [inputWrapperRef, isOpen, setMenuWidth]);
   (0, _utils.useResizeObserver)({
-    ref: inputRef,
+    ref: inputWrapperRef,
     onResize: onResize
   });
   (0, _utils.useLayoutEffect)(onResize, [onResize]);
@@ -280,8 +287,25 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
-  var deleteItem = function deleteItem(key) {
+  var deleteItem = function deleteItem(key, e) {
+    var _context5;
+    var activeBadgesKeys = (0, _reduce["default"])(_context5 = closeBadgeRefs.current).call(_context5, function (result, item) {
+      if (item) {
+        result.push(item.dataset.item);
+      }
+      return result;
+    }, []);
     selectionManager.toggleSelection(key);
+    if (e.pointerType !== 'keyboard') return;
+    if (activeBadgesKeys.length > 1) {
+      var badgeIndex = (0, _findIndex["default"])(activeBadgesKeys).call(activeBadgesKeys, function (item) {
+        return item === key;
+      });
+      var nextFocusBadgeIndex = badgeIndex === activeBadgesKeys.length - 1 ? badgeIndex - 1 : badgeIndex;
+      closeBadgeRefs.current[nextFocusBadgeIndex].focus();
+    } else {
+      inputRef.current.focus();
+    }
   };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return (0, _react2.jsx)(_.Text, {
@@ -300,8 +324,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     }, name);
   };
   var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context5, _context6;
-    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+    var _context6, _context7;
+    var item = (0, _find["default"])(_context6 = (0, _concat["default"])(_context7 = []).call(_context7, initialItems, customItems)).call(_context6, function (el) {
       return el.key === key;
     });
     if (item) {
@@ -331,7 +355,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     }
     return null;
   });
-  var multivaluesFieldBadge = function multivaluesFieldBadge(item) {
+  var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
     return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
       key: item.key,
       role: "presentation",
@@ -341,9 +365,14 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       slots: item.slots
     }, item.badgeProps), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
       "aria-label": "delete ".concat(item.name),
-      onPress: function onPress() {
-        return deleteItem(item.key);
+      "data-item": item.name,
+      onPress: function onPress(e) {
+        return deleteItem(item.key, e);
       },
+      ref: function ref(el) {
+        return closeBadgeRefs.current[index] = el;
+      } // eslint-disable-line
+      ,
       variant: "badge.deleteButton"
     }, item.buttonProps), (0, _react2.jsx)(_.Icon, {
       icon: _CloseIcon["default"],
@@ -354,13 +383,13 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       }
     })));
   };
-  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context7 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context7, function (key) {
-    var _context8, _context9;
-    var item = (0, _find["default"])(_context8 = (0, _concat["default"])(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
+  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context8 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context8, function (key, i) {
+    var _context9, _context10;
+    var item = (0, _find["default"])(_context9 = (0, _concat["default"])(_context10 = []).call(_context10, initialItems, customItems)).call(_context9, function (el) {
       return el.key === key;
     });
     if (item) {
-      return multivaluesFieldBadge(item);
+      return multivaluesFieldBadge(item, i);
     }
     return null;
   }));
@@ -385,7 +414,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       'aria-activedescendant': activeDescendant,
       'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
-      role: 'combobox'
+      role: 'combobox',
+      ref: inputRef
     },
     hasAutoFocus: hasAutoFocus,
     hasNoStatusIndicator: hasNoStatusIndicator,
@@ -395,7 +425,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     label: label,
     placeholder: placeholder,
     wrapperProps: {
-      ref: inputRef,
+      ref: inputWrapperRef,
       variant: 'forms.input.multivaluesWrapper',
       sx: isReadOnly && {
         boxShadow: 'inset 0 0 0 100px #e5e9f8',

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

@@ -620,4 +620,54 @@ test('in non-restrictive mode the value should be trimmed', function () {
   expect(badge).not.toBeInTheDocument();
   expect(trimmedBadge).toBeInTheDocument();
   expect(input).toHaveValue('');
+});
+test('deleting a single badge via keyboard moves focus to the input', function () {
+  getComponent();
+  var input = _testWrapper.screen.getByRole('combobox');
+  _userEvent["default"].tab();
+  var options = _testWrapper.screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  var badge = _testWrapper.screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  _userEvent["default"].tab({
+    shift: true
+  });
+  var deleteButton = badge.nextSibling;
+  expect(deleteButton).toHaveClass('is-focused');
+  _testWrapper.fireEvent.keyDown(deleteButton, {
+    key: 'Enter'
+  });
+  _testWrapper.fireEvent.keyUp(deleteButton, {
+    key: 'Enter'
+  });
+  expect(badge).not.toBeInTheDocument();
+  expect(input).toHaveClass('is-focused');
+});
+test('deleting the last badge via keyboard moves focus to the previous badge', function () {
+  getComponent();
+  _userEvent["default"].tab();
+  var options = _testWrapper.screen.getAllByRole('option');
+  var firstOption = options[0];
+  var secondOption = options[1];
+  firstOption.click();
+  secondOption.click();
+  var badge1 = _testWrapper.screen.getByText(items[0].name);
+  var badge2 = _testWrapper.screen.getByText(items[1].name);
+  expect(badge1).toBeInTheDocument();
+  expect(badge2).toBeInTheDocument();
+  _userEvent["default"].tab({
+    shift: true
+  });
+  var deleteButton1 = badge1.nextSibling;
+  var deleteButton2 = badge2.nextSibling;
+  expect(deleteButton2).toHaveClass('is-focused');
+  _testWrapper.fireEvent.keyDown(deleteButton2, {
+    key: 'Enter'
+  });
+  _testWrapper.fireEvent.keyUp(deleteButton2, {
+    key: 'Enter'
+  });
+  expect(badge2).not.toBeInTheDocument();
+  expect(deleteButton1).toHaveClass('is-focused');
 });

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -11,12 +11,14 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 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; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context10, _context11; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(source), !0)).call(_context10, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context11 = ownKeys(Object(source))).call(_context11, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context11, _context12; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(source), !0)).call(_context11, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context12 = ownKeys(Object(source))).call(_context12, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -46,7 +48,7 @@ import ListBox from '../ListBox';
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context7, _listBoxRef$current;
+  var _context8, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -130,8 +132,13 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var close = function close() {
     return setIsOpen(false);
   };
+  var closeBadgeRefs = useRef([]);
+  var inputWrapperRef = useRef();
   var inputRef = useRef();
   /* istanbul ignore next */
+  useImperativeHandle(ref, function () {
+    return inputWrapperRef.current;
+  });
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
@@ -145,7 +152,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       placement: "".concat(direction, " end"),
       scrollRef: listBoxRef,
       shouldFlip: !isNotFlippable,
-      targetRef: inputRef
+      targetRef: inputWrapperRef
     }),
     overlayProps = _useOverlayPosition.overlayProps,
     placement = _useOverlayPosition.placement,
@@ -169,12 +176,12 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     setMenuWidth = _useState10[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
-    if (inputRef.current) {
-      setMenuWidth("".concat(inputRef.current.offsetWidth + 2, "px"));
+    if (inputWrapperRef.current) {
+      setMenuWidth("".concat(inputWrapperRef.current.offsetWidth + 2, "px"));
     }
-  }, [inputRef, isOpen, setMenuWidth]);
+  }, [inputWrapperRef, isOpen, setMenuWidth]);
   useResizeObserver({
-    ref: inputRef,
+    ref: inputWrapperRef,
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
@@ -269,8 +276,25 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     if (onKeyDown) onKeyDown(e.nativeEvent);
   };
-  var deleteItem = function deleteItem(key) {
+  var deleteItem = function deleteItem(key, e) {
+    var _context5;
+    var activeBadgesKeys = _reduceInstanceProperty(_context5 = closeBadgeRefs.current).call(_context5, function (result, item) {
+      if (item) {
+        result.push(item.dataset.item);
+      }
+      return result;
+    }, []);
     selectionManager.toggleSelection(key);
+    if (e.pointerType !== 'keyboard') return;
+    if (activeBadgesKeys.length > 1) {
+      var badgeIndex = _findIndexInstanceProperty(activeBadgesKeys).call(activeBadgesKeys, function (item) {
+        return item === key;
+      });
+      var nextFocusBadgeIndex = badgeIndex === activeBadgesKeys.length - 1 ? badgeIndex - 1 : badgeIndex;
+      closeBadgeRefs.current[nextFocusBadgeIndex].focus();
+    } else {
+      inputRef.current.focus();
+    }
   };
   var readOnlyTextItem = function readOnlyTextItem(key, name) {
     return ___EmotionJSX(Text, {
@@ -289,8 +313,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }, name);
   };
   var readOnlyInputEntry = isReadOnly && (readOnlyKeys.length ? _mapInstanceProperty(readOnlyKeys).call(readOnlyKeys, function (key) {
-    var _context5, _context6;
-    var item = _findInstanceProperty(_context5 = _concatInstanceProperty(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+    var _context6, _context7;
+    var item = _findInstanceProperty(_context6 = _concatInstanceProperty(_context7 = []).call(_context7, initialItems, customItems)).call(_context6, function (el) {
       return el.key === key;
     });
     if (item) {
@@ -320,7 +344,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return null;
   });
-  var multivaluesFieldBadge = function multivaluesFieldBadge(item) {
+  var multivaluesFieldBadge = function multivaluesFieldBadge(item, index) {
     return ___EmotionJSX(Badge, _extends({
       key: item.key,
       role: "presentation",
@@ -330,9 +354,14 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       slots: item.slots
     }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
       "aria-label": "delete ".concat(item.name),
-      onPress: function onPress() {
-        return deleteItem(item.key);
+      "data-item": item.name,
+      onPress: function onPress(e) {
+        return deleteItem(item.key, e);
       },
+      ref: function ref(el) {
+        return closeBadgeRefs.current[index] = el;
+      } // eslint-disable-line
+      ,
       variant: "badge.deleteButton"
     }, item.buttonProps), ___EmotionJSX(Icon, {
       icon: Clear,
@@ -343,13 +372,13 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     })));
   };
-  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context7 = _Array$from(selectionManager.selectedKeys)).call(_context7, function (key) {
-    var _context8, _context9;
-    var item = _findInstanceProperty(_context8 = _concatInstanceProperty(_context9 = []).call(_context9, initialItems, customItems)).call(_context8, function (el) {
+  var selectedItems = ___EmotionJSX(React.Fragment, null, _mapInstanceProperty(_context8 = _Array$from(selectionManager.selectedKeys)).call(_context8, function (key, i) {
+    var _context9, _context10;
+    var item = _findInstanceProperty(_context9 = _concatInstanceProperty(_context10 = []).call(_context10, initialItems, customItems)).call(_context9, function (el) {
       return el.key === key;
     });
     if (item) {
-      return multivaluesFieldBadge(item);
+      return multivaluesFieldBadge(item, i);
     }
     return null;
   }));
@@ -374,7 +403,8 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       'aria-activedescendant': activeDescendant,
       'aria-controls': (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.id,
       'aria-expanded': isOpen,
-      role: 'combobox'
+      role: 'combobox',
+      ref: inputRef
     },
     hasAutoFocus: hasAutoFocus,
     hasNoStatusIndicator: hasNoStatusIndicator,
@@ -384,7 +414,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     label: label,
     placeholder: placeholder,
     wrapperProps: {
-      ref: inputRef,
+      ref: inputWrapperRef,
       variant: 'forms.input.multivaluesWrapper',
       sx: isReadOnly && {
         boxShadow: 'inset 0 0 0 100px #e5e9f8',

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

@@ -617,4 +617,54 @@ test('in non-restrictive mode the value should be trimmed', function () {
   expect(badge).not.toBeInTheDocument();
   expect(trimmedBadge).toBeInTheDocument();
   expect(input).toHaveValue('');
+});
+test('deleting a single badge via keyboard moves focus to the input', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  userEvent.tab();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  var badge = screen.getByText(items[0].name);
+  expect(badge).toBeInTheDocument();
+  userEvent.tab({
+    shift: true
+  });
+  var deleteButton = badge.nextSibling;
+  expect(deleteButton).toHaveClass('is-focused');
+  fireEvent.keyDown(deleteButton, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(deleteButton, {
+    key: 'Enter'
+  });
+  expect(badge).not.toBeInTheDocument();
+  expect(input).toHaveClass('is-focused');
+});
+test('deleting the last badge via keyboard moves focus to the previous badge', function () {
+  getComponent();
+  userEvent.tab();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  var secondOption = options[1];
+  firstOption.click();
+  secondOption.click();
+  var badge1 = screen.getByText(items[0].name);
+  var badge2 = screen.getByText(items[1].name);
+  expect(badge1).toBeInTheDocument();
+  expect(badge2).toBeInTheDocument();
+  userEvent.tab({
+    shift: true
+  });
+  var deleteButton1 = badge1.nextSibling;
+  var deleteButton2 = badge2.nextSibling;
+  expect(deleteButton2).toHaveClass('is-focused');
+  fireEvent.keyDown(deleteButton2, {
+    key: 'Enter'
+  });
+  fireEvent.keyUp(deleteButton2, {
+    key: 'Enter'
+  });
+  expect(badge2).not.toBeInTheDocument();
+  expect(deleteButton1).toHaveClass('is-focused');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.6.0-alpha.3",
+  "version": "2.6.0-alpha.4",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",