primereact 10.4.0 → 10.5.0

package/dropdown/dropdown.esm.js

@@ -181,10 +181,13 @@ var classes = {
   item: function item(_ref7) {
     var selected = _ref7.selected,
       disabled = _ref7.disabled,
-      label = _ref7.label;
+      label = _ref7.label,
+      index = _ref7.index,
+      focusedOptionIndex = _ref7.focusedOptionIndex;
     return classNames('p-dropdown-item', {
       'p-highlight': selected,
       'p-disabled': disabled,
+      'p-focus': index === focusedOptionIndex,
       'p-dropdown-item-empty': !label || label.length === 0
     });
   },
@@ -251,6 +254,8 @@ var DropdownBase = ComponentBase.extend({
     onShow: null,
     optionDisabled: null,
     optionGroupChildren: 'items',
+    selectOnFocus: false,
+    autoOptionFocus: false,
     optionGroupLabel: null,
     optionGroupTemplate: null,
     optionLabel: null,
@@ -289,7 +294,9 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     selected = props.selected,
     disabled = props.disabled,
     option = props.option,
-    label = props.label;
+    label = props.label,
+    index = props.index,
+    focusedOptionIndex = props.focusedOptionIndex;
   var getPTOptions = function getPTOptions(key) {
     return ptm(key, {
       context: {
@@ -298,7 +305,7 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
       }
     });
   };
-  var _onClick = function onClick(event) {
+  var _onClick = function onClick(event, i) {
     if (props.onClick) {
       props.onClick({
         originalEvent: event,
@@ -313,7 +320,9 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     className: classNames(option.className, cx('item', {
       selected: selected,
       disabled: disabled,
-      label: label
+      label: label,
+      index: index,
+      focusedOptionIndex: focusedOptionIndex
     })),
     style: props.style,
     onClick: function onClick(e) {
@@ -322,6 +331,7 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     'aria-label': label,
     'aria-selected': selected,
     'data-p-highlight': selected,
+    'data-p-focused': focusedOptionIndex === index,
     'data-p-disabled': disabled
   }, getPTOptions('item'));
   return /*#__PURE__*/React.createElement("li", itemProps, content, /*#__PURE__*/React.createElement(Ripple, null));
@@ -393,6 +403,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       var disabled = props.isOptionDisabled(option);
       return /*#__PURE__*/React.createElement(DropdownItem, {
         key: optionKey,
+        index: j,
+        focusedOptionIndex: props.focusedOptionIndex,
         label: optionLabel,
         option: option,
         style: style,
@@ -440,6 +452,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       return /*#__PURE__*/React.createElement(DropdownItem, {
         key: optionKey,
         label: optionLabel,
+        index: index,
+        focusedOptionIndex: props.focusedOptionIndex,
         option: option,
         style: style,
         template: props.itemTemplate,
@@ -632,20 +646,30 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     setFilterState = _React$useState2[1];
   var _React$useState3 = React.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedState = _React$useState4[0],
-    setFocusedState = _React$useState4[1];
+    clicked = _React$useState4[0],
+    setClicked = _React$useState4[1];
   var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    overlayVisibleState = _React$useState6[0],
-    setOverlayVisibleState = _React$useState6[1];
+    focusedState = _React$useState6[0],
+    setFocusedState = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    focusedOptionIndex = _React$useState8[0],
+    setFocusedOptionIndex = _React$useState8[1];
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    overlayVisibleState = _React$useState10[0],
+    setOverlayVisibleState = _React$useState10[1];
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
+  var firstHiddenFocusableElementOnOverlay = React.useRef(null);
+  var lastHiddenFocusableElementOnOverlay = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
   var focusInputRef = React.useRef(props.focusInputRef);
   var virtualScrollerRef = React.useRef(null);
   var searchTimeout = React.useRef(null);
   var searchValue = React.useRef(null);
-  var currentSearchChar = React.useRef(null);
+  React.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = ObjectUtils.isNotEmpty(filterState);
   var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
@@ -709,6 +733,14 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return props.options;
     }
   };
+  var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    DomHandler.focus(focusableEl);
+  };
+  var onLastHiddenFocus = function onLastHiddenFocus(event) {
+    var focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+    DomHandler.focus(focusableEl);
+  };
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
   };
@@ -728,6 +760,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
+    setClicked(true);
   };
   var onInputFocus = function onInputFocus(event) {
     if (props.showOnFocus && !overlayVisibleState) {
@@ -759,6 +792,15 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }, 200);
     }
   };
+  var onOptionSelect = function onOptionSelect(event, option) {
+    var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var value = getOptionValue(option);
+    selectItem({
+      originalEvent: event,
+      option: value
+    });
+    isHide && hide();
+  };
   var onPanelClick = function onPanelClick(event) {
     OverlayService.emit('overlay-click', {
       originalEvent: event,
@@ -766,189 +808,285 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     });
   };
   var onInputKeyDown = function onInputKeyDown(event) {
+    if (props.disabled || DomHandler.isAndroid()) {
+      event.preventDefault();
+      return;
+    }
+    var metaKey = event.metaKey || event.ctrlKey;
     switch (event.code) {
       case 'ArrowDown':
-        onDownKey(event);
+        onArrowDownKey(event);
         break;
       case 'ArrowUp':
-        onUpKey(event);
+        onArrowUpKey(event);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        onArrowLeftKey(event, props.editable);
+        break;
+      case 'Home':
+        onHomeKey(event);
+        break;
+      case 'End':
+        onEndKey(event);
+        break;
+      case 'PageDown':
+        onPageDownKey(event);
+        break;
+      case 'PageUp':
+        onPageUpKey(event);
         break;
       case 'Space':
+        onSpaceKey(event, props.editable);
+        break;
+      case 'NumpadEnter':
       case 'Enter':
-        overlayVisibleState ? hide() : show();
-        event.preventDefault();
+        onEnterKey(event);
         break;
       case 'Escape':
+        onEscapeKey(event);
+        break;
       case 'Tab':
-        hide();
+        onTabKey(event);
+        break;
+      case 'Backspace':
+        onBackspaceKey(event, props.editable);
+        break;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        //NOOP
         break;
       default:
-        search(event);
+        if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+          !overlayVisibleState && show();
+          !props.editable && searchOptions(event, event.key);
+        }
         break;
     }
+    setClicked(false);
   };
   var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
     switch (event.code) {
       case 'ArrowDown':
-        onDownKey(event);
+        onArrowDownKey(event);
         break;
       case 'ArrowUp':
-        onUpKey(event);
+        onArrowUpKey(event);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        onArrowLeftKey(event, true);
         break;
       case 'Escape':
       case 'Enter':
-        hide();
+        onEnterKey(event);
         event.preventDefault();
         break;
     }
   };
-  var onUpKey = function onUpKey(event) {
-    if (visibleOptions) {
-      var prevOption = findPrevOption(getSelectedOptionIndex());
-      if (prevOption) {
-        selectItem({
-          originalEvent: event,
-          option: prevOption
-        });
-      }
-    }
-    event.preventDefault();
+  var hasFocusableElements = function hasFocusableElements() {
+    return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
   };
-  var onDownKey = function onDownKey(event) {
-    if (visibleOptions) {
-      if (!overlayVisibleState && event.altKey) {
-        show();
-      } else {
-        var nextOption = findNextOption(getSelectedOptionIndex());
-        if (nextOption) {
-          selectItem({
-            originalEvent: event,
-            option: nextOption
-          });
-        }
-      }
-    }
-    event.preventDefault();
+  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 findNextOption = function findNextOption(index) {
-    if (props.optionGroupLabel) {
-      var groupIndex = index === -1 ? 0 : index.group;
-      var optionIndex = index === -1 ? -1 : index.option;
-      var option = findNextOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
-      if (option) return option;else if (groupIndex + 1 !== visibleOptions.length) return findNextOption({
-        group: groupIndex + 1,
-        option: -1
-      });else return null;
-    }
-    return findNextOptionInList(visibleOptions, index);
+  var isValidOption = function isValidOption(option) {
+    return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
   };
-  var findNextOptionInList = function findNextOptionInList(list, index) {
-    var i = index + 1;
-    if (i === list.length) {
-      return null;
-    }
-    var option = list[i];
-    return isOptionDisabled(option) ? findNextOptionInList(i) : option;
+  var hasSelectedOption = function hasSelectedOption() {
+    return ObjectUtils.isNotEmpty(props.value);
   };
-  var findPrevOption = function findPrevOption(index) {
-    if (index === -1) {
-      return null;
-    }
-    if (props.optionGroupLabel) {
-      var groupIndex = index.group;
-      var optionIndex = index.option;
-      var option = findPrevOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
-      if (option) return option;else if (groupIndex > 0) return findPrevOption({
-        group: groupIndex - 1,
-        option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
-      });else return null;
-    }
-    return findPrevOptionInList(visibleOptions, index);
+  var isValidSelectedOption = function isValidSelectedOption(option) {
+    return isValidOption(option) && isSelected(option);
   };
-  var findPrevOptionInList = function findPrevOptionInList(list, index) {
-    var i = index - 1;
-    if (i < 0) {
-      return null;
-    }
-    var option = list[i];
-    return isOptionDisabled(option) ? findPrevOption(i) : option;
+  var findSelectedOptionIndex = function findSelectedOptionIndex() {
+    return hasSelectedOption ? visibleOptions.findIndex(function (option) {
+      return isValidSelectedOption(option);
+    }) : -1;
   };
-  var search = function search(event) {
+  var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+    var selectedIndex = findSelectedOptionIndex();
+    return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+  };
+  var searchOptions = function searchOptions(event, _char) {
+    searchValue.current = (searchValue.current || '') + _char;
+    var optionIndex = -1;
+    var matched = false;
+    if (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) {
+        matched = true;
+      }
+      if (optionIndex === -1 && focusedOptionIndex === -1) {
+        optionIndex = findFirstFocusedOptionIndex();
+      }
+      if (optionIndex !== -1) {
+        changeFocusedOptionIndex(event, optionIndex);
+      }
+    }
     if (searchTimeout.current) {
       clearTimeout(searchTimeout.current);
     }
-    if (event.ctrlKey || event.metaKey || event.altKey) {
-      // ignore meta combinations like CTRL+F for browser search
-      return;
+    searchTimeout.current = setTimeout(function () {
+      searchValue.current = '';
+      searchTimeout.current = null;
+    }, 500);
+    return matched;
+  };
+  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 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 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), function (option) {
+      return isValidOption(option);
+    }) : -1;
+    return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+  };
+  var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+    if (focusedOptionIndex !== index) {
+      setFocusedOptionIndex(index);
+      if (props.selectOnFocus) {
+        onOptionSelect(event, visibleOptions[index], false);
+      }
     }
-    var _char = event.key;
-    if (_char.length !== 1) {
-      // only single character keys matter for searching
-      return;
+  };
+  var onArrowDownKey = function onArrowDownKey(event) {
+    if (!overlayVisibleState) {
+      show();
+      props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+      changeFocusedOptionIndex(event, optionIndex);
     }
-    if (currentSearchChar.current === _char) searchValue.current = _char;else searchValue.current = searchValue.current ? searchValue.current + _char : _char;
-    currentSearchChar.current = _char;
-    if (searchValue.current) {
-      var searchIndex = getSelectedOptionIndex();
-      var newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption(searchIndex + 1);
-      if (newOption) {
-        selectItem({
-          originalEvent: event,
-          option: newOption
-        });
+    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]);
       }
+      state.overlayVisible && hide();
+      event.preventDefault();
+    } else {
+      var optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+      changeFocusedOptionIndex(event, optionIndex);
+      !overlayVisibleState && show();
+      event.preventDefault();
     }
-    searchTimeout.current = setTimeout(function () {
-      searchValue.current = null;
-    }, 250);
   };
-  var searchOption = function searchOption(index) {
-    if (searchValue.current) {
-      return searchOptionInRange(index, visibleOptions.length) || searchOptionInRange(0, index);
+  var onArrowLeftKey = function onArrowLeftKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    pressedInInputText && setFocusedOptionIndex(-1);
+  };
+  var onHomeKey = function onHomeKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      event.currentTarget.setSelectionRange(0, 0);
+      setFocusedOptionIndex(-1);
+    } else {
+      changeFocusedOptionIndex(event, findFirstOptionIndex());
+      !overlayVisibleState && show();
     }
-    return null;
+    event.preventDefault();
   };
-  var searchOptionInRange = function searchOptionInRange(start, end) {
-    for (var i = start; i < end; i++) {
-      var opt = visibleOptions[i];
-      if (matchesSearchValue(opt)) {
-        return opt;
-      }
+  var onEndKey = function onEndKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      var target = event.currentTarget;
+      var len = target.value.length;
+      target.setSelectionRange(len, len);
+      setFocusedOptionIndex(-1);
+    } else {
+      changeFocusedOptionIndex(event, findLastOptionIndex());
+      !overlayVisibleState && show();
     }
-    return null;
+    event.preventDefault();
   };
-  var searchOptionInGroup = function searchOptionInGroup(index) {
-    var searchIndex = index === -1 ? {
-      group: 0,
-      option: -1
-    } : index;
-    for (var i = searchIndex.group; i < visibleOptions.length; i++) {
-      var groupOptions = getOptionGroupChildren(visibleOptions[i]);
-      for (var j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) {
-        if (matchesSearchValue(groupOptions[j])) {
-          return groupOptions[j];
-        }
+  var onPageUpKey = function onPageUpKey(event) {
+    event.preventDefault();
+  };
+  var onPageDownKey = function onPageDownKey(event) {
+    event.preventDefault();
+  };
+  var onSpaceKey = function onSpaceKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    !pressedInInputText && onEnterKey(event);
+  };
+  var onEnterKey = function onEnterKey(event) {
+    if (!overlayVisibleState) {
+      setFocusedOptionIndex(-1);
+      onArrowDownKey(event);
+    } else {
+      if (focusedOptionIndex !== -1) {
+        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
       }
+      hide();
     }
-    for (var _i = 0; _i <= searchIndex.group; _i++) {
-      var _groupOptions = getOptionGroupChildren(visibleOptions[_i]);
-      for (var _j = 0; _j < (searchIndex.group === _i ? searchIndex.option : _groupOptions.length); _j++) {
-        if (matchesSearchValue(_groupOptions[_j])) {
-          return _groupOptions[_j];
+    event.preventDefault();
+  };
+  var onEscapeKey = function onEscapeKey(event) {
+    overlayVisibleState && hide();
+    event.preventDefault();
+  };
+  var onTabKey = function onTabKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!pressedInInputText) {
+      if (overlayVisibleState && hasFocusableElements()) {
+        DomHandler.focus($refs.firstHiddenFocusableElementOnOverlay);
+        event.preventDefault();
+      } else {
+        if (focusedOptionIndex !== -1) {
+          onOptionSelect(event, visibleOptions[focusedOptionIndex]);
         }
+        overlayVisibleState && hide();
       }
     }
-    return null;
   };
-  var matchesSearchValue = function matchesSearchValue(option) {
-    var label = getOptionLabel(option);
-    if (!label) {
-      return false;
+  var onBackspaceKey = function onBackspaceKey(event) {
+    var pressedInInputText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (pressedInInputText) {
+      !overlayVisibleState && show();
     }
-    label = label.toLocaleLowerCase(props.filterLocale);
-    return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
   };
   var onEditableInputChange = function onEditableInputChange(event) {
+    !overlayVisibleState && show();
+    var searchIndex = null;
+    if (event.target.value) {
+      searchIndex = visibleOptions.findIndex(function (item) {
+        return item.name.toLocaleLowerCase().startsWith(event.target.value.toLocaleLowerCase());
+      });
+    }
+    setFocusedOptionIndex(searchIndex);
     if (props.onChange) {
       props.onChange({
         originalEvent: event.originalEvent,
@@ -1078,10 +1216,17 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
   };
   var show = function show() {
+    setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : props.editable ? -1 : findSelectedOptionIndex());
     setOverlayVisibleState(true);
   };
   var hide = function hide() {
     setOverlayVisibleState(false);
+    setClicked(false);
+  };
+  var onFocus = function onFocus() {
+    if (props.editable) {
+      DomHandler.focus(inputRef.current);
+    }
   };
   var onOverlayEnter = function onOverlayEnter(callback) {
     ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, context && context.zIndex['overlay'] || PrimeReact.zIndex['overlay']);
@@ -1134,6 +1279,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var getOptionRenderKey = function getOptionRenderKey(option) {
     return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
   };
+  var isOptionGroup = function isOptionGroup(option) {
+    return props.optionGroupLabel && option.optionGroup && option.group;
+  };
   var isOptionDisabled = function isOptionDisabled(option) {
     if (props.optionDisabled) {
       return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
@@ -1282,8 +1430,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         maxLength: props.maxLength,
         onInput: onEditableInputChange,
         onFocus: onEditableInputFocus,
+        onKeyDown: onInputKeyDown,
         onBlur: onInputBlur,
-        tabIndex: props.tabIndex || 0,
+        tabIndex: !props.disabled ? props.tabIndex : -1,
         'aria-haspopup': 'listbox'
       }, ariaProps), ptm('input'));
       return /*#__PURE__*/React.createElement("input", inputProps);
@@ -1375,10 +1524,31 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     },
     onMouseDown: props.onMouseDown,
     onContextMenu: props.onContextMenu,
+    onFocus: onFocus,
     'data-p-disabled': props.disabled,
     'data-p-focus': focusedState
   }, otherProps, ptm('root'));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement(DropdownPanel, _extends({
+  var firstHiddenFocusableElementProps = 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 lastHiddenFocusableElementProps = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React.createElement(DropdownPanel, _extends({
     hostName: "Dropdown",
     ref: overlayRef,
     visibleOptions: visibleOptions,
@@ -1387,6 +1557,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     appendTo: appendTo,
     onClick: onPanelClick,
     onOptionClick: onOptionClick,
+    focusedOptionIndex: focusedOptionIndex,
+    setFocusedOptionIndex: setFocusedOptionIndex,
     filterValue: filterState,
     hasFilter: hasFilter,
     onFilterClearIconClick: onFilterClearIconClick,
@@ -1409,7 +1581,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     ptm: ptm,
     cx: cx,
     sx: sx
-  }))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+  })), /*#__PURE__*/React.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions, {