Problem/Motivation

In case you are using select2 widget in a dialog/modal, autocomplete results are not visible due to not having z-index value.

My steps to reproduce:

  • Install Paragraphs Demo and Enable Paragraphs Library and Select2 modules
  • Enable Entity Browser and configure it as a widget for Paragraphs Library (from_library) paragraphs type
  • Create a new paragraph type and add an entity reference field
  • Configure select2 widget for the entity reference field
  • Go to admin/content/paragraphs and create a new library paragraph with your paragraph type
  • Go to node add page and find a library item
  • Edit the library item in the dialog and try to search for new references.

Proposed resolution

We should add z-index: 1260; property on .select2-container CSS class since Core uses z-index: 1259 on .ui-dialog.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#12 select2-in-dialog-fix-3114589-12.patch9.6 KBaludescher
#12 select2_uiwidget.png99.41 KBaludescher
#7 select2-in-dialog-fix-3114589-7.patch451 bytesmrinalini9
#2 3114589-select2-in-dialog-fix.patch451 bytessasanikolic
#2 Select2 in modal.png770.11 KBsasanikolic

Comments

mbovan created an issue. See original summary.

sasanikolic’s picture

sasanikolic commented
Status: Active » Needs review
StatusFileSize
new Select2 in modal.png770.11 KB
new 3114589-select2-in-dialog-fix.patch451 bytes

Here is the patch with the proposed fix and the screenshot of how that looks. Note that we need a more specific selector than just .select2-container--seven as in that case the select2 will overlap the modal itself.

mbovan’s picture

mbovan commented
Status: Needs review » Needs work 
+++ b/css/select2.seven-overrides.css
@@ -80,3 +80,8 @@
+.ui-widget-overlay + .select2-container--seven {

Tested with Seven and Claro themes.

It works well with the Seven theme, but the same problem still appears with Claro theme.

I think we should have a fix for Claro too.

sasanikolic’s picture

sasanikolic commented
Status: Needs work » Needs review

Seems like select2 supports only seven theme. There are only select2.seven.css and select2.seven-overrides.css in the module which get loaded only for the seven theme. Also, all selectors are explicitly set to .select2-container--seven.

There is a separate issue for Claro integration: https://www.drupal.org/project/select2/issues/3100219. I think all custom css styles will be ported there.

mbovan’s picture

mbovan commented
Status: Needs review » Reviewed & tested by the community

I commented in #3100219: Add a claro theme to connect these two issues.

That said (#4), this should be ready IMHO.

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Reviewed & tested by the community » Needs work

Looks like this needs a reroll.

mrinalini9’s picture

mrinalini9 commented
Status: Needs work » Needs review
StatusFileSize
new select2-in-dialog-fix-3114589-7.patch451 bytes

Rerolled patch for 8.x-1.x, please review.

chr.fritsch’s picture

chr.fritsch
he/him
Primary language German
Location 🇩🇪🇪🇺🌍
commented

Trigger the tests https://github.com/thunder/select2/pull/95

  • chr.fritsch authored 10da290 on 8.x-1.x 
    Issue #3114589 by sasanikolic, mrinalini9, mbovan: Autocomplete results...
chr.fritsch’s picture

chr.fritsch
he/him
Primary language German
Location 🇩🇪🇪🇺🌍
commented
Status: Needs review » Fixed

Done, thank you

Status: Fixed » Closed (fixed)

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

aludescher’s picture

aludescher commented
StatusFileSize
new select2_uiwidget.png99.41 KB
new select2-in-dialog-fix-3114589-12.patch9.6 KB

The issue is still there with latest dev.
Some issues I came accross:

  • The '.select2-container' is not necessarily and adjacent (immediately following) sibling, see attached image. The fix should use the General Sibling Selector (~) instead of the Adjacent Sibling Selector (+).
  • The '.ui-widget-overlay' is not always present eg. Layout builder dialogs have a '.ui-dialog' but no '.ui-widget-overlay'. Using .ui-widget-overlay ~ & { z-index: 1260; } is not enough. We could use '.ui-dialog ~ &' instead.
  • The Claro theme (and thus also Gin) sets ''.ui-dialog' to 'z-index: 1260;' and when '.ui-widget-overlay' is missing we need a higher z-index.

select2 in dialog

It's not clear to me why only the seven, claro and gin themes should contain this fix? Can't we add it to a generic css file and override it with a theme specific one when it's the case?

In addition to the above the attached patch also removes duplicate code from select2.seven.scss:

.ui-widget-overlay + .select2-container--seven{
  z-index:1260;
}
berdir’s picture

berdir
Primary language German
Location Switzerland
commented

I would strongly suggest that you create a new issue. I only saw it due to a mail notification, it will almost certainly get overlooked in here.

aludescher’s picture

aludescher commented

Thanks @Berdir, issue created: https://www.drupal.org/project/select2/issues/3258855