MDL-51840 forms lib: keyboard navigation with ajax works.

Ajax autocomplete forms can now be navigated properly with the keyboard.
NoelDeMartin · Oct 26, 2015 · d304952 · d304952
1 parent adebc06
commit d304952
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
@@ -505,8 +505,11 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
      * @param {JQuery} originalSelect The JQuery object matching the hidden select list.
      * @param {Boolean} multiple Are multiple items allowed to be selected?
      * @param {Boolean} tags Are we allowed to create new items on the fly?
+     * @param {String} selector The selector for this select list.
+     * @param {String} ajax Name of an AMD module to handle ajax requests. If specified, the AMD
+     *                      module must expose 2 functions "transport" and "processResults".
      */
-    var addNavigation = function(inputId, suggestionsId, downArrowId, selectionId, originalSelect, multiple, tags) {
+    var addNavigation = function(inputId, suggestionsId, downArrowId, selectionId, originalSelect, multiple, tags, selector, ajax) {
         // Start with the input element.
         var inputElement = $(document.getElementById(inputId));
         // Add keyboard nav with keydown.
@@ -517,8 +520,15 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                     if (inputElement.attr('aria-expanded') === "true") {
                         activateNextItem(inputId, suggestionsId);
                     } else {
-                        // Else - open the suggestions list.
-                        updateSuggestions(inputElement.val(), inputId, suggestionsId, originalSelect, multiple, tags);
+                        // Handle ajax population of suggestions.
+                        if (!inputElement.val() && ajax) {
+                            require([ajax], function(ajaxHandler) {
+                                updateAjax(e, selector, inputId, suggestionsId, originalSelect, multiple, tags, ajaxHandler);
+                            });
+                        } else {
+                            // Else - open the suggestions list.
+                            updateSuggestions(inputElement.val(), inputId, suggestionsId, originalSelect, multiple, tags);
+                        }
                     }
                     // We handled this event, so prevent it.
                     e.preventDefault();
@@ -722,7 +732,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 // Update the form label to point to the text input.
                 originalLabel.attr('for', inputId);
                 // Add the event handlers.
-                addNavigation(inputId, suggestionsId, downArrowId, selectionId, originalSelect, multiple, tags);
+                addNavigation(inputId, suggestionsId, downArrowId, selectionId, originalSelect, multiple, tags, selector, ajax);
 
                 var inputElement = $(document.getElementById(inputId));
                 var suggestionsElement = $(document.getElementById(suggestionsId));