Using latest Drupal core and entity_embed dev branches.

Have a clean Drupal core installation with entity_embed button enabled for full html format and bunch of nodes generated with devel generate. Tested in Chrome and FF and it both browsers problems are the same.

On first entity embed button click problem is that select control is clipped and user can not see all entites in select list:

Now if you close dialog and click again on entity embed button on autocomplete position of select component will be different in DOM and select component will be then behind dialog and overlay and dialog:

I guess this is problem with Drupal core and entity_autocomplete in modal dialog, but posting for now here.

CommentFileSizeAuthor
#7 autocomplete-in-dialogs-2508830-7.patch604 bytess_leu
#7 autocomplete-in-dialogs-2508830-7.interdiff.txt1.68 KBs_leu
#3 autcomplete-in-dialogs-2508830-3.patch1.66 KBs_leu
entity_embed_ui_bug_2.png43.84 KBpivica
entity_embed_ui_bug_1.png39.65 KBpivica
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Dave Reid’s picture

Dave Reid
he/him
Primary language English
Location Nebraska USA
CreditAttribution: Dave Reid as a volunteer commented

Yes, we should probably file a bug in core about this. Could you do that and link it here?

slashrsm’s picture

slashrsm CreditAttribution: slashrsm commented
Issue tags: +Media Initiative, +sprint
s_leu’s picture

s_leu CreditAttribution: s_leu at MD Systems GmbH commented
Project: Entity Embed » Drupal core
Version: 8.x-1.x-dev » 8.0.x-dev
Component: User interface » javascript
Priority: Major » Normal
Status: Active » Needs review
FileSize
autcomplete-in-dialogs-2508830-3.patch1.66 KB

I guess this is problem with Drupal core and entity_autocomplete in modal dialog

Yes both issues are pure Drupal core issue and every autocomplete widget in the modal will have that problem.

I solved the first issue by adding an additional CSS class to the dialog if there are autocomplete widgets found in its content. Besides that i added some small CSS fix that is using this class, i didn't really know where to place it, but since it should around for all themes, i just added it in jquery.ui's core.css. If i should move it anywhere else please let me know where the right place would be.

The second issue that was described was partially solved in #2361383: Drupal modal dialog should use ui-front class, but still happens when a dialog is re-opened.

Dave Reid’s picture

Dave Reid
he/him
Primary language English
Location Nebraska USA
CreditAttribution: Dave Reid as a volunteer commented
Issue tags: -sprint +D8Media
Berdir’s picture

Berdir
Primary language German
Location Switzerland
CreditAttribution: Berdir at MD Systems GmbH commented 
+++ b/core/assets/vendor/jquery.ui/themes/base/core.css
@@ -91,3 +91,7 @@
+
+.ui-dialog.autocomplete-dialog {
+  overflow: visible;
+}

I have no idea where this is supposed to be, but I do now that it is wrong here as those are the files from jquery itself.

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
Status: Needs review » Needs work 
  1. +++ b/core/assets/vendor/jquery.ui/themes/base/core.css
@@ -91,3 +91,7 @@
+
+.ui-dialog.autocomplete-dialog {
+  overflow: visible;
+}

+++ b/core/misc/dialog/dialog.ajax.js
@@ -101,13 +101,16 @@

    @berdir is right this definitely can not go to jquery vendor code. I guess appropriate place for this is in /core/misc/dialog.theme.css - here you will find already code that is tweaking jquery_ui.dialog stuff. 

  2. +++ b/core/misc/dialog/dialog.ajax.js
@@ -101,13 +101,16 @@
+      $dialog = $('<div id="' + response.selector.replace(/^#/, '') + '" class="ui-front"/>').appendTo ('body');

    You have one extra space after appendTo 

  3. +++ b/core/misc/dialog/dialog.ajax.js
@@ -101,13 +101,16 @@
+    // For usage later in this function.
+    var $content = $(response.data);
+

    I don't see a point of adding additional variable if we are going to use it only in one place. 

  4. +++ b/core/misc/dialog/dialog.ajax.js
@@ -135,6 +138,12 @@
+    // Add special class for the dialog in case there are autocomplete widgets
+    // available within the dialog content.
+    if ($content.find('.form-autocomplete').length) {
+      $dialog.parent().addClass('autocomplete-dialog');
+    }
+

    OK this is ugly definitely.

    I investigated a bit why we have this problem on the first place and found this jQuery commit first Dialog: Selectmenu/autocomplete in dialog window is cut off. So jQuery 1.12.0 release removed overflow hidden from dialog control because of the same problem we have now.

    But then #2423781: Firefox crash using a modal reintroduced overflow hidden in seven because of some weird FF problem on OS X when using modals.

    Not sure how to approach this first, I will post comment on #2423781 about this regression. IIdeally latest FF maybe does not have this problem any more in OS X and we can remove overflow hidden from seven. If not we will need to figure something else.

s_leu’s picture

s_leu CreditAttribution: s_leu at MD Systems GmbH commented
Status: Needs work » Needs review
FileSize
autocomplete-in-dialogs-2508830-7.interdiff.txt1.68 KB
autocomplete-in-dialogs-2508830-7.patch604 bytes

Seems like we're at the point where we should split the 2 problems here, as the fix for the re-opening of the dialog can actually be committed as it looks to me.

Therefore i'm uploading a new patch that excludes the changes for the not overflowing autocomplete suggestions. That way the fix can for the position of the autocomplete after re-opening a modal can be committed a bit sooner i hope.

I will open another issue regarding the problem with the overflowing of the autocomplete suggestions.

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented

Seems like we're at the point where we should split the 2 problems here, as the fix for the re-opening of the dialog can actually be committed as it looks to me.

Makes sense to me. New patch looks good, lets just wait test bot to finish.

I will open another issue regarding the problem with the overflowing of the autocomplete suggestions.

Instead of opening new issue maybe we should open #2423781: Firefox crash using a modal because of change in that issue we now have this problem.

s_leu’s picture

s_leu CreditAttribution: s_leu at MD Systems GmbH commented

Created the follow up here: #2535122: Autocomplete suggestions in modal clipped due to overflow: hidden

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
Status: Needs review » Reviewed & tested by the community

Patch looks good.

Why we need ui-front class is explained in #2361383: Drupal modal dialog should use ui-front class.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott at Chapter Three commented
Status: Reviewed & tested by the community » Fixed

Nice find. This issue is a normal bug fix, and doesn't include any disruptive changes, so it is allowed per https://www.drupal.org/core/beta-changes. Committed b94ce6d and pushed to 8.0.x. Thanks!

  • alexpott committed fa3fc44 on 8.0.x 
    Issue #2508830 by s_leu, pivica: Various UI problem with autocomplete...
mparker17’s picture

mparker17
he/him
Primary language English
Location UTC-4
CreditAttribution: mparker17 at OpenConcept Consulting Inc. commented
Issue summary: View changes

(Images in issue summary didn't work because they had the full domain)

Status: Fixed » Closed (fixed)

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

eworwa’s picture

eworwa CreditAttribution: eworwa as a volunteer commented

Hi, I experienced this issue (autocomplete widget not been showed on modal windows) on my site. I'm using Drupal 8.4.0. I created a content type with a link field, and when a I try to create a new instance of this content type in a modal, the autocomplete widget doesn't show up. Im using class="use-ajax" and data-dialog-type="modal" in the link to the modal window.

For fixing this I had to rewrite the .ui-front css class and add a ridiculously high z-index (10000).

I'm not sure if this is the right place for posting this, apologies if not.

alexdoma’s picture

alexdoma CreditAttribution: alexdoma as a volunteer and at UNL Solutions commented

The same problem like #15 . theme bootstrap