primereact 10.4.0 → 10.5.0

package/multiselect/multiselect.cjs.js

@@ -132,6 +132,10 @@ function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
 }
 
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -233,7 +237,8 @@ var classes$1 = {
     var props = _ref5.itemProps;
     return utils.classNames('p-multiselect-item', {
       'p-highlight': props.selected,
-      'p-disabled': props.disabled
+      'p-disabled': props.disabled,
+      'p-focus': props.focusedOptionIndex === props.index
     });
   },
   checkboxContainer: 'p-checkbox p-component',
@@ -246,7 +251,7 @@ var classes$1 = {
   },
   transition: 'p-connected-overlay'
 };
-var styles$1 = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
+var styles$1 = "\n@layer primereact {\n    .p-multiselect {\n        display: inline-flex;\n        user-select: none;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label-container {\n        overflow: hidden;\n        flex: 1 1 auto;\n        cursor: pointer;\n    }\n    \n    .p-multiselect-label  {\n        display: block;\n        white-space: nowrap;\n        cursor: pointer;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    \n    .p-multiselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-multiselect-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-multiselect-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-multiselect .p-multiselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel {\n        border: none;\n        position: initial;\n        background: none;\n        box-shadow: none;\n    }\n    \n    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {\n        padding: 0;\n    }\n    \n    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    \n    .p-multiselect-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-multiselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-multiselect-item {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n        outline: none;\n    }\n    \n    .p-multiselect-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-multiselect-select-all-label {\n        margin-left: 0.5rem;\n    }\n    \n    .p-multiselect-filter-container {\n        position: relative;\n        flex: 1 1 auto;\n    }\n    \n    .p-multiselect-filter-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-multiselect-filter-container .p-inputtext {\n        width: 100%;\n    }\n    \n    .p-multiselect-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        overflow: hidden;\n        position: relative;\n        margin-left: auto;\n    }\n    \n    .p-multiselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n    \n    .p-fluid .p-multiselect {\n        display: flex;\n    }\n}\n";
 var inlineStyles = {
   root: function root(_ref7) {
     var props = _ref7.props;
@@ -280,6 +285,8 @@ var MultiSelectBase = componentbase.ComponentBase.extend({
     filterBy: null,
     filterInputAutoFocus: true,
     filterLocale: undefined,
+    selectOnFocus: false,
+    autoOptionFocus: false,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterTemplate: null,
@@ -532,6 +539,8 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     onClick: function onClick(e) {
       return _onClick(e);
     },
+    'data-p-highlight': checked,
+    'data-p-disabled': props.disabled,
     onContextMenu: props.onContextMenu,
     onMouseDown: props.onMouseDown
   }, otherProps, ptm('root'));
@@ -739,7 +748,9 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
       context: {
         selected: props.selected,
         disabled: props.disabled,
-        focused: focusedState
+        focused: focusedState,
+        focusedIndex: props.focusedIndex,
+        index: props.index
       }
     });
   };
@@ -751,22 +762,11 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var onClick = function onClick(event) {
     if (props.onClick) {
-      props.onClick({
-        originalEvent: event,
-        option: props.option
-      });
+      props.onClick(event, props.option);
     }
     event.preventDefault();
     event.stopPropagation();
   };
-  var onKeyDown = function onKeyDown(event) {
-    if (props.onKeyDown) {
-      props.onKeyDown({
-        originalEvent: event,
-        option: props.option
-      });
-    }
-  };
   var checkboxIconProps = mergeProps({
     className: cx('checkboxIcon')
   }, getPTOptions('checkboxIcon'));
@@ -775,7 +775,7 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     selected: props.selected
   }) : null;
   var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-  var tabIndex = props.disabled ? null : props.tabIndex || 0;
+  var tabIndex = props.disabled ? -1 : props.tabIndex;
   var checkboxContainerProps = mergeProps({
     className: cx('checkboxContainer')
   }, getPTOptions('checkboxContainer'));
@@ -791,7 +791,6 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     })),
     style: props.style,
     onClick: onClick,
-    onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
     tabIndex: tabIndex,
@@ -893,14 +892,15 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       var selected = props.isSelected(option);
       return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
         hostName: props.hostName,
+        index: j,
         key: optionKey,
+        focusedOptionIndex: props.focusedOptionIndex,
         label: optionLabel,
         option: option,
         style: style,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
-        onKeyDown: props.onOptionKeyDown,
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
@@ -951,13 +951,14 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       return /*#__PURE__*/React__namespace.createElement(MultiSelectItem, {
         hostName: props.hostName,
         key: optionKey,
+        focusedOptionIndex: props.focusedOptionIndex,
         label: optionLabel,
         option: option,
         style: style,
+        index: index,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
-        onKeyDown: props.onOptionKeyDown,
         tabIndex: tabIndex,
         disabled: disabled,
         className: props.itemClassName,
@@ -1086,19 +1087,35 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
   var props = MultiSelectBase.getProps(inProps, context);
-  var _React$useState = React__namespace.useState(''),
+  var _React$useState = React__namespace.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterState = _React$useState2[0],
-    setFilterState = _React$useState2[1];
+    focusedOptionIndex = _React$useState2[0],
+    setFocusedOptionIndex = _React$useState2[1];
   var _React$useState3 = React__namespace.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedState = _React$useState4[0],
-    setFocusedState = _React$useState4[1];
-  var _React$useState5 = React__namespace.useState(props.inline),
+    clicked = _React$useState4[0],
+    setClicked = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(''),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    overlayVisibleState = _React$useState6[0],
-    setOverlayVisibleState = _React$useState6[1];
+    filterState = _React$useState6[0],
+    setFilterState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(-1),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    startRangeIndex = _React$useState8[0],
+    setStartRangeIndex = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    focusedState = _React$useState10[0],
+    setFocusedState = _React$useState10[1];
+  var _React$useState11 = React__namespace.useState(props.inline),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    overlayVisibleState = _React$useState12[0],
+    setOverlayVisibleState = _React$useState12[1];
   var elementRef = React__namespace.useRef(null);
+  var searchValue = React__namespace.useRef(null);
+  var searchTimeout = React__namespace.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
   var labelRef = React__namespace.useRef(null);
   var overlayRef = React__namespace.useRef(null);
@@ -1140,6 +1157,14 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
     bindOverlayListener = _useOverlayListener2[0],
     unbindOverlayListener = _useOverlayListener2[1];
+  var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === inputRef.current ? utils.DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+    utils.DomHandler.focus(focusableEl);
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === inputRef.current ? utils.DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+    utils.DomHandler.focus(focusableEl);
+  };
   var onPanelClick = function onPanelClick(event) {
     overlayservice.OverlayService.emit('overlay-click', {
       originalEvent: event,
@@ -1149,63 +1174,60 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var allowOptionSelect = function allowOptionSelect() {
     return !props.selectionLimit || !props.value || props.value && props.value.length < props.selectionLimit;
   };
-  var onOptionSelect = function onOptionSelect(event) {
-    var originalEvent = event.originalEvent,
-      option = event.option;
-    if (props.disabled || isOptionDisabled(option)) {
-      return;
+  var findNextSelectedOptionIndex = function findNextSelectedOptionIndex(index) {
+    var matchedOptionIndex = hasSelectedOption && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+  };
+  var findPrevSelectedOptionIndex = function findPrevSelectedOptionIndex(index) {
+    var matchedOptionIndex = hasSelectedOption && index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+  };
+  var findNearestSelectedOptionIndex = function findNearestSelectedOptionIndex(index) {
+    var firstCheckUp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var matchedOptionIndex = -1;
+    if (hasSelectedOption) {
+      if (firstCheckUp) {
+        matchedOptionIndex = findPrevSelectedOptionIndex(index);
+        matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
+      } else {
+        matchedOptionIndex = findNextSelectedOptionIndex(index);
+        matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+      }
     }
-    var optionValue = getOptionValue(option);
-    var isUsed = isOptionValueUsed(option);
-    var selected = isSelected(option);
-    var allowSelect = allowOptionSelect();
-    if (selected) {
-      updateModel(originalEvent, props.value.filter(function (val) {
-        return !utils.ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey);
-      }), option);
-    } else if (allowSelect) {
-      updateModel(originalEvent, [].concat(_toConsumableArray(props.value || []), [optionValue]), option);
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var onOptionSelectRange = function onOptionSelectRange(event) {
+    var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+    var end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+    start === -1 && (start = findNearestSelectedOptionIndex(end, true));
+    end === -1 && (end = findNearestSelectedOptionIndex(start));
+    if (start !== -1 && end !== -1) {
+      var rangeStart = Math.min(start, end);
+      var rangeEnd = Math.max(start, end);
+      var value = visibleOptions.slice(rangeStart, rangeEnd + 1).filter(function (option) {
+        return isValidOption(option);
+      }).map(function (option) {
+        return getOptionValue(option);
+      });
+      updateModel(event, value);
     }
   };
-  var onOptionKeyDown = function onOptionKeyDown(event) {
-    var originalEvent = event.originalEvent;
-    var listItem = originalEvent.currentTarget;
-    switch (originalEvent.which) {
-      //down
-      case 40:
-        var nextItem = findNextItem(listItem);
-        nextItem && nextItem.focus();
-        originalEvent.preventDefault();
-        break;
-
-      //up
-      case 38:
-        var prevItem = findPrevItem(listItem);
-        prevItem && prevItem.focus();
-        originalEvent.preventDefault();
-        break;
-
-      //enter and space
-      case 13:
-      case 32:
-        onOptionSelect(event);
-        originalEvent.preventDefault();
-        break;
-
-      //escape
-      case 27:
-        hide();
-        utils.DomHandler.focus(inputRef.current);
-        break;
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
+    if (props.disabled || isOptionDisabled(option)) {
+      return;
     }
-  };
-  var findNextItem = function findNextItem(item) {
-    var nextItem = item.nextElementSibling;
-    return nextItem ? utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') === true || utils.DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? findNextItem(nextItem) : nextItem : null;
-  };
-  var findPrevItem = function findPrevItem(item) {
-    var prevItem = item.previousElementSibling;
-    return prevItem ? utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') === true || utils.DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? findPrevItem(prevItem) : prevItem : null;
+    var selected = isSelected(option);
+    var value = null;
+    if (selected) value = props.value.filter(function (val) {
+      return !utils.ObjectUtils.equals(val, getOptionValue(option), equalityKey);
+    });else value = [].concat(_toConsumableArray(props.value || []), [getOptionValue(option)]);
+    updateModel(event, value);
+    index !== -1 && setFocusedOptionIndex(index);
   };
   var onClick = function onClick(event) {
     if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && utils.DomHandler.getAttribute(event.target, 'data-pc-section') !== 'removetokenicon' && !isClearClicked(event)) {
@@ -1213,42 +1235,170 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       utils.DomHandler.focus(inputRef.current);
       event.preventDefault();
     }
+    setClicked(true);
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    if (!overlayVisibleState) {
+      show();
+      props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+      if (event.shiftKey) {
+        onOptionSelectRange(event, startRangeIndex, optionIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+    }
+    event.preventDefault();
+  };
+  var onArrowUpKey = function onArrowUpKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (event.altKey && !pressedInInputText) {
+      if (focusedOptionIndex !== -1) {
+        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+      }
+      overlayVisibleState && hide();
+      event.preventDefault();
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+      changeFocusedOptionIndex(event, optionIndex);
+      !overlayVisibleState && show();
+      event.preventDefault();
+    }
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (!overlayVisibleState) {
+      setFocusedOptionIndex(-1);
+      onArrowDownKey(event);
+    } else {
+      if (focusedOptionIndex !== -1) {
+        if (event.shiftKey) onOptionSelectRange(event, focusedOptionIndex);else onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+      }
+      hide();
+    }
+    event.preventDefault();
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var currentTarget = event.currentTarget;
+    if (pressedInInputText) {
+      var len = currentTarget.value.length;
+      currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
+      setFocusedOptionIndex(-1);
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findFirstOptionIndex();
+      if (event.shiftKey && metaKey) {
+        onOptionSelectRange(event, optionIndex, startRangeIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+      !overlayVisibleState && show();
+    }
+    event.preventDefault();
+  };
+  var onEndKey = function onEndKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var currentTarget = event.currentTarget;
+    if (pressedInInputText) {
+      var len = currentTarget.value.length;
+      currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
+      _readOnlyError("focusedOptionIndex");
+    } else {
+      var metaKey = event.metaKey || event.ctrlKey;
+      var optionIndex = findLastOptionIndex();
+      if (event.shiftKey && metaKey) {
+        onOptionSelectRange(event, startRangeIndex, optionIndex);
+      }
+      changeFocusedOptionIndex(event, optionIndex);
+      !overlayVisibleState && show();
+    }
+    event.preventDefault();
+  };
+  var onPageUpKey = function onPageUpKey(event) {
+    event.preventDefault();
+  };
+  var onPageDownKey = function onPageDownKey(event) {
+    event.preventDefault();
+  };
+  var onTabKey = function onTabKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!pressedInInputText) {
+      if (overlayVisibleState && hasFocusableElements()) {
+        utils.DomHandler.focus(event.shiftKey ? lastHiddenFocusableElementOnOverlay.current : firstHiddenFocusableElementOnOverlay.current);
+        event.preventDefault();
+      } else {
+        if (focusedOptionIndex !== -1) {
+          onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+        }
+        overlayVisibleState && hide(filter);
+      }
+    }
+  };
+  var onShiftKey = function onShiftKey() {
+    setStartRangeIndex(focusedOptionIndex);
   };
   var onKeyDown = function onKeyDown(event) {
-    switch (event.which) {
-      //down
-      case 40:
+    var metaKey = event.metaKey || event.ctrlKey;
+    switch (event.code) {
+      case 'ArrowUp':
         if (props.inline) break;
-        if (!overlayVisibleState && event.altKey) {
-          show();
-          event.preventDefault();
-        }
+        onArrowUpKey(event);
         break;
-
-      //space
-      case 32:
+      case 'ArrowDown':
         if (props.inline) break;
-        overlayVisibleState ? hide() : show();
+        onArrowDownKey(event);
+        break;
+      case 'Space':
+      case 'NumpadEnter':
+      case 'Enter':
+        if (props.inline) break;
+        onEnterKey(event);
+        break;
+      case 'Home':
+        if (props.inline) break;
+        onHomeKey(event);
         event.preventDefault();
         break;
-
-      //escape
-      case 27:
+      case 'End':
+        if (props.inline) break;
+        onEndKey(event);
+        event.preventDefault();
+        break;
+      case 'PageDown':
+        onPageDownKey(event);
+        break;
+      case 'PageUp':
+        onPageUpKey(event);
+        break;
+      case 'Escape':
         if (props.inline) break;
         hide();
         break;
-
-      //tab
-      case 9:
-        if (overlayVisibleState) {
-          var firstFocusableElement = utils.DomHandler.getFirstFocusableElement(overlayRef.current);
-          if (firstFocusableElement) {
-            firstFocusableElement.focus();
-            event.preventDefault();
-          }
+      case 'Tab':
+        onTabKey(event);
+        break;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        onShiftKey();
+        break;
+      default:
+        if (event.code === 'KeyA' && metaKey) {
+          var value = visibleOptions.filter(function (option) {
+            return isValidOption(option);
+          }).map(function (option) {
+            return getOptionValue(option);
+          });
+          updateModel(event, value);
+          event.preventDefault();
+          break;
+        }
+        if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
+          !overlayVisibleState && show();
+          searchOptions(event);
+          event.preventDefault();
         }
         break;
     }
+    setClicked(false);
   };
   var onSelectAll = function onSelectAll(event) {
     if (props.onSelectAll) {
@@ -1334,9 +1484,13 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   };
   var show = function show() {
     setOverlayVisibleState(true);
+    setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
+    utils.DomHandler.focus(inputRef.current);
   };
   var hide = function hide() {
+    setFocusedOptionIndex(-1);
     setOverlayVisibleState(false);
+    setClicked(false);
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
     utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
@@ -1530,6 +1684,100 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var isOptionValueUsed = function isOptionValueUsed(option) {
     return !props.useOptionAsValue && props.optionValue || option && option['value'] !== undefined;
   };
+  var isOptionGroup = function isOptionGroup(option) {
+    return props.optionGroupLabel && option.optionGroup && option.group;
+  };
+  var hasSelectedOption = function hasSelectedOption() {
+    return utils.ObjectUtils.isNotEmpty(props.value);
+  };
+  var hasFocusableElements = function hasFocusableElements() {
+    return utils.DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+  };
+  var isOptionMatched = function isOptionMatched(option) {
+    var _getOptionLabel;
+    return isValidOption(option) && ((_getOptionLabel = getOptionLabel(option)) === null || _getOptionLabel === void 0 ? void 0 : _getOptionLabel.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)));
+  };
+  var isValidOption = function isValidOption(option) {
+    return utils.ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+  };
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    return isValidOption(option) && isSelected(option);
+  };
+  var findSelectedOptionIndex = function findSelectedOptionIndex() {
+    return hasSelectedOption ? visibleOptions === null || visibleOptions === void 0 ? void 0 : visibleOptions.findIndex(function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
+  };
+  var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+    var selectedIndex = findSelectedOptionIndex();
+    return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+  };
+  var findLastFocusedOptionIndex = function findLastFocusedOptionIndex() {
+    var selectedIndex = findSelectedOptionIndex();
+    return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
+  };
+  var findFirstOptionIndex = function findFirstOptionIndex() {
+    return visibleOptions.findIndex(function (option) {
+      return isValidOption(option);
+    });
+  };
+  var findLastOptionIndex = function findLastOptionIndex() {
+    return utils.ObjectUtils.findLastIndex(visibleOptions, function (option) {
+      return isValidOption(option);
+    });
+  };
+  var findNextOptionIndex = function findNextOptionIndex(index) {
+    var matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex(function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+  };
+  var findPrevOptionIndex = function findPrevOptionIndex(index) {
+    var matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var searchOptions = function searchOptions(event) {
+    searchValue.current = (searchValue.current || '') + event.key;
+    var optionIndex = -1;
+    if (utils.ObjectUtils.isNotEmpty(searchValue.current)) {
+      if (focusedOptionIndex !== -1) {
+        optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex(function (option) {
+          return isOptionMatched(option);
+        });
+        optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex(function (option) {
+          return isOptionMatched(option);
+        }) : optionIndex + focusedOptionIndex;
+      } else {
+        optionIndex = visibleOptions.findIndex(function (option) {
+          return isOptionMatched(option);
+        });
+      }
+      if (optionIndex === -1 && focusedOptionIndex === -1) {
+        optionIndex = findFirstFocusedOptionIndex();
+      }
+      if (optionIndex !== -1) {
+        changeFocusedOptionIndex(event, optionIndex);
+      }
+    }
+    if (searchTimeout.current) {
+      clearTimeout(searchTimeout.current);
+    }
+    searchTimeout.current = setTimeout(function () {
+      searchValue.current = '';
+      searchTimeout.current = null;
+    }, 500);
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+    if (focusedOptionIndex !== index) {
+      setFocusedOptionIndex(index);
+      scrollInView();
+      if (props.selectOnFocus) {
+        onOptionSelect(event, visibleOptions[index], false);
+      }
+    }
+  };
   var removeChip = function removeChip(event, item) {
     var value = props.value.filter(function (val) {
       return !utils.ObjectUtils.equals(val, item, equalityKey);
@@ -1670,6 +1918,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     setTimeout(function () {
       props.overlayVisible ? show() : hide();
     }, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.overlayVisible]);
   hooks.useUpdateEffect(function () {
     if (overlayVisibleState && filterState && hasFilter) {
@@ -1754,11 +2003,31 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     role: 'listbox',
     'aria-expanded': overlayVisibleState,
     disabled: props.disabled,
-    tabIndex: props.tabIndex
+    tabIndex: !props.disabled ? props.tabIndex : -1
   }, ariaProps), ptm('input'));
+  var firstHiddenElementProps = mergeProps({
+    ref: firstHiddenFocusableElementOnOverlay,
+    role: 'presentation',
+    'aria-hidden': true,
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: '0',
+    onFocus: onFirstHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptm('hiddenFirstFocusableEl'));
+  var lastHiddenElementProps = mergeProps({
+    ref: lastHiddenFocusableElementOnOverlay,
+    role: 'presentation',
+    'aria-hidden': true,
+    className: 'p-hidden-accessible p-hidden-focusable',
+    tabIndex: '0',
+    onFocus: onLastHiddenFocus,
+    'data-p-hidden-accessible': true,
+    'data-p-hidden-focusable': true
+  }, ptm('hiddenLastFocusableEl'));
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({}, inputProps, {
     readOnly: true
-  }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
+  }))), !props.inline && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, label, clearIcon, triggerIcon), /*#__PURE__*/React__namespace.createElement("span", firstHiddenElementProps), /*#__PURE__*/React__namespace.createElement(MultiSelectPanel, _extends({
     hostName: "MultiSelect",
     ref: overlayRef,
     visibleOptions: visibleOptions
@@ -1766,6 +2035,8 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     onClick: onPanelClick,
     onOverlayHide: hide,
     filterValue: filterState,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     hasFilter: hasFilter,
     onFilterInputChange: onFilterInputChange,
     resetFilter: resetFilter,
@@ -1782,7 +2053,6 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     isAllSelected: isAllSelected,
     onOptionSelect: onOptionSelect,
     allowOptionSelect: allowOptionSelect,
-    onOptionKeyDown: onOptionKeyDown,
     "in": overlayVisibleState,
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
@@ -1793,7 +2063,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     sx: sx,
     isUnstyled: isUnstyled,
     metaData: metaData
-  }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+  })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {