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 }) => [