Autocomplete/Dialog: Stacking issue when using autofocus on autocomplete

[pickbreaker]

Describe the bug

When using the autofocus property on an Autocomplete element with complete on focus in a dialog the suggestions appear behind the dialog.

Reproducer

https://stackblitz.com/edit/2nhpwg?file=src%2FApp.vue

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Open the dialog
2. Type some characters
3. The suggestions will appear behind the dialog

Expected behavior

The suggestions should appear in front of the dialog

[ghost]

@pickbreaker have you tried using the z-index configuration? I had this issue with select, multiselect, and datepicker (datepicker has a baseZIndex option thats configurable itself).

Docs: https://primevue.org/configuration/#zindex

I implemented it:

zIndex: {
    menu: 1000,       // overlay menus
    modal: 1100,      // dialog, drawer
    overlay: 1200,    // select, multiselect, popover, datepicker
    tooltip: 1200,     // tooltip
    toast: 1200,        // toast
  }

My guess is that AutoComplete would fall under the overlay section. Note: I just implemented this solution so I'll post back if I find any bugs that make this approach not ideal.

[IsaacAbrahamson]

The z-index configuration does not work for autocomplete components. I tried using the solution above with overlay set to a higher zindex than modal, but the issue remains:

https://stackblitz.com/edit/2nhpwg-km8zxngw?file=src%2Fmain.js%3AL124