primereact 8.7.2 → 9.0.0-beta.1

package/dropdown/dropdown.js

@@ -29,14 +29,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     _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 target;
     };
     return _extends.apply(this, arguments);
@@ -52,7 +50,24 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     }, _typeof(obj);
   }
 
+  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;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
   function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -63,7 +78,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     } else {
       obj[key] = value;
     }
-
     return obj;
   }
 
@@ -72,42 +86,40 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
   }
 
   function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-
-    var _s, _e;
-
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
+    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+    if (null != _i) {
+      var _s,
+        _e,
+        _x,
+        _r,
+        _arr = [],
+        _n = !0,
+        _d = !1;
       try {
-        if (!_n && _i["return"] != null) _i["return"]();
+        if (_x = (_i = _i.call(arr)).next, 0 === i) {
+          if (Object(_i) !== _i) return;
+          _n = !1;
+        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) {
+          ;
+        }
+      } catch (err) {
+        _d = !0, _e = err;
       } finally {
-        if (_d) throw _e;
+        try {
+          if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+        } finally {
+          if (_d) throw _e;
+        }
       }
+      return _arr;
     }
-
-    return _arr;
   }
 
   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;
   }
 
@@ -137,7 +149,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       }
     };
-
     var className = utils.classNames('p-dropdown-item', {
       'p-highlight': props.selected,
       'p-disabled': props.disabled,
@@ -157,7 +168,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
   DropdownItem.displayName = 'DropdownItem';
 
   function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
   function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var virtualScrollerRef = React__namespace.useRef(null);
@@ -171,12 +181,10 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         return props.resetFilter();
       }
     };
-
     var onEnter = function onEnter() {
       props.onEnter(function () {
         if (virtualScrollerRef.current) {
           var selectedIndex = props.getSelectedOptionIndex();
-
           if (selectedIndex !== -1) {
             setTimeout(function () {
               return virtualScrollerRef.current.scrollToIndex(selectedIndex);
@@ -185,7 +193,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }
       });
     };
-
     var onEntered = function onEntered() {
       props.onEntered(function () {
         if (props.filter && props.filterInputAutoFocus) {
@@ -193,12 +200,10 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }
       });
     };
-
     var onFilterInputChange = function onFilterInputChange(event) {
       virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
       props.onFilterInputChange && props.onFilterInputChange(event);
     };
-
     var createGroupChildren = function createGroupChildren(optionGroup, style) {
       var groupChildren = props.getOptionGroupChildren(optionGroup);
       return groupChildren.map(function (option, j) {
@@ -217,20 +222,17 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       });
     };
-
     var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
       var message = utils.ObjectUtils.getJSXElement(emptyMessage, props) || PrimeReact.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
       return /*#__PURE__*/React__namespace.createElement("li", {
         className: "p-dropdown-empty-message"
       }, message);
     };
-
     var createItem = function createItem(option, index) {
       var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var style = {
         height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
       };
-
       if (props.optionGroupLabel) {
         var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var groupChildrenContent = createGroupChildren(option, style);
@@ -257,17 +259,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       }
     };
-
     var createItems = function createItems() {
       if (utils.ObjectUtils.isNotEmpty(props.visibleOptions)) {
         return props.visibleOptions.map(createItem);
       } else if (props.hasFilter) {
         return createEmptyMessage(props.emptyFilterMessage, true);
       }
-
       return createEmptyMessage(props.emptyMessage);
     };
-
     var createFilterClearIcon = function createFilterClearIcon() {
       if (props.showFilterClear && props.filterValue) {
         var ariaLabel = PrimeReact.localeOption('clear');
@@ -281,10 +280,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           }
         });
       }
-
       return null;
     };
-
     var createFilter = function createFilter() {
       if (props.filter) {
         var clearIcon = createFilterClearIcon();
@@ -305,7 +302,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }), clearIcon, /*#__PURE__*/React__namespace.createElement("i", {
           className: "p-dropdown-filter-icon pi pi-search"
         }));
-
         if (props.filterTemplate) {
           var defaultContentOptions = {
             className: containerClassName,
@@ -319,15 +315,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           };
           content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
         }
-
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-dropdown-header"
         }, content);
       }
-
       return null;
     };
-
     var createContent = function createContent() {
       if (props.virtualScrollerOptions) {
         var virtualScrollerProps = _objectSpread$1(_objectSpread$1({}, props.virtualScrollerOptions), {
@@ -355,7 +348,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
             }, content);
           }
         });
-
         return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
           ref: virtualScrollerRef
         }, virtualScrollerProps));
@@ -372,9 +364,11 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }, items));
       }
     };
-
     var createElement = function createElement() {
-      var className = utils.classNames('p-dropdown-panel p-component', props.panelClassName);
+      var className = utils.classNames('p-dropdown-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+      });
       var filter = createFilter();
       var content = createContent();
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
@@ -399,7 +393,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         onClick: props.onClick
       }, filter, content));
     };
-
     var element = createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
       element: element,
@@ -409,74 +402,60 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
   DropdownPanel.displayName = 'DropdownPanel';
 
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
   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 Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(''),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        filterState = _React$useState2[0],
-        setFilterState = _React$useState2[1];
-
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      filterState = _React$useState2[0],
+      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];
-
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      focusedState = _React$useState4[0],
+      setFocusedState = _React$useState4[1];
     var _React$useState5 = React__namespace.useState(false),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        overlayVisibleState = _React$useState6[0],
-        setOverlayVisibleState = _React$useState6[1];
-
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      overlayVisibleState = _React$useState6[0],
+      setOverlayVisibleState = _React$useState6[1];
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-    var focusInputRef = React__namespace.useRef(null);
+    var focusInputRef = React__namespace.useRef(props.focusInputRef);
     var searchTimeout = React__namespace.useRef(null);
     var searchValue = React__namespace.useRef(null);
     var currentSearchChar = React__namespace.useRef(null);
     var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
     var hasFilter = utils.ObjectUtils.isNotEmpty(filterState);
     var appendTo = props.appendTo || PrimeReact__default["default"].appendTo;
-
     var _useOverlayListener = hooks.useOverlayListener({
-      target: elementRef,
-      overlay: overlayRef,
-      listener: function listener(event, _ref) {
-        var type = _ref.type,
+        target: elementRef,
+        overlay: overlayRef,
+        listener: function listener(event, _ref) {
+          var type = _ref.type,
             valid = _ref.valid;
-
-        if (valid) {
-          type === 'outside' ? !isClearClicked(event) && hide() : hide();
-        }
-      },
-      when: overlayVisibleState
-    }),
-        _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-        bindOverlayListener = _useOverlayListener2[0],
-        unbindOverlayListener = _useOverlayListener2[1];
-
+          if (valid) {
+            type === 'outside' ? !isClearClicked(event) && hide() : hide();
+          }
+        },
+        when: overlayVisibleState
+      }),
+      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+      bindOverlayListener = _useOverlayListener2[0],
+      unbindOverlayListener = _useOverlayListener2[1];
     var getVisibleOptions = function getVisibleOptions() {
       if (hasFilter && !isLazy) {
         var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
         var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
-
         if (props.optionGroupLabel) {
           var filteredGroups = [];
-
           var _iterator = _createForOfIteratorHelper(props.options),
-              _step;
-
+            _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var optgroup = _step.value;
               var filteredSubOptions = PrimeReact.FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
-
               if (filteredSubOptions && filteredSubOptions.length) {
                 filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), {
                   items: filteredSubOptions
@@ -488,7 +467,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           } finally {
             _iterator.f();
           }
-
           return filteredGroups;
         } else {
           return PrimeReact.FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
@@ -497,16 +475,19 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         return props.options;
       }
     };
-
     var isClearClicked = function isClearClicked(event) {
       return utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || utils.DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
     };
-
     var onClick = function onClick(event) {
       if (props.disabled) {
         return;
       }
+      props.onClick && props.onClick(event);
 
+      // do not continue if the user defined click wants to prevent it
+      if (event.defaultPrevented) {
+        return;
+      }
       if (utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
         return;
       } else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
@@ -514,19 +495,15 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         overlayVisibleState ? hide() : show();
       }
     };
-
     var onInputFocus = function onInputFocus(event) {
       if (props.showOnFocus && !overlayVisibleState) {
         show();
       }
-
       setFocusedState(true);
       props.onFocus && props.onFocus(event);
     };
-
     var onInputBlur = function onInputBlur(event) {
       setFocusedState(false);
-
       if (props.onBlur) {
         setTimeout(function () {
           var currentValue = inputRef.current ? inputRef.current.value : undefined;
@@ -544,58 +521,54 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }, 200);
       }
     };
-
     var onPanelClick = function onPanelClick(event) {
       overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
         target: elementRef.current
       });
     };
-
     var onInputKeyDown = function onInputKeyDown(event) {
       switch (event.which) {
         //down
         case 40:
           onDownKey(event);
           break;
-        //up
 
+        //up
         case 38:
           onUpKey(event);
           break;
-        //space and enter
 
+        //space and enter
         case 32:
         case 13:
           overlayVisibleState ? hide() : show();
           event.preventDefault();
           break;
-        //escape and tab
 
+        //escape and tab
         case 27:
         case 9:
           hide();
           break;
-
         default:
           search(event);
           break;
       }
     };
-
     var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
       switch (event.which) {
         //down
         case 40:
           onDownKey(event);
           break;
-        //up
 
+        //up
         case 38:
           onUpKey(event);
           break;
-        //enter and escape
 
+        //enter and escape
         case 13:
         case 27:
           hide();
@@ -603,11 +576,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           break;
       }
     };
-
     var onUpKey = function onUpKey(event) {
       if (visibleOptions) {
         var prevOption = findPrevOption(getSelectedOptionIndex());
-
         if (prevOption) {
           selectItem({
             originalEvent: event,
@@ -615,17 +586,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           });
         }
       }
-
       event.preventDefault();
     };
-
     var onDownKey = function onDownKey(event) {
       if (visibleOptions) {
         if (!overlayVisibleState && event.altKey) {
           show();
         } else {
           var nextOption = findNextOption(getSelectedOptionIndex());
-
           if (nextOption) {
             selectItem({
               originalEvent: event,
@@ -634,10 +602,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           }
         }
       }
-
       event.preventDefault();
     };
-
     var findNextOption = function findNextOption(index) {
       if (props.optionGroupLabel) {
         var groupIndex = index === -1 ? 0 : index.group;
@@ -648,26 +614,20 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           option: -1
         });else return null;
       }
-
       return findNextOptionInList(visibleOptions, index);
     };
-
     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 findPrevOption = function findPrevOption(index) {
       if (index === -1) {
         return null;
       }
-
       if (props.optionGroupLabel) {
         var groupIndex = index.group;
         var optionIndex = index.option;
@@ -677,39 +637,29 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
         });else return null;
       }
-
       return findPrevOptionInList(visibleOptions, index);
     };
-
     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 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,
@@ -717,72 +667,56 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           });
         }
       }
-
       searchTimeout.current = setTimeout(function () {
         searchValue.current = null;
       }, 250);
     };
-
     var searchOption = function searchOption(index) {
       if (searchValue.current) {
         return searchOptionInRange(index, visibleOptions.length) || searchOptionInRange(0, index);
       }
-
       return null;
     };
-
     var searchOptionInRange = function searchOptionInRange(start, end) {
       for (var i = start; i < end; i++) {
         var opt = visibleOptions[i];
-
         if (matchesSearchValue(opt)) {
           return opt;
         }
       }
-
       return null;
     };
-
     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];
           }
         }
       }
-
       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];
           }
         }
       }
-
       return null;
     };
-
     var matchesSearchValue = function matchesSearchValue(option) {
       var label = getOptionLabel(option);
-
       if (!label) {
         return false;
       }
-
       label = label.toLocaleLowerCase(props.filterLocale);
       return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
     };
-
     var onEditableInputChange = function onEditableInputChange(event) {
       if (props.onChange) {
         props.onChange({
@@ -798,28 +732,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       }
     };
-
     var onEditableInputFocus = function onEditableInputFocus(event) {
       setFocusedState(true);
       hide();
       props.onFocus && props.onFocus(event);
     };
-
     var onOptionClick = function onOptionClick(event) {
       var option = event.option;
-
       if (!option.disabled) {
         selectItem(event);
         utils.DomHandler.focus(focusInputRef.current);
       }
-
       hide();
     };
-
     var onFilterInputChange = function onFilterInputChange(event) {
       var filter = event.target.value;
       setFilterState(filter);
-
       if (props.onFilter) {
         props.onFilter({
           originalEvent: event,
@@ -827,11 +755,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       }
     };
-
     var onFilterClearIconClick = function onFilterClearIconClick(callback) {
       resetFilter(callback);
     };
-
     var resetFilter = function resetFilter(callback) {
       setFilterState('');
       props.onFilter && props.onFilter({
@@ -839,7 +765,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       });
       callback && callback();
     };
-
     var clear = function clear(event) {
       if (props.onChange) {
         props.onChange({
@@ -854,15 +779,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           }
         });
       }
-
       updateEditableLabel();
     };
-
     var selectItem = function selectItem(event) {
       if (selectedOption !== event.option) {
         updateEditableLabel(event.option);
         var optionValue = getOptionValue(event.option);
-
         if (props.onChange) {
           props.onChange({
             originalEvent: event.originalEvent,
@@ -878,15 +800,12 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }
       }
     };
-
     var getSelectedOptionIndex = function getSelectedOptionIndex(options) {
       options = options || visibleOptions;
-
       if (props.value != null && options) {
         if (props.optionGroupLabel) {
           for (var i = 0; i < options.length; i++) {
             var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(options[i]));
-
             if (selectedOptionIndex !== -1) {
               return {
                 group: i,
@@ -898,65 +817,51 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           return findOptionIndexInList(props.value, options);
         }
       }
-
       return -1;
     };
-
     var equalityKey = function equalityKey() {
       return props.optionValue ? null : props.dataKey;
     };
-
     var findOptionIndexInList = function findOptionIndexInList(value, list) {
       var key = equalityKey();
       return list.findIndex(function (item) {
         return utils.ObjectUtils.equals(value, getOptionValue(item), key);
       });
     };
-
     var isSelected = function isSelected(option) {
       return utils.ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
     };
-
     var show = function show() {
       setOverlayVisibleState(true);
     };
-
     var hide = function hide() {
       setOverlayVisibleState(false);
     };
-
     var onOverlayEnter = function onOverlayEnter(callback) {
       utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
       callback && callback();
     };
-
     var onOverlayEntered = function onOverlayEntered(callback) {
       callback && callback();
       bindOverlayListener();
       props.onShow && props.onShow();
     };
-
     var onOverlayExit = function onOverlayExit() {
       unbindOverlayListener();
     };
-
     var onOverlayExited = function onOverlayExited() {
       if (props.filter && props.resetFilterOnHide) {
         resetFilter();
       }
-
       utils.ZIndexUtils.clear(overlayRef.current);
       props.onHide && props.onHide();
     };
-
     var alignOverlay = function alignOverlay() {
       utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
     };
-
     var scrollInView = function scrollInView() {
       var highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
-
       if (highlightItem && highlightItem.scrollIntoView) {
         highlightItem.scrollIntoView({
           block: 'nearest',
@@ -964,45 +869,35 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         });
       }
     };
-
     var updateEditableLabel = function updateEditableLabel(option) {
       if (inputRef.current) {
         inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
       }
     };
-
     var getOptionLabel = function getOptionLabel(option) {
       return props.optionLabel ? utils.ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
     };
-
     var getOptionValue = function getOptionValue(option) {
       return props.optionValue ? utils.ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
     };
-
     var getOptionRenderKey = function getOptionRenderKey(option) {
       return props.dataKey ? utils.ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
     };
-
     var isOptionDisabled = function isOptionDisabled(option) {
       if (props.optionDisabled) {
         return utils.ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : utils.ObjectUtils.resolveFieldData(option, props.optionDisabled);
       }
-
       return option && option['disabled'] !== undefined ? option['disabled'] : false;
     };
-
     var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
     };
-
     var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
     };
-
     var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
     };
-
     var updateInputField = function updateInputField() {
       if (props.editable && inputRef.current) {
         var label = selectedOption ? getOptionLabel(selectedOption) : null;
@@ -1010,17 +905,18 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         inputRef.current.value = value;
       }
     };
-
     var getSelectedOption = function getSelectedOption() {
       var index = getSelectedOptionIndex(props.options);
       return index !== -1 ? props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index] : null;
     };
-
     React__namespace.useImperativeHandle(ref, function () {
       return {
         props: props,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return utils.DomHandler.focus(focusInputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -1037,7 +933,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     });
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
-    }, [inputRef, props.inputRef]);
+      utils.ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
+    }, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
     hooks.useMountEffect(function () {
       if (props.autoFocus) {
         utils.DomHandler.focus(focusInputRef.current, props.autoFocus);
@@ -1049,17 +946,15 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       }
     }, [overlayVisibleState, props.value]);
     hooks.useUpdateEffect(function () {
-      if (overlayVisibleState && props.filter) {
+      if (overlayVisibleState && filterState && props.filter) {
         alignOverlay();
       }
-    }, [overlayVisibleState, props.filter]);
+    }, [overlayVisibleState, filterState, props.filter]);
     hooks.useUpdateEffect(function () {
       if (filterState && (!props.options || props.options.length === 0)) {
         setFilterState('');
       }
-
       updateInputField();
-
       if (inputRef.current) {
         inputRef.current.selectedIndex = 1;
       }
@@ -1067,13 +962,11 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     hooks.useUnmountEffect(function () {
       utils.ZIndexUtils.clear(overlayRef.current);
     });
-
     var createHiddenSelect = function createHiddenSelect() {
       var option = {
         value: '',
         label: props.placeholder
       };
-
       if (selectedOption) {
         var optionValue = getOptionValue(selectedOption);
         option = {
@@ -1083,7 +976,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           label: getOptionLabel(selectedOption)
         };
       }
-
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-hidden-accessible p-dropdown-hidden-select"
       }, /*#__PURE__*/React__namespace.createElement("select", {
@@ -1097,7 +989,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         value: option.value
       }, option.label)));
     };
-
     var createKeyboardHelper = function createKeyboardHelper() {
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-hidden-accessible"
@@ -1114,10 +1005,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         tabIndex: props.tabIndex
       }, ariaProps)));
     };
-
     var createLabel = function createLabel() {
       var label = utils.ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
-
       if (props.editable) {
         var value = label || props.value || '';
         return /*#__PURE__*/React__namespace.createElement("input", _extends({
@@ -1138,7 +1027,6 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           'p-placeholder': label === null && props.placeholder,
           'p-dropdown-label-empty': label === null && !props.placeholder
         });
-
         var content = props.valueTemplate ? utils.ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
         return /*#__PURE__*/React__namespace.createElement("span", {
           ref: inputRef,
@@ -1146,20 +1034,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         }, content);
       }
     };
-
     var createClearIcon = function createClearIcon() {
       if (props.value != null && props.showClear && !props.disabled) {
-        return /*#__PURE__*/React__namespace.createElement("i", {
-          className: "p-dropdown-clear-icon pi pi-times",
-          onClick: clear
-        });
+        var iconClassName = utils.classNames('p-dropdown-clear-icon p-clickable');
+        var iconProps = {
+          className: iconClassName,
+          onPointerUp: clear
+        };
+        return utils.IconUtils.getJSXIcon(props.clearIcon, iconProps);
       }
-
       return null;
     };
-
     var createDropdownIcon = function createDropdownIcon() {
-      var iconClassName = utils.classNames('p-dropdown-trigger-icon p-clickable', props.dropdownIcon);
+      var iconClassName = utils.classNames('p-dropdown-trigger-icon p-clickable');
+      var icon = utils.IconUtils.getJSXIcon(props.dropdownIcon, {
+        className: iconClassName
+      });
       var ariaLabel = props.placeholder || props.ariaLabel;
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-dropdown-trigger",
@@ -1167,11 +1057,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         "aria-haspopup": "listbox",
         "aria-expanded": overlayVisibleState,
         "aria-label": ariaLabel
-      }, /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
-      }));
+      }, icon);
     };
-
     var visibleOptions = getVisibleOptions();
     var selectedOption = getSelectedOption();
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
@@ -1237,6 +1124,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     ariaLabelledBy: null,
     autoFocus: false,
     className: null,
+    clearIcon: 'pi pi-times',
     dataKey: null,
     disabled: false,
     dropdownIcon: 'pi pi-chevron-down',
@@ -1250,6 +1138,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     filterMatchMode: 'contains',
     filterPlaceholder: null,
     filterTemplate: null,
+    focusInputRef: null,
     id: null,
     inputId: null,
     inputRef: null,