Currently when we add autocompletition text field to modal dialog on the first dialog show we are not able to see autocomplete widget #2360725: Add simple autocomplete functionality to the entity embed entity selection UI.

This is actually a core issue because dialog-modal element does not tell autocomplete widget where to append exactly.
So on first dialog show with autocomplete field autocomplete widget will be appended to body element and will be positioned in DOM before dialog code and this is the reason we do not see it. On second try with same dialog (close and open) dialog code is already in html (wrapped with jquery ui wrappers which have 'ui-front' class) so autocomplete will append it self correctly.

Adding 'ui-front' class to dialog modal html code will solve this issue.

More info

CommentFileSizeAuthor
#12 drupal-modal-dialog-ui-front-class-2361383-12.patch838 bytespivica
#6 drupal-modal-dialog-ui-front-class-2361383-6.patch762 bytespivica
#5 drupal-modal-dialog-ui-front-class-2361383-5.patch763 bytespivica
#1 drupal-modal-dialog-ui-front-class-2361383-1.patch713 bytespivica
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

pivica’s picture

pivica CreditAttribution: pivica commented
FileSize
drupal-modal-dialog-ui-front-class-2361383-1.patch713 bytes

Attaching patch.

Berdir’s picture

Berdir
Primary language German
Location Switzerland
CreditAttribution: Berdir commented
Status: Active » Needs review
Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Status: Needs review » Needs work 
+++ b/core/misc/dialog/dialog.ajax.js
@@ -15,7 +15,8 @@
+        // Add ui-front class so ui widgets like autocomplete appends to dialog.

s/ui widgets/jQuery UI widgets/

s/appends to dialog/sits on top of dialogs/

Should also explain this is a jQuery UI class, and link to http://api.jqueryui.com/theming/stacking-elements/.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Issue tags: +CSS, +JavaScript, +Affects jQuery UI
pivica’s picture

pivica CreditAttribution: pivica commented
Status: Needs work » Needs review
FileSize
drupal-modal-dialog-ui-front-class-2361383-5.patch763 bytes

New patch based on feedback from #4.

pivica’s picture

pivica CreditAttribution: pivica commented
FileSize
drupal-modal-dialog-ui-front-class-2361383-6.patch762 bytes

Removed one extra space in comment.

The last submitted patch, 5: drupal-modal-dialog-ui-front-class-2361383-5.patch, failed testing.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Status: Needs review » Needs work

Thanks! A few more nitpicks, then this is RTBC:

  1. +++ b/core/misc/dialog/dialog.ajax.js
@@ -15,7 +15,10 @@
+        // Add ui-front jQuery UI class so jQuery UI widgets like autocomplete

    s/ui-front/'ui-front'/ 

  2. +++ b/core/misc/dialog/dialog.ajax.js
@@ -15,7 +15,10 @@
+        // sits on top of dialogs. For more information's check

    s/sits/sit/
    s/information's/information/
    s/check/see/

The last submitted patch, 6: drupal-modal-dialog-ui-front-class-2361383-6.patch, failed testing.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented

I wonder why the patch doesn't apply; the affected file hasn't changed since June:

git log -- core/misc/dialog/dialog.ajax.js
commit 22b7b7e9032fbcc85e115ed91a65d10150cbf318
Date:   Sun Jun 8 18:30:42 2014 -0500

Perhaps the patch was modified manually?

Berdir’s picture

Berdir
Primary language German
Location Switzerland
CreditAttribution: Berdir commented

Yep, the patch file is corrupt.

pivica’s picture

pivica CreditAttribution: pivica commented
Status: Needs work » Needs review
FileSize
drupal-modal-dialog-ui-front-class-2361383-12.patch838 bytes

OK new patch, added feedback from #8 and patch should not be corrupted now.

Wim Leers’s picture

Wim Leers
Location Ghent 🇧🇪🇪🇺
CreditAttribution: Wim Leers commented
Status: Needs review » Reviewed & tested by the community

Great, thanks!

alexpott’s picture

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

Committed b99effe and pushed to 8.0.x. Thanks!

  • alexpott committed b99effe on 8.0.x 
    Issue #2361383 by pivica: Fixed Drupal modal dialog should use ui-front...

Status: Fixed » Closed (fixed)

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

s_leu’s picture

s_leu CreditAttribution: s_leu at MD Systems GmbH commented

This ui-front class isn't added to the dialog once it gets closed and re-opened again. I provided a patch to fix this in #2508830: Various UI problem with autocomplete select control