diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index c304d21f5..0b32c2ee4 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -182,9 +182,9 @@ export interface AutoCompletePassThroughOptions {
*/
dropdownIcon?: AutoCompletePassThroughOptionType;
/**
- * Used to pass attributes to the panel's DOM element.
+ * Used to pass attributes to the overlay's DOM element.
*/
- panel?: AutoCompletePassThroughOptionType;
+ overlay?: AutoCompletePassThroughOptionType;
/**
* Used to pass attributes to the VirtualScroller component.
* @see {@link VirtualScrollerPassThroughOptionType}
@@ -327,7 +327,7 @@ export interface AutoCompleteProps {
*/
optionGroupChildren?: string | ((data: any) => any[]) | undefined;
/**
- * Maximum height of the suggestions panel.
+ * Maximum height of the suggestions overlay.
* @defaultValue 14rem
*/
scrollHeight?: string | undefined;
@@ -419,13 +419,21 @@ export interface AutoCompleteProps {
*/
inputClass?: string | object | undefined;
/**
- * Inline style of the overlay panel.
+ * Inline style of the overlay.
*/
panelStyle?: object | undefined;
/**
- * Style class of the overlay panel.
+ * Style class of the overlay.
*/
panelClass?: string | object | undefined;
+ /**
+ * Inline style of the overlay overlay.
+ */
+ overlayStyle?: object | undefined;
+ /**
+ * Style class of the overlay overlay.
+ */
+ overlayClass?: string | object | undefined;
/**
* Icon to display in the dropdown.
* @deprecated since v3.27.0. Use 'dropdownicon' slot.
@@ -459,7 +467,7 @@ export interface AutoCompleteProps {
*/
virtualScrollerOptions?: VirtualScrollerProps;
/**
- * Whether to focus on the first visible or selected element when the overlay panel is shown.
+ * Whether to focus on the first visible or selected element when the overlay is shown.
* @defaultValue false
*/
autoOptionFocus?: boolean | undefined;
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 8dcde72d0..3f49859d6 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -124,11 +124,11 @@
v-if="overlayVisible"
:ref="overlayRef"
:id="panelId"
- :class="[cx('panel'), panelClass]"
- :style="{ ...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
+ :class="[cx('overlay'), panelClass, overlayClass]"
+ :style="{ ...panelStyle, ...overlayStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : '' }"
@click="onOverlayClick"
@keydown="onOverlayKeyDown"
- v-bind="ptm('panel')"
+ v-bind="ptm('overlay')"
>
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index 160af4512..4bb74ee4f 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -105,6 +105,14 @@ export default {
type: [String, Object],
default: null
},
+ overlayStyle: {
+ type: Object,
+ default: null
+ },
+ overlayClass: {
+ type: [String, Object],
+ default: null
+ },
dropdownIcon: {
type: String,
default: null
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 527afbe75..0d70fcec9 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -262,7 +262,7 @@ const classes = {
inputChip: 'p-autocomplete-input-chip',
loader: 'p-autocomplete-loader',
dropdown: 'p-autocomplete-dropdown',
- panel: 'p-autocomplete-overlay p-component',
+ overlay: 'p-autocomplete-overlay p-component',
list: 'p-autocomplete-list',
optionGroup: 'p-autocomplete-option-group',
option: ({ instance, option, i, getItemOptions }) => [