Issue #3498398 by grimreaper: Dialog: autocomplete broken

assets/js/misc/dialog/dialog.ajax.js

@@ -17,9 +17,12 @@
       const $context = $(context);
 
       if (!$('#drupal-modal').length) {
+        // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
+        // sit on top of dialogs. For more information see
+        // http://api.jqueryui.com/theming/stacking-elements/.
         $(
           `<div id="drupal-modal" class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
+            <div class="modal-dialog ui-front" role="document">
               <div class="modal-content"></div>
             </div>
           </div>`,
@@ -108,11 +111,14 @@
     }
     let $dialog = $(response.selector);
     if (!$dialog.length) {
+      // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
+      // sit on top of dialogs. For more information see
+      // http://api.jqueryui.com/theming/stacking-elements/.
       $dialog = $(
         `<div id="${response.selector.replace(
           /^#/,
           '',
-        )}" class="offcanvas" tabindex="-1" role="dialog"></div>`,
+        )}" class="offcanvas ui-front" tabindex="-1" role="dialog"></div>`,
       ).appendTo('body');
     }
 
@@ -162,12 +168,15 @@
     }
     let $dialog = $(response.selector);
     if (!$dialog.length) {
+      // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
+      // sit on top of dialogs. For more information see
+      // http://api.jqueryui.com/theming/stacking-elements/.
       $dialog = $(
         `<div id="${response.selector.replace(
           /^#/,
           '',
         )}" class="modal fade" tabindex="-1" role="dialog">
-          <div class="modal-dialog" role="document">
+          <div class="modal-dialog ui-front" role="document">
             <div class="modal-content"></div>
           </div>
         </div>`,

assets/js/misc/dialog/dialog.js

@@ -143,9 +143,13 @@
       settings = event.settings;
 
       if (settings.dialogClasses !== undefined) {
+        // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
+        // sit on top of dialogs. For more information see
+        // http://api.jqueryui.com/theming/stacking-elements/.
         $('.modal-dialog', $element)
           .removeAttr('class')
           .addClass('modal-dialog')
+          .addClass('ui-front')
           .addClass(settings.dialogClasses);
       }