MDL-63198 forms: click on scrollbar should not close the suggestions box
authorShamim Rezaie <shamim@moodle.com>
Sun, 16 Jun 2019 09:46:04 +0000 (19:46 +1000)
committerShamim Rezaie <shamim@moodle.com>
Mon, 5 Aug 2019 03:13:45 +0000 (13:13 +1000)
lib/amd/build/form-autocomplete.min.js
lib/amd/build/form-autocomplete.min.js.map
lib/amd/src/form-autocomplete.js
lib/templates/form_autocomplete_suggestions.mustache

index c6a2fc1..549a653 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js and b/lib/amd/build/form-autocomplete.min.js differ
index c37d9a4..db0aeaf 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js.map and b/lib/amd/build/form-autocomplete.min.js.map differ
index 9e412a3..b91dd0b 100644 (file)
@@ -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);
index 83866ad..a7cc56a 100644 (file)
@@ -35,7 +35,7 @@
         { "label": "Another item label with <strong>tags</strong>", "value": "4" }
     ]}
 }}
-<ul class="form-autocomplete-suggestions" id="{{suggestionsId}}" role="listbox" aria-hidden="true">
+<ul class="form-autocomplete-suggestions" id="{{suggestionsId}}" role="listbox" aria-hidden="true" tabindex="-1">
     {{#options}}
         <li role="option" data-value="{{value}}">{{{label}}}</li>
     {{/options}}