primereact 8.7.2 → 9.0.0-beta.1

package/autocomplete/autocomplete.js

@@ -29,14 +29,12 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
     _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);
@@ -44,11 +42,9 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
 
   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;
   }
 
@@ -82,33 +78,33 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
   }
 
   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() {
@@ -119,7 +115,34 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
     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,
@@ -130,29 +153,29 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
     } 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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
       return utils.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 ? utils.ObjectUtils.getJSXElement(props.itemTemplate, item, j) : props.field ? utils.ObjectUtils.resolveFieldData(item, props.field) : item;
+        var className = utils.classNames('p-autocomplete-item', {
+          'p-disabled': item.disabled
+        });
         return /*#__PURE__*/React__namespace.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);
@@ -162,13 +185,11 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }, content, /*#__PURE__*/React__namespace.createElement(ripple.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 ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, suggestion, index) : props.getOptionGroupLabel(suggestion);
         var childrenContent = createGroupChildren(suggestion, index, style);
@@ -181,12 +202,14 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }, content), childrenContent);
       } else {
         var _content = props.itemTemplate ? utils.ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? utils.ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
-
+        var className = utils.classNames('p-autocomplete-item', {
+          'p-disabled': suggestion.disabled
+        });
         return /*#__PURE__*/React__namespace.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);
@@ -194,11 +217,9 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }, _content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
     };
-
     var createItems = function createItems() {
       return props.suggestions ? props.suggestions.map(createItem) : null;
     };
-
     var createContent = function createContent() {
       if (props.showEmptyMessage && utils.ObjectUtils.isEmpty(props.suggestions)) {
         var emptyMessage = props.emptyMessage || PrimeReact.localeOption('emptyMessage');
@@ -208,7 +229,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
           className: "p-autocomplete-item"
         }, emptyMessage));
       }
-
       if (props.virtualScrollerOptions) {
         var virtualScrollerProps = _objectSpread(_objectSpread({}, props.virtualScrollerOptions), {
           style: _objectSpread(_objectSpread({}, props.virtualScrollerOptions.style), {
@@ -229,7 +249,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
             }, options.children);
           }
         });
-
         return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
           ref: props.virtualScrollerRef
         }, virtualScrollerProps));
@@ -242,14 +261,14 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }, items);
       }
     };
-
     var createElement = function createElement() {
-      var className = utils.classNames('p-autocomplete-panel p-component', props.panelClassName);
-
+      var className = utils.classNames('p-autocomplete-panel p-component', props.panelClassName, {
+        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+      });
       var style = _objectSpread({
         maxHeight: props.scrollHeight
       }, props.panelStyle || {});
-
       var content = createContent();
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
@@ -273,7 +292,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         onClick: props.onClick
       }, content));
     };
-
     var element = createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
       element: element,
@@ -284,25 +302,21 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
 
   var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
@@ -310,40 +324,33 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
     var virtualScrollerRef = React__namespace.useRef(null);
     var timeout = React__namespace.useRef(null);
     var selectedItem = React__namespace.useRef(null);
-
     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' ? !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 (utils.ObjectUtils.isEmpty(query)) {
         hide();
         props.onClear && props.onClear(event);
@@ -357,18 +364,16 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }
       }
     };
-
     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({
@@ -377,11 +382,9 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         });
       }
     };
-
     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) {
@@ -393,26 +396,22 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         updateInputField(option);
         updateModel(event, option);
       }
-
       if (props.onSelect) {
         props.onSelect({
           originalEvent: event,
           value: option
         });
       }
-
       if (!preventInputFocus) {
         utils.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 && utils.ObjectUtils.deepEquals(selectedItem.current, value)) {
         return;
       }
-
       if (props.onChange) {
         props.onChange({
           originalEvent: event,
@@ -426,10 +425,8 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
           }
         });
       }
-
       selectedItem.current = value;
     };
-
     var formatValue = function formatValue(value) {
       if (value) {
         if (typeof value === 'string') {
@@ -439,74 +436,59 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
           return resolvedFieldData ? resolvedFieldData : value;
         } else if (props.field) {
           var _resolvedFieldData = utils.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() {
       utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
     };
-
     var onOverlayEntering = function onOverlayEntering() {
       if (props.autoHighlight && props.suggestions && props.suggestions.length) {
         var element = getScrollableElement().firstChild.firstChild;
         utils.DomHandler.addClass(element, 'p-highlight');
       }
     };
-
     var onOverlayEntered = function onOverlayEntered() {
       bindOverlayListener();
       props.onShow && props.onShow();
     };
-
     var onOverlayExit = function onOverlayExit() {
       unbindOverlayListener();
     };
-
     var onOverlayExited = function onOverlayExited() {
       utils.ZIndexUtils.clear(overlayRef.current);
       props.onHide && props.onHide();
     };
-
     var alignOverlay = function alignOverlay() {
       var target = props.multiple ? multiContainerRef.current : inputRef.current;
       utils.DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || PrimeReact__default["default"].appendTo);
     };
-
     var onPanelClick = function onPanelClick(event) {
       overlayservice.OverlayService.emit('overlay-click', {
         originalEvent: event,
         target: elementRef.current
       });
     };
-
     var onDropdownClick = function onDropdownClick(event) {
       if (props.dropdownAutoFocus) {
         utils.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,
@@ -514,14 +496,12 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         });
       }
     };
-
     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,
@@ -529,17 +509,14 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         });
       }
     };
-
     var onInputKeyDown = function onInputKeyDown(event) {
       if (overlayVisibleState) {
         var highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
-
         switch (event.which) {
           //down
           case 40:
             if (highlightItem) {
               var nextElement = findNextItem(highlightItem);
-
               if (nextElement) {
                 utils.DomHandler.addClass(nextElement, 'p-highlight');
                 utils.DomHandler.removeClass(highlightItem, 'p-highlight');
@@ -547,61 +524,53 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
               }
             } else {
               highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li');
-
               if (utils.DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
                 highlightItem = findNextItem(highlightItem);
               }
-
               if (highlightItem) {
                 utils.DomHandler.addClass(highlightItem, 'p-highlight');
               }
             }
-
             event.preventDefault();
             break;
-          //up
 
+          //up
           case 38:
             if (highlightItem) {
               var previousElement = findPrevItem(highlightItem);
-
               if (previousElement) {
                 utils.DomHandler.addClass(previousElement, 'p-highlight');
                 utils.DomHandler.removeClass(highlightItem, 'p-highlight');
                 utils.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
@@ -610,7 +579,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
               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,
@@ -618,12 +586,10 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
                 });
               }
             }
-
             break;
         }
       }
     };
-
     var selectHighlightItem = function selectHighlightItem(event, item) {
       if (props.optionGroupLabel) {
         var optionGroup = props.suggestions[item.dataset.group];
@@ -632,29 +598,24 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         selectItem(event, props.suggestions[utils.DomHandler.index(item)]);
       }
     };
-
     var findNextItem = function findNextItem(item) {
       var nextItem = item.nextElementSibling;
       return nextItem ? utils.DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? findNextItem(nextItem) : nextItem : null;
     };
-
     var findPrevItem = function findPrevItem(item) {
       var prevItem = item.previousElementSibling;
       return prevItem ? utils.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 ? utils.ObjectUtils.resolveFieldData(it, props.field) : it;
         return value && inputValue === value.trim();
       });
-
       if (item) {
         selectItem(event, item, true);
       } else {
@@ -663,50 +624,39 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         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) {
       utils.DomHandler.focus(inputRef.current);
       props.onClick && props.onClick(event);
     };
-
     var onMultiInputFocus = function onMultiInputFocus(event) {
       onInputFocus(event);
       utils.DomHandler.addClass(multiContainerRef.current, 'p-focus');
     };
-
     var onMultiInputBlur = function onMultiInputBlur(event) {
       onInputBlur(event);
       utils.DomHandler.removeClass(multiContainerRef.current, 'p-focus');
     };
-
     var isSelected = function isSelected(val) {
       return props.value ? props.value.some(function (v) {
         return utils.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 ? utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
     };
-
     var getOptionGroupChildren = function getOptionGroupChildren(optionGroup) {
       return utils.ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
     };
-
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
@@ -714,7 +664,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
       if (!idState) {
         setIdState(utils.UniqueComponentId());
       }
-
       if (props.autoFocus) {
         utils.DomHandler.focus(inputRef.current, props.autoFocus);
       }
@@ -729,12 +678,14 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
       if (inputRef.current && !props.multiple) {
         updateInputField(props.value);
       }
+      if (overlayVisibleState) {
+        alignOverlay();
+      }
     });
     hooks.useUnmountEffect(function () {
       if (timeout.current) {
         clearTimeout(timeout.current);
       }
-
       utils.ZIndexUtils.clear(overlayRef.current);
     });
     React__namespace.useImperativeHandle(ref, function () {
@@ -743,6 +694,9 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         search: search,
         show: show,
         hide: hide,
+        focus: function focus() {
+          return utils.DomHandler.focus(inputRef.current);
+        },
         getElement: function getElement() {
           return elementRef.current;
         },
@@ -757,7 +711,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         }
       };
     });
-
     var createSimpleAutoComplete = function createSimpleAutoComplete() {
       var value = formatValue(props.value);
       var ariaControls = overlayVisibleState ? idState + '_list' : null;
@@ -796,7 +749,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         onDoubleClick: props.onDblClick
       }, ariaProps));
     };
-
     var createChips = function createChips() {
       if (utils.ObjectUtils.isNotEmpty(props.value)) {
         return props.value.map(function (val, index) {
@@ -816,10 +768,8 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
           }));
         });
       }
-
       return null;
     };
-
     var createMultiInput = function createMultiInput() {
       var ariaControls = overlayVisibleState ? idState + '_list' : null;
       return /*#__PURE__*/React__namespace.createElement("li", {
@@ -850,7 +800,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         onBlur: onMultiInputBlur
       }, ariaProps)));
     };
-
     var createMultipleAutoComplete = function createMultipleAutoComplete() {
       var className = utils.classNames('p-autocomplete-multiple-container p-component p-inputtext', {
         'p-disabled': props.disabled
@@ -866,7 +815,6 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
         onDoubleClick: props.onDblClick
       }, tokens, input);
     };
-
     var createDropdown = function createDropdown() {
       if (props.dropdown) {
         var ariaLabel = props.dropdownAriaLabel || props.placeholder || PrimeReact.localeOption('choose');
@@ -879,24 +827,19 @@ this.primereact.autocomplete = (function (exports, React, PrimeReact, button, ho
           "aria-label": ariaLabel
         });
       }
-
       return null;
     };
-
     var createLoader = function createLoader() {
       if (searchingState) {
         return /*#__PURE__*/React__namespace.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 = utils.ObjectUtils.isNotEmpty(props.tooltip);
     var otherProps = utils.ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps);