primereact 8.7.2 → 9.0.0-beta.1

package/autocomplete/autocomplete.esm.js

@@ -15,14 +15,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);
@@ -30,11 +28,9 @@ function _extends() {
 
 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;
 }
 
@@ -68,33 +64,33 @@ 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 _nonIterableRest() {
@@ -105,7 +101,34 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : 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,
@@ -116,29 +139,29 @@ function _defineProperty(obj, key, value) {
   } else {
     obj[key] = value;
   }
-
   return obj;
 }
 
 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; }
 var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
-
   var createGroupChildren = function createGroupChildren(optionGroup, i, style) {
     var groupChildren = props.getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (item, j) {
       var key = i + '_' + j;
       var selected = props.selectedItem === item;
       var content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, j) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
+      var className = classNames('p-autocomplete-item', {
+        'p-disabled': item.disabled
+      });
       return /*#__PURE__*/React.createElement("li", {
         key: key,
         role: "option",
         "aria-selected": selected,
-        className: "p-autocomplete-item",
+        className: className,
         style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, item);
@@ -148,13 +171,11 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       }, content, /*#__PURE__*/React.createElement(Ripple, null));
     });
   };
-
   var createItem = function createItem(suggestion, index) {
     var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var style = {
       height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
     };
-
     if (props.optionGroupLabel) {
       var content = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, suggestion, index) : props.getOptionGroupLabel(suggestion);
       var childrenContent = createGroupChildren(suggestion, index, style);
@@ -167,12 +188,14 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       }, content), childrenContent);
     } else {
       var _content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
-
+      var className = classNames('p-autocomplete-item', {
+        'p-disabled': suggestion.disabled
+      });
       return /*#__PURE__*/React.createElement("li", {
         key: index,
         role: "option",
         "aria-selected": props.selectedItem === suggestion,
-        className: "p-autocomplete-item",
+        className: className,
         style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, suggestion);
@@ -180,11 +203,9 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       }, _content, /*#__PURE__*/React.createElement(Ripple, null));
     }
   };
-
   var createItems = function createItems() {
     return props.suggestions ? props.suggestions.map(createItem) : null;
   };
-
   var createContent = function createContent() {
     if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
       var emptyMessage = props.emptyMessage || localeOption('emptyMessage');
@@ -194,7 +215,6 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         className: "p-autocomplete-item"
       }, emptyMessage));
     }
-
     if (props.virtualScrollerOptions) {
       var virtualScrollerProps = _objectSpread(_objectSpread({}, props.virtualScrollerOptions), {
         style: _objectSpread(_objectSpread({}, props.virtualScrollerOptions.style), {
@@ -215,7 +235,6 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
           }, options.children);
         }
       });
-
       return /*#__PURE__*/React.createElement(VirtualScroller, _extends({
         ref: props.virtualScrollerRef
       }, virtualScrollerProps));
@@ -228,14 +247,14 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       }, items);
     }
   };
-
   var createElement = function createElement() {
-    var className = classNames('p-autocomplete-panel p-component', props.panelClassName);
-
+    var className = classNames('p-autocomplete-panel p-component', props.panelClassName, {
+      'p-input-filled': PrimeReact.inputStyle === 'filled',
+      'p-ripple-disabled': PrimeReact.ripple === false
+    });
     var style = _objectSpread({
       maxHeight: props.scrollHeight
     }, props.panelStyle || {});
-
     var content = createContent();
     return /*#__PURE__*/React.createElement(CSSTransition, {
       nodeRef: ref,
@@ -259,7 +278,6 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       onClick: props.onClick
     }, content));
   };
-
   var element = createElement();
   return /*#__PURE__*/React.createElement(Portal, {
     element: element,
@@ -270,25 +288,21 @@ AutoCompletePanel.displayName = 'AutoCompletePanel';
 
 var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.id),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      idState = _React$useState2[0],
-      setIdState = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      searchingState = _React$useState4[0],
-      setSearchingState = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    searchingState = _React$useState4[0],
+    setSearchingState = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focusedState = _React$useState6[0],
-      setFocusedState = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusedState = _React$useState6[0],
+    setFocusedState = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      overlayVisibleState = _React$useState8[0],
-      setOverlayVisibleState = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    overlayVisibleState = _React$useState8[0],
+    setOverlayVisibleState = _React$useState8[1];
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
   var inputRef = React.useRef(props.inputRef);
@@ -296,40 +310,33 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   var virtualScrollerRef = React.useRef(null);
   var timeout = React.useRef(null);
   var selectedItem = React.useRef(null);
-
   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' ? !isInputClicked(event) && hide() : hide();
-      }
-    },
-    when: overlayVisibleState
-  }),
-      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
-      bindOverlayListener = _useOverlayListener2[0],
-      unbindOverlayListener = _useOverlayListener2[1];
-
+        if (valid) {
+          type === 'outside' ? !isInputClicked(event) && hide() : hide();
+        }
+      },
+      when: overlayVisibleState
+    }),
+    _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
+    bindOverlayListener = _useOverlayListener2[0],
+    unbindOverlayListener = _useOverlayListener2[1];
   var isInputClicked = function isInputClicked(event) {
     return props.multiple ? event.target === multiContainerRef.current || multiContainerRef.current.contains(event.target) : event.target === inputRef.current;
   };
-
   var onInputChange = function onInputChange(event) {
     //Cancel the search request if user types within the timeout
     if (timeout.current) {
       clearTimeout(timeout.current);
     }
-
     var query = event.target.value;
-
     if (!props.multiple) {
       updateModel(event, query);
     }
-
     if (ObjectUtils.isEmpty(query)) {
       hide();
       props.onClear && props.onClear(event);
@@ -343,18 +350,16 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       }
     }
   };
-
   var search = function search(event, query, source) {
     //allow empty string but not undefined or null
     if (query === undefined || query === null) {
       return;
-    } //do not search blank values on input change
-
+    }
 
+    //do not search blank values on input change
     if (source === 'input' && query.trim().length === 0) {
       return;
     }
-
     if (props.completeMethod) {
       setSearchingState(true);
       props.completeMethod({
@@ -363,11 +368,9 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       });
     }
   };
-
   var selectItem = function selectItem(event, option, preventInputFocus) {
     if (props.multiple) {
       inputRef.current.value = '';
-
       if (!isSelected(option)) {
         // allows empty value/selectionlimit and within sectionlimit
         if (!props.value || !props.selectionLimit || props.value.length < props.selectionLimit) {
@@ -379,26 +382,22 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       updateInputField(option);
       updateModel(event, option);
     }
-
     if (props.onSelect) {
       props.onSelect({
         originalEvent: event,
         value: option
       });
     }
-
     if (!preventInputFocus) {
       DomHandler.focus(inputRef.current);
       hide();
     }
   };
-
   var updateModel = function updateModel(event, value) {
     // #2176 only call change if value actually changed
-    if (selectedItem && selectedItem.current === value) {
+    if (selectedItem && ObjectUtils.deepEquals(selectedItem.current, value)) {
       return;
     }
-
     if (props.onChange) {
       props.onChange({
         originalEvent: event,
@@ -412,10 +411,8 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         }
       });
     }
-
     selectedItem.current = value;
   };
-
   var formatValue = function formatValue(value) {
     if (value) {
       if (typeof value === 'string') {
@@ -425,74 +422,59 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         return resolvedFieldData ? resolvedFieldData : value;
       } else if (props.field) {
         var _resolvedFieldData = ObjectUtils.resolveFieldData(value, props.field);
-
         return _resolvedFieldData !== null && _resolvedFieldData !== undefined ? _resolvedFieldData : value;
       } else {
         return value;
       }
     }
-
     return '';
   };
-
   var updateInputField = function updateInputField(value) {
     inputRef.current.value = formatValue(value);
   };
-
   var show = function show() {
     setOverlayVisibleState(true);
   };
-
   var hide = function hide() {
     setOverlayVisibleState(false);
     setSearchingState(false);
   };
-
   var onOverlayEnter = function onOverlayEnter() {
     ZIndexUtils.set('overlay', overlayRef.current, PrimeReact.autoZIndex, PrimeReact.zIndex['overlay']);
     alignOverlay();
   };
-
   var onOverlayEntering = function onOverlayEntering() {
     if (props.autoHighlight && props.suggestions && props.suggestions.length) {
       var element = getScrollableElement().firstChild.firstChild;
       DomHandler.addClass(element, 'p-highlight');
     }
   };
-
   var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
     props.onShow && props.onShow();
   };
-
   var onOverlayExit = function onOverlayExit() {
     unbindOverlayListener();
   };
-
   var onOverlayExited = function onOverlayExited() {
     ZIndexUtils.clear(overlayRef.current);
     props.onHide && props.onHide();
   };
-
   var alignOverlay = function alignOverlay() {
     var target = props.multiple ? multiContainerRef.current : inputRef.current;
     DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || PrimeReact.appendTo);
   };
-
   var onPanelClick = function onPanelClick(event) {
     OverlayService.emit('overlay-click', {
       originalEvent: event,
       target: elementRef.current
     });
   };
-
   var onDropdownClick = function onDropdownClick(event) {
     if (props.dropdownAutoFocus) {
       DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
     }
-
     if (props.dropdownMode === 'blank') search(event, '', 'dropdown');else if (props.dropdownMode === 'current') search(event, inputRef.current.value, 'dropdown');
-
     if (props.onDropdownClick) {
       props.onDropdownClick({
         originalEvent: event,
@@ -500,14 +482,12 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       });
     }
   };
-
   var removeItem = function removeItem(event, index) {
     var removedValue = props.value[index];
     var newValue = props.value.filter(function (_, i) {
       return index !== i;
     });
     updateModel(event, newValue);
-
     if (props.onUnselect) {
       props.onUnselect({
         originalEvent: event,
@@ -515,17 +495,14 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       });
     }
   };
-
   var onInputKeyDown = function onInputKeyDown(event) {
     if (overlayVisibleState) {
       var highlightItem = DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
-
       switch (event.which) {
         //down
         case 40:
           if (highlightItem) {
             var nextElement = findNextItem(highlightItem);
-
             if (nextElement) {
               DomHandler.addClass(nextElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
@@ -533,61 +510,53 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
             }
           } else {
             highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
-
             if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
               highlightItem = findNextItem(highlightItem);
             }
-
             if (highlightItem) {
               DomHandler.addClass(highlightItem, 'p-highlight');
             }
           }
-
           event.preventDefault();
           break;
-        //up
 
+        //up
         case 38:
           if (highlightItem) {
             var previousElement = findPrevItem(highlightItem);
-
             if (previousElement) {
               DomHandler.addClass(previousElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
               DomHandler.scrollInView(getScrollableElement(), previousElement);
             }
           }
-
           event.preventDefault();
           break;
-        //enter
 
+        //enter
         case 13:
           if (highlightItem) {
             selectHighlightItem(event, highlightItem);
             hide();
             event.preventDefault();
           }
-
           break;
-        //escape
 
+        //escape
         case 27:
           hide();
           event.preventDefault();
           break;
-        //tab
 
+        //tab
         case 9:
           if (highlightItem) {
             selectHighlightItem(event, highlightItem);
           }
-
           hide();
           break;
       }
     }
-
     if (props.multiple) {
       switch (event.which) {
         //backspace
@@ -596,7 +565,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
             var removedValue = props.value[props.value.length - 1];
             var newValue = props.value.slice(0, -1);
             updateModel(event, newValue);
-
             if (props.onUnselect) {
               props.onUnselect({
                 originalEvent: event,
@@ -604,12 +572,10 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
               });
             }
           }
-
           break;
       }
     }
   };
-
   var selectHighlightItem = function selectHighlightItem(event, item) {
     if (props.optionGroupLabel) {
       var optionGroup = props.suggestions[item.dataset.group];
@@ -618,29 +584,24 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       selectItem(event, props.suggestions[DomHandler.index(item)]);
     }
   };
-
   var findNextItem = function findNextItem(item) {
     var nextItem = item.nextElementSibling;
     return nextItem ? DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? findNextItem(nextItem) : nextItem : null;
   };
-
   var findPrevItem = function findPrevItem(item) {
     var prevItem = item.previousElementSibling;
     return prevItem ? DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? findPrevItem(prevItem) : prevItem : null;
   };
-
   var onInputFocus = function onInputFocus(event) {
     setFocusedState(true);
     props.onFocus && props.onFocus(event);
   };
-
   var forceItemSelection = function forceItemSelection(event) {
     var inputValue = event.target.value.trim();
     var item = (props.suggestions || []).find(function (it) {
       var value = props.field ? ObjectUtils.resolveFieldData(it, props.field) : it;
       return value && inputValue === value.trim();
     });
-
     if (item) {
       selectItem(event, item, true);
     } else {
@@ -649,50 +610,39 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       props.onClear && props.onClear(event);
     }
   };
-
   var onInputBlur = function onInputBlur(event) {
     setFocusedState(false);
-
     if (props.forceSelection) {
       forceItemSelection(event);
     }
-
     props.onBlur && props.onBlur(event);
   };
-
   var onMultiContainerClick = function onMultiContainerClick(event) {
     DomHandler.focus(inputRef.current);
     props.onClick && props.onClick(event);
   };
-
   var onMultiInputFocus = function onMultiInputFocus(event) {
     onInputFocus(event);
     DomHandler.addClass(multiContainerRef.current, 'p-focus');
   };
-
   var onMultiInputBlur = function onMultiInputBlur(event) {
     onInputBlur(event);
     DomHandler.removeClass(multiContainerRef.current, 'p-focus');
   };
-
   var isSelected = function isSelected(val) {
     return props.value ? props.value.some(function (v) {
       return ObjectUtils.equals(v, val);
     }) : false;
   };
-
   var getScrollableElement = function getScrollableElement() {
     return virtualScrollerRef.current ? overlayRef.current.firstChild : overlayRef.current;
   };
-
   var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
     return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
   };
-
   var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
   };
-
   React.useEffect(function () {
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
@@ -700,7 +650,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     if (!idState) {
       setIdState(UniqueComponentId());
     }
-
     if (props.autoFocus) {
       DomHandler.focus(inputRef.current, props.autoFocus);
     }
@@ -715,12 +664,14 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     if (inputRef.current && !props.multiple) {
       updateInputField(props.value);
     }
+    if (overlayVisibleState) {
+      alignOverlay();
+    }
   });
   useUnmountEffect(function () {
     if (timeout.current) {
       clearTimeout(timeout.current);
     }
-
     ZIndexUtils.clear(overlayRef.current);
   });
   React.useImperativeHandle(ref, function () {
@@ -729,6 +680,9 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       search: search,
       show: show,
       hide: hide,
+      focus: function focus() {
+        return DomHandler.focus(inputRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       },
@@ -743,7 +697,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       }
     };
   });
-
   var createSimpleAutoComplete = function createSimpleAutoComplete() {
     var value = formatValue(props.value);
     var ariaControls = overlayVisibleState ? idState + '_list' : null;
@@ -782,7 +735,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       onDoubleClick: props.onDblClick
     }, ariaProps));
   };
-
   var createChips = function createChips() {
     if (ObjectUtils.isNotEmpty(props.value)) {
       return props.value.map(function (val, index) {
@@ -802,10 +754,8 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         }));
       });
     }
-
     return null;
   };
-
   var createMultiInput = function createMultiInput() {
     var ariaControls = overlayVisibleState ? idState + '_list' : null;
     return /*#__PURE__*/React.createElement("li", {
@@ -836,7 +786,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       onBlur: onMultiInputBlur
     }, ariaProps)));
   };
-
   var createMultipleAutoComplete = function createMultipleAutoComplete() {
     var className = classNames('p-autocomplete-multiple-container p-component p-inputtext', {
       'p-disabled': props.disabled
@@ -852,7 +801,6 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       onDoubleClick: props.onDblClick
     }, tokens, input);
   };
-
   var createDropdown = function createDropdown() {
     if (props.dropdown) {
       var ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
@@ -865,24 +813,19 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
         "aria-label": ariaLabel
       });
     }
-
     return null;
   };
-
   var createLoader = function createLoader() {
     if (searchingState) {
       return /*#__PURE__*/React.createElement("i", {
         className: "p-autocomplete-loader pi pi-spinner pi-spin"
       });
     }
-
     return null;
   };
-
   var createInput = function createInput() {
     return props.multiple ? createMultipleAutoComplete() : createSimpleAutoComplete();
   };
-
   var listId = idState + '_list';
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps);