Dropdown menus do not collapse

[ThomasITS]

The To and Exclude dropdown menus do not automatically collapse after a selection is made. This issue was experienced in Moodle 3.7.1, using either the Classic or Boost themes. Issue occurs in Chrome, Edge, and IE web browsers.

[thepurpleblob]

Me too... and a picture...

No amount of clicking outside the drop down makes it vanish. In the console is this if it matters...

Uncaught TypeError: event.data.indexOf is not a function
at _receiveMessage (yui_combo.php?3.17.2/timers/timers.js&3.17.2/querystring-stringify/querystring-stringify.js&m/1567096852/editor_atto/editor/editor-debug.js&m/1567096852/editor_atto/menu/menu-debug.js&m/1567096852/editor_atto/plugin/plugin-debug.js&m/1567096852/atto_collapse/button/button-debug.js&m/1567096852/atto_title/button/button-debug.js&m/1567096852/atto_bold/button/button-debug.js&m/1567096852/atto_italic/button/button-debug.js&m/1567096852/atto_unorderedlist/button/button-debug.js&m/1567096852/atto_orderedlist/button/button-debug.js&m/1567096852/atto_link/button/button-debug.js&m/1567096852/atto_image/button/button-debug.js&m/1567096852/form/shortforms/shortforms-debug.js&m/1567096852/atto_media/button/button-debug.js&m/1567096852/atto_helixatto/button/button-debug.js&m/1567096852/atto_managefiles/button/button-debug.js&m/1567096852/atto_recordrtc/button/button-debug.js&m/1567096852/atto_recordrtc/recording/recording-debug.js&m/1567096852/atto_underline/button/button-debug.js:8029)

[rrusso]

I am able to replicate it, but it's a core bug and not part of Quickmail at all and a problem with the "autocomplete" form element's JS.

index f46a3c044cf..fad547be384 100644
--- a/home/rrusso/moodle-lsu/lib/amd/src/form-autocomplete.js
+++ b/lib/amd/src/form-autocomplete.js
@@ -719,10 +719,13 @@ function($, log, str, templates, notification, LoadingIcon) {
                 // Get the current element with focus.
                 var focusElement = $(document.activeElement);

-                // Only close the menu if the input hasn't regained focus, and if the element still exists.
+                // Only close the menu if the input hasn't regained focus and if the element still exists,
+                // and regain focus if the scrollbar is clicked.
                 // Due to the half a second delay, it is possible that the input element no longer exist
                 // by the time this code is being executed.
-                if (focusElement.attr('id') != inputElement.attr('id') && $('#' + state.inputId).length) {
+                if (focusElement.is(document.getElementById(state.suggestionsId))) {
+                    inputElement.focus(); // Probably the scrollbar is clicked. Regain focus.
+                } else if (!focusElement.is(inputElement) && $(document.getElementById(state.inputid)).length) {
                     if (options.tags) {
                         pendingPromise.then(function() {
                             return createItem(options, state, originalSelect);

I've verified by moving back to the old method it works in 3.7.1.

Looking into finding a workaround, but it seems there is none until Moodle core fixes this.
If you want to check for yourself, check admin/tool/cohortroles/index.php and it exhibits the same issue. All use of the autocomplete form exhibit this problem.

Implementing the above diff to lib/amd/src/form-autocomplete.js (and minifying this in lib/amd/build/form-autocomplete.min.js) fixes everything everywhere.

[rrusso]

To clarify, changing this:

                if (focusElement.is(document.getElementById(state.suggestionsId))) {
                    inputElement.focus(); // Probably the scrollbar is clicked. Regain focus.
                } else if (!focusElement.is(inputElement) && $(document.getElementById(state.inputid)).length) {

To this:

                if (focusElement.attr('id') != inputElement.attr('id') && $('#' + state.inputId).length) {

Resolves the issue.

[rrusso]

Remember to minify and copy to build.

[rrusso]

The core change is as follows according to Moodle.org so as not to break scrolling in modal dialog boxes.
Change

                } else if (!focusElement.is(inputElement) && $(document.getElementById(state.inputid)).length) {

To

                } else if (!focusElement.is(inputElement) && $(document.getElementById(state.inputId)).length) {

Capitalization is a killer, people.

[thepurpleblob]

Is there a Moodle tracker for this?

So we can vote/complain

[rrusso]

https://tracker.moodle.org/browse/MDL-66472