Autocomplete has lower z-index than ui-dialog

Created on 18 October 2016, almost 8 years ago
Updated 25 April 2023, over 1 year ago

Problem/Motivation

jquery ui-autocomplete dropdown is hidden by ui-dialog popup, but should be z-indexed above

Steps to reproduce

1. You have to create the link which is triggering ui-dialog by click.
2. Put the form inside dialog's content
3. Add at least one field with autocomplete into this form.
4. Try to open dialog and type something into autocomplete and you will not see ui-autocomplete, since it's located "under" ui-dialog.

If everything is ok -> try to put ui-dialog not in the root of document, but with appendTo option defined https://api.jqueryui.com/dialog/#option-appendTo.

Proposed resolution

1. Decide and create unique z-index for ui-autocomplete, which should have higher value than ui-dialog and update this page https://www.drupal.org/docs/theming-drupal/z-indexes-in-drupal-8
2. Update all related core themes.

Current behavior

Expected behavior

🐛 Bug report
Status

Closed: works as designed

Version

10.1

Component
CSS 

Last updated 1 day ago

Created by

🇺🇸United States BartK

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Tagging Field UX as upcoming Field UI improvements will likely increase the number of autocomplete inputs in dialogs.

  • First commit to issue fork.
  • @utkarsh_33 opened merge request.
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Setting to NW, comments in MR.

  • This problem does not exists with the themes like Claro but this can only be reproduced with themes like Olivero.

  • Status changed to Postponed: needs info over 1 year ago
  • 🇫🇮Finland lauriii Finland

    I tested this with an autocomplete field in Views UI and at least there, it's working as expected in both Claro and Olivero. When I tested this, the autocomplete was rendered inside the dialog, meaning that it is in a different stacking context with the dialog. Because of that we shouldn't have to adjust the z-index against the modal.

    Can someone who can reproduce the problem add the steps to the issue summary so that we can assess what's the root cause to the bug? I'm untagging this from the Field UX for now since the impact of this issue is hypothetical, and there are no steps to reproduce this.

  • Status changed to Closed: works as designed over 1 year ago
  • 🇫🇮Finland lauriii Finland

    Discussed with @bnjmnm and @Utkarsh_33 and they explained that reproducing this would require modifying appendTo option. I don't think we can provide a consistent behavior for this option because this option allows placing the tray in any stacking context. I think it's fine for us to expect that if someone wants to define the appendTo option, that they would also have to define an appropriate z-index for the tray, depending on where they are rendering the tray.

Production build 0.71.5 2024