primereact 10.3.3 → 10.5.0

package/dropdown/dropdown.js

@@ -191,10 +191,13 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
     item: function item(_ref7) {
       var selected = _ref7.selected,
         disabled = _ref7.disabled,
-        label = _ref7.label;
+        label = _ref7.label,
+        index = _ref7.index,
+        focusedOptionIndex = _ref7.focusedOptionIndex;
       return utils.classNames('p-dropdown-item', {
         'p-highlight': selected,
         'p-disabled': disabled,
+        'p-focus': index === focusedOptionIndex,
         'p-dropdown-item-empty': !label || label.length === 0
       });
     },
@@ -247,6 +250,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       inputId: null,
       inputRef: null,
       itemTemplate: null,
+      loading: false,
+      loadingIcon: null,
       maxLength: null,
       name: null,
       onBlur: null,
@@ -259,6 +264,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       onShow: null,
       optionDisabled: null,
       optionGroupChildren: 'items',
+      selectOnFocus: false,
+      autoOptionFocus: false,
       optionGroupLabel: null,
       optionGroupTemplate: null,
       optionLabel: null,
@@ -297,7 +304,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       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: {
@@ -306,7 +315,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         }
       });
     };
-    var _onClick = function onClick(event) {
+    var _onClick = function onClick(event, i) {
       if (props.onClick) {
         props.onClick({
           originalEvent: event,
@@ -321,7 +330,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       className: utils.classNames(option.className, cx('item', {
         selected: selected,
         disabled: disabled,
-        label: label
+        label: label,
+        index: index,
+        focusedOptionIndex: focusedOptionIndex
       })),
       style: props.style,
       onClick: function onClick(e) {
@@ -330,6 +341,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       'aria-label': label,
       'aria-selected': selected,
       'data-p-highlight': selected,
+      'data-p-focused': focusedOptionIndex === index,
       'data-p-disabled': disabled
     }, getPTOptions('item'));
     return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
@@ -401,6 +413,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         var disabled = props.isOptionDisabled(option);
         return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
           key: optionKey,
+          index: j,
+          focusedOptionIndex: props.focusedOptionIndex,
           label: optionLabel,
           option: option,
           style: style,
@@ -448,6 +462,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         return /*#__PURE__*/React__namespace.createElement(DropdownItem, {
           key: optionKey,
           label: optionLabel,
+          index: index,
+          focusedOptionIndex: props.focusedOptionIndex,
           option: option,
           style: style,
           template: props.itemTemplate,
@@ -640,20 +656,30 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       setFilterState = _React$useState2[1];
     var _React$useState3 = React__namespace.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__namespace.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__namespace.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      focusedOptionIndex = _React$useState8[0],
+      setFocusedOptionIndex = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      overlayVisibleState = _React$useState10[0],
+      setOverlayVisibleState = _React$useState10[1];
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
+    var firstHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
+    var lastHiddenFocusableElementOnOverlay = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var focusInputRef = React__namespace.useRef(props.focusInputRef);
     var virtualScrollerRef = React__namespace.useRef(null);
     var searchTimeout = React__namespace.useRef(null);
     var searchValue = React__namespace.useRef(null);
-    var currentSearchChar = React__namespace.useRef(null);
+    React__namespace.useRef(null);
     var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
     var hasFilter = utils.ObjectUtils.isNotEmpty(filterState);
     var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
@@ -717,6 +743,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         return props.options;
       }
     };
+    var onFirstHiddenFocus = function onFirstHiddenFocus(event) {
+      var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+      utils.DomHandler.focus(focusableEl);
+    };
+    var onLastHiddenFocus = function onLastHiddenFocus(event) {
+      var focusableEl = event.relatedTarget === focusInputRef.current ? utils.DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+      utils.DomHandler.focus(focusableEl);
+    };
     var isClearClicked = function isClearClicked(event) {
       return utils.DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || utils.DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
     };
@@ -736,6 +770,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         utils.DomHandler.focus(focusInputRef.current);
         overlayVisibleState ? hide() : show();
       }
+      setClicked(true);
     };
     var onInputFocus = function onInputFocus(event) {
       if (props.showOnFocus && !overlayVisibleState) {
@@ -767,6 +802,15 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
         }, 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.OverlayService.emit('overlay-click', {
         originalEvent: event,
@@ -774,196 +818,285 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       });
     };
     var onInputKeyDown = function onInputKeyDown(event) {
-      switch (event.which) {
-        //down
-        case 40:
-          onDownKey(event);
+      if (props.disabled || utils.DomHandler.isAndroid()) {
+        event.preventDefault();
+        return;
+      }
+      var metaKey = event.metaKey || event.ctrlKey;
+      switch (event.code) {
+        case 'ArrowDown':
+          onArrowDownKey(event);
           break;
-
-        //up
-        case 38:
-          onUpKey(event);
+        case 'ArrowUp':
+          onArrowUpKey(event);
           break;
-
-        //space and enter
-        case 32:
-        case 13:
-          overlayVisibleState ? hide() : show();
-          event.preventDefault();
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          onArrowLeftKey(event, props.editable);
           break;
-
-        //escape and tab
-        case 27:
-        case 9:
-          hide();
+        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':
+          onEnterKey(event);
+          break;
+        case 'Escape':
+          onEscapeKey(event);
+          break;
+        case 'Tab':
+          onTabKey(event);
+          break;
+        case 'Backspace':
+          onBackspaceKey(event, props.editable);
+          break;
+        case 'ShiftLeft':
+        case 'ShiftRight':
+          //NOOP
           break;
         default:
-          search(event);
+          if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
+            !overlayVisibleState && show();
+            !props.editable && searchOptions(event, event.key);
+          }
           break;
       }
+      setClicked(false);
     };
     var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
-      switch (event.which) {
-        //down
-        case 40:
-          onDownKey(event);
+      switch (event.code) {
+        case 'ArrowDown':
+          onArrowDownKey(event);
           break;
-
-        //up
-        case 38:
-          onUpKey(event);
+        case 'ArrowUp':
+          onArrowUpKey(event);
           break;
-
-        //enter and escape
-        case 13:
-        case 27:
-          hide();
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          onArrowLeftKey(event, true);
+          break;
+        case 'Escape':
+        case 'Enter':
+          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 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 hasSelectedOption = function hasSelectedOption() {
+      return utils.ObjectUtils.isNotEmpty(props.value);
+    };
+    var isValidSelectedOption = function isValidSelectedOption(option) {
+      return isValidOption(option) && isSelected(option);
+    };
+    var findSelectedOptionIndex = function findSelectedOptionIndex() {
+      return hasSelectedOption ? visibleOptions.findIndex(function (option) {
+        return isValidSelectedOption(option);
+      }) : -1;
+    };
+    var findFirstFocusedOptionIndex = function findFirstFocusedOptionIndex() {
+      var selectedIndex = findSelectedOptionIndex();
+      return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
     };
-    var onDownKey = function onDownKey(event) {
-      if (visibleOptions) {
-        if (!overlayVisibleState && event.altKey) {
-          show();
+    var searchOptions = function searchOptions(event, _char) {
+      searchValue.current = (searchValue.current || '') + _char;
+      var optionIndex = -1;
+      var matched = false;
+      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 {
-          var nextOption = findNextOption(getSelectedOptionIndex());
-          if (nextOption) {
-            selectItem({
-              originalEvent: event,
-              option: nextOption
-            });
-          }
+          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);
         }
       }
-      event.preventDefault();
-    };
-    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;
+      if (searchTimeout.current) {
+        clearTimeout(searchTimeout.current);
       }
-      return findNextOptionInList(visibleOptions, index);
+      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 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 findLastOptionIndex = function findLastOptionIndex() {
+      return utils.ObjectUtils.findLastIndex(visibleOptions, function (option) {
+        return isValidOption(option);
+      });
     };
-    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;
+    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 changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
+      if (focusedOptionIndex !== index) {
+        setFocusedOptionIndex(index);
+        if (props.selectOnFocus) {
+          onOptionSelect(event, visibleOptions[index], false);
+        }
       }
-      return findPrevOptionInList(visibleOptions, index);
     };
-    var findPrevOptionInList = function findPrevOptionInList(list, index) {
-      var i = index - 1;
-      if (i < 0) {
-        return null;
+    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);
       }
-      var option = list[i];
-      return isOptionDisabled(option) ? findPrevOption(i) : option;
+      event.preventDefault();
     };
-    var search = function search(event) {
-      if (searchTimeout.current) {
-        clearTimeout(searchTimeout.current);
-      }
-      var _char = event.key;
-      if (_char === 'Shift' || _char === 'Control' || _char === 'Alt') {
-        return;
-      }
-      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
-          });
+    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()) {
+          utils.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,
@@ -1093,10 +1226,17 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       return utils.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) {
+        utils.DomHandler.focus(inputRef.current);
+      }
     };
     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']);
@@ -1149,6 +1289,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
     var getOptionRenderKey = function getOptionRenderKey(option) {
       return props.dataKey ? utils.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 utils.ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, props.optionDisabled);
@@ -1297,8 +1440,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
           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__namespace.createElement("input", inputProps);
@@ -1390,10 +1534,31 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       },
       onMouseDown: props.onMouseDown,
       onContextMenu: props.onContextMenu,
+      onFocus: onFocus,
       'data-p-disabled': props.disabled,
       'data-p-focus': focusedState
     }, otherProps, ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement("span", firstHiddenFocusableElementProps), /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
       hostName: "Dropdown",
       ref: overlayRef,
       visibleOptions: visibleOptions,
@@ -1402,6 +1567,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       appendTo: appendTo,
       onClick: onPanelClick,
       onOptionClick: onOptionClick,
+      focusedOptionIndex: focusedOptionIndex,
+      setFocusedOptionIndex: setFocusedOptionIndex,
       filterValue: filterState,
       hasFilter: hasFilter,
       onFilterClearIconClick: onFilterClearIconClick,
@@ -1424,7 +1591,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, componentbase,
       ptm: ptm,
       cx: cx,
       sx: sx
-    }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    })), /*#__PURE__*/React__namespace.createElement("span", lastHiddenFocusableElementProps)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
     }, props.tooltipOptions, {