search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.38k stars 1.22k forks source link

Autocomplete/Dialog: Stacking issue when using autofocus on autocomplete #5791

Open pickbreaker opened 5 months ago

pickbreaker commented 5 months ago

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 commented 2 months ago

@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.