From 32f3de567ff21e6c53f3bd5552123a0b9ebf02cb Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Mon, 26 Oct 2015 12:20:33 +0800
Subject: [PATCH] MDL-51838 autocomplete: Scroll the suggestions list

Keep the active item "visible" when using keyboard nav on a long list of suggestions.
---
 lib/amd/build/form-autocomplete.min.js | 2 +-
 lib/amd/src/form-autocomplete.js       | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
index fa29639cfc2..d057151f3a9 100644
--- a/lib/amd/build/form-autocomplete.min.js
+++ b/lib/amd/build/form-autocomplete.min.js
@@ -1 +1 @@
-define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e,f){var g=a(d).attr("data-value");f&&e.children("option").each(function(b,c){a(c).attr("value")==g&&a(c).prop("selected",!1)}),r(c,b,e,f)},j=function(b,c,d){var e=a(document.getElementById(c)),f=a(document.getElementById(d)),g=f.children("[aria-hidden=false]").length;for(b%=g;0>b;)b+=g;var h=a(f.children("[aria-hidden=false]").get(b)),i=a(f.children("[role=option]")).index(h),j=d+"-"+i;f.children().attr("aria-selected",!1).attr("id",""),h.attr("aria-selected",!0).attr("id",j),e.attr("aria-activedescendant",j)},k=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f+1,b,c)},l=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f-1,b,c)},o=function(b,c,d){var e=a(document.getElementById(b)),f=a(document.getElementById(c));e.attr("aria-expanded",!1).attr("aria-activedescendant",d),f.hide().attr("aria-hidden",!0)},p=function(b,c,f,g,h,i){var k=a(document.getElementById(c)),l=a(document.getElementById(f)),m=!1,n=[];g.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(n[n.length]={label:c.innerHTML,value:a(c).attr("value")})}),d.render("core/form_autocomplete_suggestions",{inputId:c,suggestionsId:f,options:n,multiple:h}).done(function(d){l.replaceWith(d),l=a(document.getElementById(f)),l.show().attr("aria-hidden",!1),l.children().each(function(c,d){d=a(d),d.text().indexOf(b)>-1?(d.show().attr("aria-hidden",!1),m=!0):d.hide().attr("aria-hidden",!0)}),m?(k.attr("aria-expanded",!0),i||j(0,c,f)):(l.hide(),l.attr("aria-hidden",!0),k.attr("aria-expanded",!1))}).fail(e.exception)},q=function(b,c,f,g,h){var i=a(document.getElementById(b)),j=i.val(),k=j.split(","),l=!1;a.each(k,function(b,c){if(c=c.trim(),""!==c&&(g||h.children("option").prop("selected",!1),h.children("option").each(function(b,d){a(d).attr("value")==c&&(l=!0,a(d).prop("selected",!0))}),!l)){var d=a("<option>");d.append(c),d.attr("value",c),h.append(d),d.prop("selected",!0)}});var m=a(document.getElementById(f)),n=[];h.children("option").each(function(b,c){a(c).prop("selected")&&n.push({label:a(c).html(),value:a(c).attr("value")})});var p={selectionId:f,items:n,multiple:g};d.render("core/form_autocomplete_selection",p).done(function(b){m.empty().append(a(b).html())}).fail(e.exception),i.val(""),o(b,c,f),h.change()},r=function(b,c,f,g){var h=[],i=a(document.getElementById(b));f.children("option").each(function(b,c){a(c).prop("selected")&&h.push({label:a(c).html(),value:a(c).attr("value")})});var j={selectionId:b,items:h,multiple:g};d.render("core/form_autocomplete_selection",j).done(function(b){i.empty().append(a(b).html())}).fail(e.exception),f.change()},s=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=a(document.getElementById(c)),i=h.children("[aria-selected=true]").attr("data-value");e||f.children("option").prop("selected",!1),f.children("option").each(function(b,c){a(c).attr("value")==i&&a(c).prop("selected",!0)}),r(d,b,f,e),g.val(""),o(b,c,d)},t=function(b,c,d,f,g,h,i,j){var k=a(b.currentTarget).val();j.transport(c,k,function(b){var e=j.processResults(c,b),k=[];g.children("option").each(function(b,c){c=a(c),c.prop("selected")?k.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===k.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),g.append(d)}}),p("",d,f,g,h,i)},e.exception)},u=function(b,c,d,e,h,r,t){var u=a(document.getElementById(b));u.on("keydown",function(d){switch(d.keyCode){case f.DOWN:return"true"===u.attr("aria-expanded")?k(b,c):p(u.val(),b,c,h,r,t),d.preventDefault(),!1;case f.COMMA:return t&&q(b,c,e,r,h),d.preventDefault(),!1;case f.UP:return n(b,c),d.preventDefault(),!1;case f.ENTER:var g=a(document.getElementById(c));return"true"===u.attr("aria-expanded")&&g.children("[aria-selected=true]").length>0?s(b,c,e,r,h):t&&q(b,c,e,r,h),d.preventDefault(),!1;case f.ESCAPE:return"true"===u.attr("aria-expanded")&&o(b,c,e),d.preventDefault(),!1}return!0}),u.on("behat:set-value",function(){t&&q(b,c,e,r,h)}),u.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&t&&q(b,c,e,r,h),o(b,c,e)},500)});var v=a(document.getElementById(d));v.on("click",function(){u.focus(),g&&window.clearTimeout(g),p(u.val(),b,c,h,r,t)});var w=a(document.getElementById(c));w.parent().on("click","[role=option]",function(d){var f=a(d.currentTarget).closest("[role=option]"),g=a(document.getElementById(c)),i=g.children("[aria-hidden=false]").index(f);j(i,b,c),s(b,c,e,r,h)});var x=a(document.getElementById(e));x.parent().on("click","[role=listitem]",function(c){var d=a(c.currentTarget);i(b,e,d,h,r)}),x.parent().on("keydown",function(c){switch(c.keyCode){case f.DOWN:return m(e),c.preventDefault(),!1;case f.UP:return l(e),c.preventDefault(),!1;case f.SPACE:case f.ENTER:var d=a(document.getElementById(e)).children("[data-active-selection=true]");return d&&(i(b,e,d,h,r),c.preventDefault()),!1}return!0}),u.on("input",function(d){var e=a(d.currentTarget).val();p(e,b,c,h,r,t)})};return{enhance:function(c,e,f,g){"undefined"==typeof e&&(e=!1),"undefined"==typeof f&&(f=!1);var h=a(c);if(!h)return b.debug("Selector not found: "+c),!1;h.hide().attr("aria-hidden",!0);var i=h.attr("id"),j=h.attr("multiple"),k="form_autocomplete_input-"+a.now(),l="form_autocomplete_suggestions-"+a.now(),m="form_autocomplete_selection-"+a.now(),n="form_autocomplete_downarrow-"+a.now(),o=a("[for="+i+"]"),p=[];h.children("option").each(function(b,c){p[b]={label:c.innerHTML,value:a(c).attr("value")}});var q=d.render("core/form_autocomplete_input",{downArrowId:n,inputId:k,suggestionsId:l,selectionId:m,placeholder:g,multiple:j}),s=d.render("core/form_autocomplete_suggestions",{inputId:k,suggestionsId:l,options:p,multiple:j}),v=d.render("core/form_autocomplete_selection",{selectionId:m,items:[],multiple:j});a.when(q,s,v).done(function(b,d,g){h.after(d),h.after(b),h.after(g),o.attr("for",k),u(k,l,n,m,h,j,e);var i=a(document.getElementById(k)),p=a(document.getElementById(l));p.hide().attr("aria-hidden",!0),f&&require([f],function(b){var d=function(a){t(a,c,k,l,h,j,e,b)};i.on("input keypress",d);var f=a(document.getElementById(n));f.on("click",d)}),r(m,k,h,j)})}}});
\ No newline at end of file
+define(["jquery","core/log","core/str","core/templates","core/notification"],function(a,b,c,d,e){var f={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:188,UP:38},g=null,h=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]").length;for(b%=e;0>b;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c+"-"+b;d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g)},i=function(b,c,d,e,f){var g=a(d).attr("data-value");f&&e.children("option").each(function(b,c){a(c).attr("value")==g&&a(c).prop("selected",!1)}),r(c,b,e,f)},j=function(b,c,d){var e=a(document.getElementById(c)),f=a(document.getElementById(d)),g=f.children("[aria-hidden=false]").length;for(b%=g;0>b;)b+=g;var h=a(f.children("[aria-hidden=false]").get(b)),i=a(f.children("[role=option]")).index(h),j=d+"-"+i;f.children().attr("aria-selected",!1).attr("id",""),h.attr("aria-selected",!0).attr("id",j),e.attr("aria-activedescendant",j);var k=h.offset().top-f.offset().top+f.scrollTop()-f.height()/2;f.animate({scrollTop:k},100)},k=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f+1,b,c)},l=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e-1,b)},m=function(b){var c=a(document.getElementById(b)),d=c.children("[data-active-selection=true]");if(!d)return void h(0,b);var e=c.children("[aria-selected=true]").index(d);h(e+1,b)},n=function(b,c){var d=a(document.getElementById(c)),e=d.children("[aria-selected=true]"),f=d.children("[aria-hidden=false]").index(e);j(f-1,b,c)},o=function(b,c,d){var e=a(document.getElementById(b)),f=a(document.getElementById(c));e.attr("aria-expanded",!1).attr("aria-activedescendant",d),f.hide().attr("aria-hidden",!0)},p=function(b,c,f,g,h,i){var k=a(document.getElementById(c)),l=a(document.getElementById(f)),m=!1,n=[];g.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(n[n.length]={label:c.innerHTML,value:a(c).attr("value")})}),d.render("core/form_autocomplete_suggestions",{inputId:c,suggestionsId:f,options:n,multiple:h}).done(function(d){l.replaceWith(d),l=a(document.getElementById(f)),l.show().attr("aria-hidden",!1),l.children().each(function(c,d){d=a(d),d.text().indexOf(b)>-1?(d.show().attr("aria-hidden",!1),m=!0):d.hide().attr("aria-hidden",!0)}),m?(k.attr("aria-expanded",!0),i||j(0,c,f)):(l.hide(),l.attr("aria-hidden",!0),k.attr("aria-expanded",!1))}).fail(e.exception)},q=function(b,c,f,g,h){var i=a(document.getElementById(b)),j=i.val(),k=j.split(","),l=!1;a.each(k,function(b,c){if(c=c.trim(),""!==c&&(g||h.children("option").prop("selected",!1),h.children("option").each(function(b,d){a(d).attr("value")==c&&(l=!0,a(d).prop("selected",!0))}),!l)){var d=a("<option>");d.append(c),d.attr("value",c),h.append(d),d.prop("selected",!0)}});var m=a(document.getElementById(f)),n=[];h.children("option").each(function(b,c){a(c).prop("selected")&&n.push({label:a(c).html(),value:a(c).attr("value")})});var p={selectionId:f,items:n,multiple:g};d.render("core/form_autocomplete_selection",p).done(function(b){m.empty().append(a(b).html())}).fail(e.exception),i.val(""),o(b,c,f),h.change()},r=function(b,c,f,g){var h=[],i=a(document.getElementById(b));f.children("option").each(function(b,c){a(c).prop("selected")&&h.push({label:a(c).html(),value:a(c).attr("value")})});var j={selectionId:b,items:h,multiple:g};d.render("core/form_autocomplete_selection",j).done(function(b){i.empty().append(a(b).html())}).fail(e.exception),f.change()},s=function(b,c,d,e,f){var g=a(document.getElementById(b)),h=a(document.getElementById(c)),i=h.children("[aria-selected=true]").attr("data-value");e||f.children("option").prop("selected",!1),f.children("option").each(function(b,c){a(c).attr("value")==i&&a(c).prop("selected",!0)}),r(d,b,f,e),g.val(""),o(b,c,d)},t=function(b,c,d,f,g,h,i,j){var k=a(b.currentTarget).val();j.transport(c,k,function(b){var e=j.processResults(c,b),k=[];g.children("option").each(function(b,c){c=a(c),c.prop("selected")?k.push(c.attr("value")):c.remove()}),a.each(e,function(b,c){if(-1===k.indexOf(c.value)){var d=a("<option>");d.append(c.label),d.attr("value",c.value),g.append(d)}}),p("",d,f,g,h,i)},e.exception)},u=function(b,c,d,e,h,r,t){var u=a(document.getElementById(b));u.on("keydown",function(d){switch(d.keyCode){case f.DOWN:return"true"===u.attr("aria-expanded")?k(b,c):p(u.val(),b,c,h,r,t),d.preventDefault(),!1;case f.COMMA:return t&&q(b,c,e,r,h),d.preventDefault(),!1;case f.UP:return n(b,c),d.preventDefault(),!1;case f.ENTER:var g=a(document.getElementById(c));return"true"===u.attr("aria-expanded")&&g.children("[aria-selected=true]").length>0?s(b,c,e,r,h):t&&q(b,c,e,r,h),d.preventDefault(),!1;case f.ESCAPE:return"true"===u.attr("aria-expanded")&&o(b,c,e),d.preventDefault(),!1}return!0}),u.on("behat:set-value",function(){t&&q(b,c,e,r,h)}),u.on("blur focus",function(a){g&&window.clearTimeout(g),g=window.setTimeout(function(){"blur"==a.type&&t&&q(b,c,e,r,h),o(b,c,e)},500)});var v=a(document.getElementById(d));v.on("click",function(){u.focus(),g&&window.clearTimeout(g),p(u.val(),b,c,h,r,t)});var w=a(document.getElementById(c));w.parent().on("click","[role=option]",function(d){var f=a(d.currentTarget).closest("[role=option]"),g=a(document.getElementById(c)),i=g.children("[aria-hidden=false]").index(f);j(i,b,c),s(b,c,e,r,h)});var x=a(document.getElementById(e));x.parent().on("click","[role=listitem]",function(c){var d=a(c.currentTarget);i(b,e,d,h,r)}),x.parent().on("keydown",function(c){switch(c.keyCode){case f.DOWN:return m(e),c.preventDefault(),!1;case f.UP:return l(e),c.preventDefault(),!1;case f.SPACE:case f.ENTER:var d=a(document.getElementById(e)).children("[data-active-selection=true]");return d&&(i(b,e,d,h,r),c.preventDefault()),!1}return!0}),u.on("input",function(d){var e=a(d.currentTarget).val();p(e,b,c,h,r,t)})};return{enhance:function(c,e,f,g){"undefined"==typeof e&&(e=!1),"undefined"==typeof f&&(f=!1);var h=a(c);if(!h)return b.debug("Selector not found: "+c),!1;h.hide().attr("aria-hidden",!0);var i=h.attr("id"),j=h.attr("multiple"),k="form_autocomplete_input-"+a.now(),l="form_autocomplete_suggestions-"+a.now(),m="form_autocomplete_selection-"+a.now(),n="form_autocomplete_downarrow-"+a.now(),o=a("[for="+i+"]"),p=[];h.children("option").each(function(b,c){p[b]={label:c.innerHTML,value:a(c).attr("value")}});var q=d.render("core/form_autocomplete_input",{downArrowId:n,inputId:k,suggestionsId:l,selectionId:m,placeholder:g,multiple:j}),s=d.render("core/form_autocomplete_suggestions",{inputId:k,suggestionsId:l,options:p,multiple:j}),v=d.render("core/form_autocomplete_selection",{selectionId:m,items:[],multiple:j});a.when(q,s,v).done(function(b,d,g){h.after(d),h.after(b),h.after(g),o.attr("for",k),u(k,l,n,m,h,j,e);var i=a(document.getElementById(k)),p=a(document.getElementById(l));p.hide().attr("aria-hidden",!0),f&&require([f],function(b){var d=function(a){t(a,c,k,l,h,j,e,b)};i.on("input keypress",d);var f=a(document.getElementById(n));f.on("click",d)}),r(m,k,h,j)})}}});
\ No newline at end of file
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
index 599a3aff564..da0af864f57 100644
--- a/lib/amd/src/form-autocomplete.js
+++ b/lib/amd/src/form-autocomplete.js
@@ -133,6 +133,15 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
         element.attr('aria-selected', true).attr('id', itemId);
         // Tell the input field it has a new active descendant so the item is announced.
         inputElement.attr('aria-activedescendant', itemId);
+
+        // Scroll it into view.
+        var scrollPos = element.offset().top
+                       - suggestionsElement.offset().top
+                       + suggestionsElement.scrollTop()
+                       - (suggestionsElement.height() / 2);
+        suggestionsElement.animate({
+            scrollTop: scrollPos
+        }, 100);
     };
 
     /**