Problem/Motivation

We recently upgraded the select2_all module to the latest release with Drupal 11 support and noticed that there is an issue with select2 form fields when rendered in a modal window. This issue has already been noted in the select2 module issue queue long ago (See #3211796: Issue with z-index when opening in modal dialog). There is a patch there that folks report helps, but it won't apply here in the select2_all module as this module doesn't involve the creation of a Drupal custom element (Select2) as is done in the select2 module.

Steps to reproduce

There are a variety of ways to reproduce this, but in my case I was on the field overview page for a node type. I clicked the Edit button for one of the fields and by default (using Claro in case it matters) the field config opened in a modal. If the field config included a select form field that select2 has taken over, clicking the select results in the dropdown of options not appearing visually in the modal, but rather rendering underneath the modal. This is the same as described in the issue noted above for select2 module. I even reproduced using the specific case there of using the Drupal Media ckeditor toolbar button.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#7 test.PNG57.97 KBangel_devoeted
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

jaydub created an issue. See original summary.

jaydub’s picture

Issue summary: View changes
mikelutz’s picture

Priority: Normal » Critical

Verified and setting to critical. I'm not sure we will be able to set the parent here, because of the differences in the way that this module works, at least without a whole hook_form_alter to find select elements and pass the form id in the render array, but I hate to do that. We will look into it. At minimum we can up the z-index on the dropdown to something like 100000, but it's not the ideal solution.

mikelutz’s picture

Looks like Dave fixed this years ago in https://www.drupal.org/project/select2_all/issues/3091977, but we had a regression a few weeks ago with https://git.drupalcode.org/project/select2_all/-/merge_requests/9/diffs?... . We refactored ckeditor 4 stuff out, but the comment on the z-index made it seem like that was only needed for ckeditor 4, when we actually need it for all modals.

mikelutz’s picture

Status: Active » Needs review

Put back the z-index, set it to 1500, to beat the modals in the admin ui, probably the best we can do for now.

angel_devoeted’s picture

StatusFileSize
new57.97 KB

Tested the MR across various administrative UI modals (Views, field settings, etc.) and it works as expected.
The dropdown correctly renders on top of the dialog overlays.
The z-index: 1500 seems to be a safe choice to avoid these regressions.

test-select-2

kaustavbagchi made their first commit to this issue’s fork.

matthand’s picture

Status: Needs review » Reviewed & tested by the community

Seeing the community reviewed so marking as RTBC. I'm reviewing now and expect to merge and cut new release soon. Thank you!

matthand’s picture

Status: Reviewed & tested by the community » Fixed

Merged and new release 8.x-1.6 is out. Thank you for reporting, contributing and your reviews!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.