MDL-68167 lib: autocomplete focos should not be removed on blur
authorShamim Rezaie <shamim@moodle.com>
Thu, 29 Oct 2020 15:54:38 +0000 (02:54 +1100)
committerShamim Rezaie <shamim@moodle.com>
Fri, 30 Oct 2020 05:08:56 +0000 (16:08 +1100)
See https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-rearrangeable.html

lib/amd/build/form-autocomplete.min.js
lib/amd/build/form-autocomplete.min.js.map
lib/amd/src/form-autocomplete.js

index d7a7cc1..ce28280 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js and b/lib/amd/build/form-autocomplete.min.js differ
index ec34cfe..09d885c 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 8788e94..83dd16b 100644 (file)
@@ -812,17 +812,14 @@ function($, log, str, templates, notification, LoadingIcon, Aria) {
             // Remove it from the selection.
             pendingPromise.resolve(deselectItem(options, state, $(e.currentTarget), originalSelect));
         });
-        // Remove the highlight of items when user tabs out the tag list.
-        selectionElement.on('blur', function(e) {
-            e.preventDefault();
-            $(this).children().attr('data-active-selection', false).attr('id', '');
-        });
-        // When tag list is focused, highlight the first item.
-        selectionElement.on('focus', function(e) {
-            e.preventDefault();
-            var element = $(this).children('[data-active-selection=true]');
-            if (element && element.length === 0) {
-                activateNextSelection(state);
+        // When listbox is focused, focus on the first option if there is no focused option.
+        selectionElement.on('focus', function() {
+            // Find the list of selections.
+            var selectionsElement = $(document.getElementById(state.selectionId));
+            // Find the active one.
+            var element = selectionsElement.children('[data-active-selection=true]');
+            if (!element.length) {
+                return activateSelection(0, state);
             }
         });
         // Keyboard navigation for the selection list.