primereact 10.8.3 → 10.8.5

package/multiselect/multiselect.esm.js

@@ -19,18 +19,13 @@ import { InputText } from 'primereact/inputtext';
 import { Ripple } from 'primereact/ripple';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
 function _typeof(o) {
@@ -43,74 +38,67 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r ? String : Number)(t);
 }
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
 }
 
-function _arrayLikeToArray$1(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
+function _arrayLikeToArray$1(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray$1(r);
 }
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
 }
 
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+function _unsupportedIterableToArray$1(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
+  }
 }
 
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread();
 }
 
-function _readOnlyError(name) {
-  throw new TypeError("\"" + name + "\" is read-only");
+function _readOnlyError(r) {
+  throw new TypeError('"' + r + '" is read-only');
 }
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
 
 function _iterableToArrayLimit(r, l) {
@@ -145,8 +133,8 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
 }
 
 var classes$1 = {
@@ -376,7 +364,7 @@ var CheckboxBase = ComponentBase.extend({
 
 function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+var Checkbox = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CheckboxBase.getProps(inProps, context);
@@ -776,7 +764,7 @@ MultiSelectItem.displayName = 'MultiSelectItem';
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+var MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
   var filterInputRef = React.useRef(null);
   var mergeProps = useMergeProps();
@@ -863,34 +851,6 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
       props === null || props === void 0 || (_props$changeFocusedO = props.changeFocusedOptionIndex) === null || _props$changeFocusedO === void 0 || _props$changeFocusedO.call(props, event, index);
     }
   };
-  var createGroupChildren = function createGroupChildren(optionGroup, style) {
-    var groupChildren = props.getOptionGroupChildren(optionGroup);
-    return groupChildren.map(function (option, j) {
-      var optionLabel = props.getOptionLabel(option);
-      var optionKey = j + '_' + props.getOptionRenderKey(option);
-      var disabled = props.isOptionDisabled(option);
-      var selected = props.isSelected(option);
-      return /*#__PURE__*/React.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,
-        onMouseMove: changeFocusedItemOnHover,
-        disabled: disabled,
-        className: props.itemClassName,
-        checkboxIcon: props.checkboxIcon,
-        isUnstyled: isUnstyled,
-        ptm: ptm,
-        cx: cx
-      });
-    });
-  };
   var createEmptyFilter = function createEmptyFilter() {
     var emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
     var emptyMessageProps = mergeProps({
@@ -914,9 +874,8 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     var style = {
       height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
     };
-    if (props.optionGroupLabel) {
+    if (option.group && props.optionGroupLabel) {
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
-      var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + props.getOptionGroupRenderKey(option);
       var itemGroupProps = mergeProps({
         className: cx('itemGroup'),
@@ -924,11 +883,9 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
           scrollerOptions: scrollerOptions
         })
       }, getPTOptions('itemGroup'));
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: key
-      }, /*#__PURE__*/React.createElement("li", _extends({}, itemGroupProps, {
+      return /*#__PURE__*/React.createElement("li", _extends({
         key: key
-      }), groupContent), groupChildrenContent);
+      }, itemGroupProps), groupContent);
     }
     var optionLabel = props.getOptionLabel(option);
     var optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -1041,6 +998,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         exit: 100
       },
       options: props.transitionOptions,
+      appear: true,
       unmountOnExit: true,
       onEnter: onEnter,
       onEntered: onEntered,
@@ -1086,10 +1044,10 @@ MultiSelectPanel.displayName = 'MultiSelectPanel';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = MultiSelectBase.getProps(inProps, context);
@@ -1123,8 +1081,9 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var firstHiddenFocusableElementOnOverlay = React.useRef(null);
   var lastHiddenFocusableElementOnOverlay = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
-  var labelRef = React.useRef(null);
+  var labelContainerRef = React.useRef(null);
   var overlayRef = React.useRef(null);
+  var labelRef = React.useRef(null);
   var hasFilter = filterState && filterState.trim().length > 0;
   var empty = ObjectUtils.isEmpty(props.value);
   var equalityKey = props.optionValue ? null : props.dataKey;
@@ -1404,7 +1363,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         onShiftKey();
         break;
       default:
-        if (event.code === 'KeyA' && metaKey) {
+        if (event.key === 'a' && metaKey) {
           var value = visibleOptions.filter(function (option) {
             return isValidOption(option);
           }).map(function (option) {
@@ -1430,29 +1389,12 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       var value = null;
       if (event.checked) {
         value = [];
-        if (visibleOptions) {
-          var selectedOptions = visibleOptions.filter(function (option) {
-            return isOptionDisabled(option) && isSelected(option);
-          });
-          value = selectedOptions.map(function (option) {
-            return getOptionValue(option);
-          });
-        }
-      } else if (visibleOptions) {
-        var options = visibleOptions.filter(function (option) {
-          return !isOptionDisabled(option) || isSelected(option);
+      } else {
+        var validOptions = visibleOptions.filter(function (option) {
+          return isValidOption(option) && !isOptionDisabled(option);
         });
-        if (props.optionGroupLabel) {
-          value = [];
-          options.forEach(function (optionGroup) {
-            return value = [].concat(_toConsumableArray(value), _toConsumableArray(getOptionGroupChildren(optionGroup).filter(function (option) {
-              return !isOptionDisabled(option);
-            }).map(function (option) {
-              return getOptionValue(option);
-            })));
-          });
-        } else {
-          value = options.map(function (option) {
+        if (validOptions) {
+          value = validOptions.map(function (option) {
             return getOptionValue(option);
           });
         }
@@ -1556,7 +1498,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     props.onHide && props.onHide();
   };
   var alignOverlay = function alignOverlay() {
-    DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
+    !props.inline && DomHandler.alignOverlay(overlayRef.current, labelContainerRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact.appendTo);
   };
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.getAttribute(event.target, 'data-pc-section') === 'clearicon';
@@ -1658,31 +1600,8 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       return false;
     }
     var options = visibleOptions.filter(function (option) {
-      return !isOptionDisabled(option);
+      return !isOptionDisabled(option) && isValidOption(option);
     });
-    if (props.optionGroupLabel) {
-      var areAllSelected = true;
-      var _iterator2 = _createForOfIteratorHelper(options),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var optionGroup = _step2.value;
-          var visibleOptionsGroupChildren = getOptionGroupChildren(optionGroup).filter(function (option) {
-            return !isOptionDisabled(option);
-          });
-          if (visibleOptionsGroupChildren.some(function (option) {
-            return !isSelected(option);
-          }) === true) {
-            areAllSelected = false;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-      return areAllSelected;
-    }
     return !options.some(function (option) {
       return !isSelected(option);
     });
@@ -1732,7 +1651,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     return !props.useOptionAsValue && props.optionValue || option && option.value !== undefined;
   };
   var isOptionGroup = function isOptionGroup(option) {
-    return props.optionGroupLabel && option.optionGroup && option.group;
+    return props.optionGroupLabel && option.group;
   };
   var hasSelectedOption = function hasSelectedOption() {
     return ObjectUtils.isNotEmpty(props.value);
@@ -1843,6 +1762,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   var removeChip = function removeChip(event, item) {
     event.stopPropagation();
+    if (!isVisible(event.currentTarget)) return;
     var value = props.value.filter(function (val) {
       return !ObjectUtils.equals(val, item, equalityKey);
     });
@@ -1854,6 +1774,17 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
     updateModel(event, value, item);
   };
+  var isVisible = function isVisible(element) {
+    var parentElement = labelRef.current;
+    var isOverflow = parentElement.clientWidth < parentElement.scrollWidth;
+    if (!isOverflow) return true;
+    var target = element.closest('[data-pc-section="token"]');
+    var parentStyles = window.getComputedStyle(parentElement);
+    var targetStyles = window.getComputedStyle(target);
+    var parentWidth = parentElement.clientWidth - parseFloat(parentStyles.paddingLeft) - parseFloat(parentStyles.paddingRight);
+    var targetRight = target.getBoundingClientRect().right + parseFloat(targetStyles.marginRight) - parentElement.getBoundingClientRect().left;
+    return targetRight <= parentWidth;
+  };
   var getSelectedItemsLabel = function getSelectedItemsLabel() {
     var pattern = /{(.*?)}/;
     var selectedItemsLabel = props.selectedItemsLabel || localeOption('selectionMessage');
@@ -1904,10 +1835,15 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         var label = getLabelByValue(val);
         var labelKey = label + '_' + i;
         var iconProps = mergeProps({
+          'aria-label': localeOption('removeTokenIcon'),
           className: cx('removeTokenIcon'),
           onClick: function onClick(e) {
             return removeChip(e, val);
-          }
+          },
+          onKeyDown: function onKeyDown(e) {
+            return onRemoveTokenIconKeyDown(e, val);
+          },
+          tabIndex: props.tabIndex || '0'
         }, ptm('removeTokenIcon', context));
         var icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, _objectSpread({}, iconProps), {
           props: props
@@ -1926,31 +1862,73 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     return getLabel();
   };
   var getVisibleOptions = function getVisibleOptions() {
+    var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
     if (hasFilter) {
       var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
       var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
       if (props.optionGroupLabel) {
         var filteredGroups = [];
-        var _iterator3 = _createForOfIteratorHelper(props.options),
-          _step3;
+        var _iterator2 = _createForOfIteratorHelper(props.options),
+          _step2;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var optgroup = _step3.value;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var optgroup = _step2.value;
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
             if (filteredSubOptions && filteredSubOptions.length) {
               filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
             }
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator3.f();
+          _iterator2.f();
         }
-        return filteredGroups;
+        return flatOptions(filteredGroups);
       }
-      return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+      return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+    }
+    return options;
+  };
+  var flatOptions = function flatOptions(options) {
+    return (options || []).reduce(function (result, option, index) {
+      result.push(_objectSpread(_objectSpread({}, option), {}, {
+        group: true,
+        index: index
+      }));
+      var optionGroupChildren = getOptionGroupChildren(option);
+      optionGroupChildren && optionGroupChildren.forEach(function (o) {
+        return result.push(o);
+      });
+      return result;
+    }, []);
+  };
+  var onClearIconKeyDown = function onClearIconKeyDown(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    switch (event.code) {
+      case 'Space':
+      case 'NumpadEnter':
+      case 'Enter':
+        if (props.inline) {
+          break;
+        }
+        updateModel(event, [], []);
+        break;
+    }
+  };
+  var onRemoveTokenIconKeyDown = function onRemoveTokenIconKeyDown(event, val) {
+    event.preventDefault();
+    event.stopPropagation();
+    switch (event.code) {
+      case 'Space':
+      case 'NumpadEnter':
+      case 'Enter':
+        if (props.inline) {
+          break;
+        }
+        removeChip(event, val);
+        break;
     }
-    return props.options;
   };
   React.useImperativeHandle(ref, function () {
     return {
@@ -1978,9 +1956,11 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
   React.useEffect(function () {
-    setTimeout(function () {
-      props.overlayVisible ? show() : hide();
-    }, 100);
+    if (props.overlayVisible === true) {
+      show();
+    } else if (props.overlayVisible === false) {
+      hide();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.overlayVisible]);
   useUpdateEffect(function () {
@@ -1994,9 +1974,14 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var createClearIcon = function createClearIcon() {
     var clearIconProps = mergeProps({
       className: cx('clearIcon'),
+      'aria-label': localeOption('clear'),
       onClick: function onClick(e) {
         return updateModel(e, [], []);
-      }
+      },
+      onKeyDown: function onKeyDown(e) {
+        return onClearIconKeyDown(e);
+      },
+      tabIndex: props.tabIndex || '0'
     }, ptm('clearIcon'));
     var icon = props.clearIcon || /*#__PURE__*/React.createElement(TimesIcon, clearIconProps);
     var clearIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
@@ -2010,10 +1995,11 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var createLabel = function createLabel() {
     var content = getLabelContent();
     var labelContainerProps = mergeProps({
-      ref: labelRef,
+      ref: labelContainerRef,
       className: cx('labelContainer')
     }, ptm('labelContainer'));
     var labelProps = mergeProps({
+      ref: labelRef,
       className: cx('label', {
         empty: empty
       })
@@ -2022,7 +2008,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   var getInputValue = function getInputValue() {
     var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    if (props.optionLabel && Array.isArray(value)) {
+    if (Array.isArray(value)) {
       return value.map(function (val) {
         return getLabelByValue(val);
       }).join(', ');