MDL-63937 autocomplete: Add the indicator when processing the request

lib/amd/build/loadingicon.min.js

@@ -0,0 +1 @@
+define(["jquery","core/templates"],function(a,b){var c={LOADING:"core/loading"},d=function(){return b.render(c.LOADING,{})},e=function(b){return d().then(function(c){var d=a(c).hide();return b.append(d),d.fadeIn(150),d})},f=function(b,c){return d().then(function(d){var e=a(d).hide();return b.append(e),e.fadeIn(150),a.when(e.promise(),c)}).then(function(a){return a.fadeOut(100).promise()}).then(function(a){a.remove()})},g=function(b){var c=a.Deferred();return f(b,c),c};return{getIcon:d,addIconToContainer:e,addIconToContainerWithPromise:g,addIconToContainerRemoveOnCompletion:f}});

lib/amd/src/form-autocomplete.js

@@ -557,7 +557,10 @@ function($, log, str, templates, notification, LoadingIcon) {
      */
     var updateAjax = function(e, options, state, originalSelect, ajaxHandler) {
         var pendingPromise = addPendingJSPromise('updateAjax');
-        LoadingIcon.addIconToContainerRemoveOnCompletion($(document.getElementById(state.downArrowId)), pendingPromise);
+        // We need to show the indicator outside of the hidden select list.
+        // So we get the parent id of the hidden select list.
+        var parentElement = $(document.getElementById(state.selectId)).parent();
+        LoadingIcon.addIconToContainerRemoveOnCompletion(parentElement, pendingPromise);
 
         // Get the query to pass to the ajax function.
         var query = $(e.currentTarget).val();

lib/amd/src/loadingicon.js

@@ -14,7 +14,7 @@
 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
 /**
- * Contain the logic for the save/cancel modal.
+ * Contain the logic for the loading icon.
  *
  * @module     core/loading_icon
  * @class      loading_icon
@@ -37,8 +37,8 @@ define(['jquery', 'core/templates'], function($, Templates) {
      * Resolution of the returned promise causes the icon to be faded out and removed.
      *
      * @method  addIconToContainer
-     * @param   {jQuery} container  The element to add the spinner to
-     * @return  {jQuery} The Promise used to create the icon.
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @return  {Promise} The Promise used to create the icon.
      */
     var addIconToContainer = function(container) {
         return getIcon()
@@ -57,9 +57,9 @@ define(['jquery', 'core/templates'], function($, Templates) {
      * Resolution of the returned promise causes the icon to be faded out and removed.
      *
      * @method  addIconToContainerWithPromise
-     * @param   {jQuery} container  The element to add the spinner to
-     * @param   {jQuery} loadingIconPromise The jQuery Promise which determines the removal of the icon
-     * @return  {jQuery} The Promise used to create and then remove the icon.
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @param   {Promise} loadingIconPromise The jQuery Promise which determines the removal of the icon
+     * @return  {jQuery}  The Promise used to create and then remove the icon.
      */
     var addIconToContainerRemoveOnCompletion = function(container, loadingIconPromise) {
         return getIcon()
@@ -89,8 +89,8 @@ define(['jquery', 'core/templates'], function($, Templates) {
      * Resolution of the returned promise causes the icon to be faded out and removed.
      *
      * @method  addIconToContainerWithPromise
-     * @param   {jQuery} container  The element to add the spinner to
-     * @return  {jQuery} A jQuery Promise to resolve when ready
+     * @param   {jQuery}  container  The element to add the spinner to
+     * @return  {Promise} A jQuery Promise to resolve when ready
      */
     var addIconToContainerWithPromise = function(container) {
         var loadingIconPromise = $.Deferred();