primereact 8.7.2 → 9.0.0-beta.1

package/dropdown/dropdown.esm.js

@@ -3,7 +3,7 @@ import PrimeReact, { localeOption, FilterService } from 'primereact/api';
 import { useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { OverlayService } from 'primereact/overlayservice';
 import { Tooltip } from 'primereact/tooltip';
-import { classNames, ObjectUtils, DomHandler, ZIndexUtils } from 'primereact/utils';
+import { classNames, ObjectUtils, DomHandler, ZIndexUtils, IconUtils } from 'primereact/utils';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 import { VirtualScroller } from 'primereact/virtualscroller';
@@ -13,14 +13,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -36,7 +34,24 @@ function _typeof(obj) {
   }, _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,
@@ -47,7 +62,6 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 
@@ -56,42 +70,40 @@ function _arrayWithHoles(arr) {
 }
 
 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;
 }
 
@@ -121,7 +133,6 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
       });
     }
   };
-
   var className = classNames('p-dropdown-item', {
     'p-highlight': props.selected,
     'p-disabled': props.disabled,
@@ -141,7 +152,6 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
 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.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
@@ -155,12 +165,10 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       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);
@@ -169,7 +177,6 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       }
     });
   };
-
   var onEntered = function onEntered() {
     props.onEntered(function () {
       if (props.filter && props.filterInputAutoFocus) {
@@ -177,12 +184,10 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       }
     });
   };
-
   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) {
@@ -201,20 +206,17 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       });
     });
   };
-
   var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
     var message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
     return /*#__PURE__*/React.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 ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
       var groupChildrenContent = createGroupChildren(option, style);
@@ -241,17 +243,14 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       });
     }
   };
-
   var createItems = function createItems() {
     if (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 = localeOption('clear');
@@ -265,10 +264,8 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         }
       });
     }
-
     return null;
   };
-
   var createFilter = function createFilter() {
     if (props.filter) {
       var clearIcon = createFilterClearIcon();
@@ -289,7 +286,6 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       }), clearIcon, /*#__PURE__*/React.createElement("i", {
         className: "p-dropdown-filter-icon pi pi-search"
       }));
-
       if (props.filterTemplate) {
         var defaultContentOptions = {
           className: containerClassName,
@@ -303,15 +299,12 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         };
         content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
       }
-
       return /*#__PURE__*/React.createElement("div", {
         className: "p-dropdown-header"
       }, content);
     }
-
     return null;
   };
-
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
       var virtualScrollerProps = _objectSpread$1(_objectSpread$1({}, props.virtualScrollerOptions), {
@@ -339,7 +332,6 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
           }, content);
         }
       });
-
       return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
         ref: virtualScrollerRef
       }, virtualScrollerProps));
@@ -356,9 +348,11 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       }, items));
     }
   };
-
   var createElement = function createElement() {
-    var className = classNames('p-dropdown-panel p-component', props.panelClassName);
+    var className = classNames('p-dropdown-panel p-component', props.panelClassName, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var filter = createFilter();
     var content = createContent();
     return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -383,7 +377,6 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
       onClick: props.onClick
     }, filter, content));
   };
-
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
     element: element,
@@ -393,74 +386,60 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 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.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.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.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.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.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
-  var focusInputRef = React.useRef(null);
+  var focusInputRef = React.useRef(props.focusInputRef);
   var searchTimeout = React.useRef(null);
   var searchValue = React.useRef(null);
   var currentSearchChar = React.useRef(null);
   var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
   var hasFilter = ObjectUtils.isNotEmpty(filterState);
   var appendTo = props.appendTo || PrimeReact.appendTo;
-
   var _useOverlayListener = 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 = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
-
             if (filteredSubOptions && filteredSubOptions.length) {
               filteredGroups.push(_objectSpread(_objectSpread({}, optgroup), {
                 items: filteredSubOptions
@@ -472,7 +451,6 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         } finally {
           _iterator.f();
         }
-
         return filteredGroups;
       } else {
         return FilterService.filter(props.options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
@@ -481,16 +459,19 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return props.options;
     }
   };
-
   var isClearClicked = function isClearClicked(event) {
     return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || 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 (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
       return;
     } else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
@@ -498,19 +479,15 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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;
@@ -528,58 +505,54 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }, 200);
     }
   };
-
   var onPanelClick = function onPanelClick(event) {
     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();
@@ -587,11 +560,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         break;
     }
   };
-
   var onUpKey = function onUpKey(event) {
     if (visibleOptions) {
       var prevOption = findPrevOption(getSelectedOptionIndex());
-
       if (prevOption) {
         selectItem({
           originalEvent: event,
@@ -599,17 +570,14 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         });
       }
     }
-
     event.preventDefault();
   };
-
   var onDownKey = function onDownKey(event) {
     if (visibleOptions) {
       if (!overlayVisibleState && event.altKey) {
         show();
       } else {
         var nextOption = findNextOption(getSelectedOptionIndex());
-
         if (nextOption) {
           selectItem({
             originalEvent: event,
@@ -618,10 +586,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       }
     }
-
     event.preventDefault();
   };
-
   var findNextOption = function findNextOption(index) {
     if (props.optionGroupLabel) {
       var groupIndex = index === -1 ? 0 : index.group;
@@ -632,26 +598,20 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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;
@@ -661,39 +621,29 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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,
@@ -701,72 +651,56 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         });
       }
     }
-
     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({
@@ -782,28 +716,22 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
     }
   };
-
   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);
       DomHandler.focus(focusInputRef.current);
     }
-
     hide();
   };
-
   var onFilterInputChange = function onFilterInputChange(event) {
     var filter = event.target.value;
     setFilterState(filter);
-
     if (props.onFilter) {
       props.onFilter({
         originalEvent: event,
@@ -811,11 +739,9 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
     }
   };
-
   var onFilterClearIconClick = function onFilterClearIconClick(callback) {
     resetFilter(callback);
   };
-
   var resetFilter = function resetFilter(callback) {
     setFilterState('');
     props.onFilter && props.onFilter({
@@ -823,7 +749,6 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     });
     callback && callback();
   };
-
   var clear = function clear(event) {
     if (props.onChange) {
       props.onChange({
@@ -838,15 +763,12 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       });
     }
-
     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,
@@ -862,15 +784,12 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
     }
   };
-
   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,
@@ -882,65 +801,51 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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 ObjectUtils.equals(value, getOptionValue(item), key);
     });
   };
-
   var isSelected = function isSelected(option) {
     return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
   };
-
   var show = function show() {
     setOverlayVisibleState(true);
   };
-
   var hide = function hide() {
     setOverlayVisibleState(false);
   };
-
   var onOverlayEnter = function onOverlayEnter(callback) {
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.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();
     }
-
     ZIndexUtils.clear(overlayRef.current);
     props.onHide && props.onHide();
   };
-
   var alignOverlay = function alignOverlay() {
     DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
   };
-
   var scrollInView = function scrollInView() {
     var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
-
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
@@ -948,45 +853,35 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
     }
   };
-
   var updateEditableLabel = function updateEditableLabel(option) {
     if (inputRef.current) {
       inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
     }
   };
-
   var getOptionLabel = function getOptionLabel(option) {
     return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
   };
-
   var getOptionValue = function getOptionValue(option) {
     return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
   };
-
   var getOptionRenderKey = function getOptionRenderKey(option) {
     return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
   };
-
   var isOptionDisabled = function isOptionDisabled(option) {
     if (props.optionDisabled) {
       return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
     }
-
     return option && option['disabled'] !== undefined ? option['disabled'] : false;
   };
-
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
-
   var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
-
   var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
   };
-
   var updateInputField = function updateInputField() {
     if (props.editable && inputRef.current) {
       var label = selectedOption ? getOptionLabel(selectedOption) : null;
@@ -994,17 +889,18 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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.useImperativeHandle(ref, function () {
     return {
       props: props,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(focusInputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -1021,7 +917,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   });
   React.useEffect(function () {
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
+    ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
+  }, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
   useMountEffect(function () {
     if (props.autoFocus) {
       DomHandler.focus(focusInputRef.current, props.autoFocus);
@@ -1033,17 +930,15 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   }, [overlayVisibleState, props.value]);
   useUpdateEffect(function () {
-    if (overlayVisibleState && props.filter) {
+    if (overlayVisibleState && filterState && props.filter) {
       alignOverlay();
     }
-  }, [overlayVisibleState, props.filter]);
+  }, [overlayVisibleState, filterState, props.filter]);
   useUpdateEffect(function () {
     if (filterState && (!props.options || props.options.length === 0)) {
       setFilterState('');
     }
-
     updateInputField();
-
     if (inputRef.current) {
       inputRef.current.selectedIndex = 1;
     }
@@ -1051,13 +946,11 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   useUnmountEffect(function () {
     ZIndexUtils.clear(overlayRef.current);
   });
-
   var createHiddenSelect = function createHiddenSelect() {
     var option = {
       value: '',
       label: props.placeholder
     };
-
     if (selectedOption) {
       var optionValue = getOptionValue(selectedOption);
       option = {
@@ -1067,7 +960,6 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         label: getOptionLabel(selectedOption)
       };
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: "p-hidden-accessible p-dropdown-hidden-select"
     }, /*#__PURE__*/React.createElement("select", {
@@ -1081,7 +973,6 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       value: option.value
     }, option.label)));
   };
-
   var createKeyboardHelper = function createKeyboardHelper() {
     return /*#__PURE__*/React.createElement("div", {
       className: "p-hidden-accessible"
@@ -1098,10 +989,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       tabIndex: props.tabIndex
     }, ariaProps)));
   };
-
   var createLabel = function createLabel() {
     var label = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
-
     if (props.editable) {
       var value = label || props.value || '';
       return /*#__PURE__*/React.createElement("input", _extends({
@@ -1122,7 +1011,6 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         'p-placeholder': label === null && props.placeholder,
         'p-dropdown-label-empty': label === null && !props.placeholder
       });
-
       var content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
       return /*#__PURE__*/React.createElement("span", {
         ref: inputRef,
@@ -1130,20 +1018,22 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }, content);
     }
   };
-
   var createClearIcon = function createClearIcon() {
     if (props.value != null && props.showClear && !props.disabled) {
-      return /*#__PURE__*/React.createElement("i", {
-        className: "p-dropdown-clear-icon pi pi-times",
-        onClick: clear
-      });
+      var iconClassName = classNames('p-dropdown-clear-icon p-clickable');
+      var iconProps = {
+        className: iconClassName,
+        onPointerUp: clear
+      };
+      return IconUtils.getJSXIcon(props.clearIcon, iconProps);
     }
-
     return null;
   };
-
   var createDropdownIcon = function createDropdownIcon() {
-    var iconClassName = classNames('p-dropdown-trigger-icon p-clickable', props.dropdownIcon);
+    var iconClassName = classNames('p-dropdown-trigger-icon p-clickable');
+    var icon = IconUtils.getJSXIcon(props.dropdownIcon, {
+      className: iconClassName
+    });
     var ariaLabel = props.placeholder || props.ariaLabel;
     return /*#__PURE__*/React.createElement("div", {
       className: "p-dropdown-trigger",
@@ -1151,11 +1041,8 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       "aria-haspopup": "listbox",
       "aria-expanded": overlayVisibleState,
       "aria-label": ariaLabel
-    }, /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
-    }));
+    }, icon);
   };
-
   var visibleOptions = getVisibleOptions();
   var selectedOption = getSelectedOption();
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
@@ -1221,6 +1108,7 @@ Dropdown.defaultProps = {
   ariaLabelledBy: null,
   autoFocus: false,
   className: null,
+  clearIcon: 'pi pi-times',
   dataKey: null,
   disabled: false,
   dropdownIcon: 'pi pi-chevron-down',
@@ -1234,6 +1122,7 @@ Dropdown.defaultProps = {
   filterMatchMode: 'contains',
   filterPlaceholder: null,
   filterTemplate: null,
+  focusInputRef: null,
   id: null,
   inputId: null,
   inputRef: null,