MDL-70180 theme_boost: Allow form autoselect modal overflow

Co-authored-by: Mikel Martín <[email protected]>

lib/amd/src/form-autocomplete.js

@@ -30,6 +30,7 @@ define([
     'core/loadingicon',
     'core/aria',
     'core_form/changechecker',
+    'core/popper2',
 ], function(
     $,
     log,
@@ -38,7 +39,8 @@ define([
     notification,
     LoadingIcon,
     Aria,
-    FormChangeChecker
+    FormChangeChecker,
+    Popper
 ) {
     // Private functions and variables.
     /** @var {Object} KEYS - List of keycode constants. */
@@ -526,7 +528,10 @@ define([
 
             // Show it if it is hidden.
             Aria.unhide(suggestionsElement.get());
-            suggestionsElement.show();
+            Popper.createPopper(inputElement[0], suggestionsElement[0], {
+                placement: 'bottom-start',
+                modifiers: [{name: 'flip', enabled: false}],
+            });
 
             // For each option in the list, hide it if it doesn't match the query.
             suggestionsElement.children().each(function(index, node) {

theme/boost/scss/moodle/forms.scss

@@ -419,6 +419,7 @@ textarea[data-auto-rows] {
 .felement[data-fieldtype="autocomplete"],
 .felement[data-fieldtype="tags"] {
     display: block !important; /* stylelint-disable-line declaration-no-important */
+    position: static;
 }
 
 // Show editor at 100% width by default.

theme/boost/scss/moodle/modal.scss

@@ -31,6 +31,17 @@
     }
 }
 
+/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
+    position: static;
+    .modal-content {
+        position: static;
+        .modal-body {
+            position: static;
+        }
+    }
+}
+
 /* Bug fix for TinyMCE menu when in fullscreen mode. */
 body.tox-fullscreen .modal-dialog {
     width: 100%;

theme/boost/style/moodle.css

@@ -33516,6 +33516,7 @@ textarea[data-auto-rows] {
 .felement[data-fieldtype=autocomplete],
 .felement[data-fieldtype=tags] {
   display: block !important; /* stylelint-disable-line declaration-no-important */
+  position: static;
 }
 
 [data-fieldtype=editor] > div {
@@ -37260,6 +37261,17 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   opacity: inherit;
 }
 
+/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
+  position: static;
+}
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content {
+  position: static;
+}
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content .modal-body {
+  position: static;
+}
+
 /* Bug fix for TinyMCE menu when in fullscreen mode. */
 body.tox-fullscreen .modal-dialog {
   width: 100%;

theme/classic/style/moodle.css

@@ -33516,6 +33516,7 @@ textarea[data-auto-rows] {
 .felement[data-fieldtype=autocomplete],
 .felement[data-fieldtype=tags] {
   display: block !important; /* stylelint-disable-line declaration-no-important */
+  position: static;
 }
 
 [data-fieldtype=editor] > div {
@@ -37194,6 +37195,17 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   opacity: inherit;
 }
 
+/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
+  position: static;
+}
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content {
+  position: static;
+}
+.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content .modal-body {
+  position: static;
+}
+
 /* Bug fix for TinyMCE menu when in fullscreen mode. */
 body.tox-fullscreen .modal-dialog {
   width: 100%;