From 1b87f634a8a60ef2c2d35131f09e4487874707b3 Mon Sep 17 00:00:00 2001 From: Andrew Nicols Date: Mon, 15 Jun 2020 09:44:39 +0800 Subject: [PATCH] MDL-69107 form_autocomplete: Rewrite item selection The form_autocomplete is essentially a custom element. Unfortunately the `setValue()` function in Mink has undesired actions so it is necessary to write our own handling for it. The standard Mink `setValue()` function focuses the element, sets a value, and then blurs the element. In the case of the autocomplete this can cause the autocomplete suggestions list to be closed in some situations. Instead of using the setValue we click, and type the value, but do not immediately blur. --- lib/amd/build/form-autocomplete.min.js | 2 +- lib/amd/build/form-autocomplete.min.js.map | 2 +- lib/amd/src/form-autocomplete.js | 3 + lib/behat/behat_field_manager.php | 5 +- .../form_field/behat_form_autocomplete.php | 90 +++++++++++++------ .../form_autocomplete_input.mustache | 26 +++++- lib/tests/behat/behat_forms.php | 2 - 7 files changed, 94 insertions(+), 36 deletions(-) diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js index f30cb5d1a84..6c8f3cfd783 100644 --- a/lib/amd/build/form-autocomplete.min.js +++ b/lib/amd/build/form-autocomplete.min.js @@ -1,2 +1,2 @@ -define ("core/form-autocomplete",["jquery","core/log","core/str","core/templates","core/notification","core/loadingicon"],function(a,b,c,d,f,g){var h={DOWN:40,ENTER:13,SPACE:32,ESCAPE:27,COMMA:44,UP:38,LEFT:37,RIGHT:39},i=Date.now(),j=function(b,c){var d=a(document.getElementById(c.selectionId)),e=d.children("[aria-selected=true]").length;b=b%e;while(0>b){b+=e}var f=a(d.children("[aria-selected=true]").get(b)),g=c.selectionId+"-"+b;d.children().attr("data-active-selection",null).attr("id","");f.attr("data-active-selection",!0).attr("id",g);d.attr("aria-activedescendant",g);d.attr("data-active-value",f.attr("data-value"));return a.Deferred().resolve()},k=function(b){var c=a(document.getElementById(b.selectionId)),d=c.attr("aria-activedescendant");if(d){var e=a(document.getElementById(d));if(e.length){return e}}var f=c.attr("data-active-value");return c.find("[data-value=\""+f+"\"]")},l=function(b){var c=k(b),d=c.attr("data-value"),e=a(document.getElementById(b.selectionId));if(d){var f=e.find("[aria-selected=true]").index(c);if(-1!==f){j(f,b);return}}j(0,b)},m=function(b,c,e){var g="form-autocomplete-updateSelectionList-"+c.inputId;M.util.js_pending(g);var h=[],i=a(document.getElementById(c.selectionId));e.children("option").each(function(b,c){if(a(c).prop("selected")){var d;if(a(c).data("html")){d=a(c).data("html")}else{d=a(c).html()}if(""!==d){h.push({label:d,value:a(c).attr("value")})}}});if(!n(c,h)){M.util.js_complete(g);return Promise.resolve()}c.items=h;var j=a.extend(b,c);return d.render(b.templates.items,j).then(function(a,b){d.replaceNodeContents(i,a,b);l(c)}).then(function(){return M.util.js_complete(g)}).catch(f.exception)},n=function(a,b){if(a.items.length!==b.length){return!0}return 0b){b+=f}var g=a(e.children("[aria-hidden=false]").get(b)),h=a(e.children("[role=option]")).index(g),i=c.suggestionsId+"-"+h;e.children().attr("aria-selected",!1).attr("id","");g.attr("aria-selected",!0).attr("id",i);d.attr("aria-activedescendant",i);var j=g.offset().top-e.offset().top+e.scrollTop()-e.height()/2;return e.animate({scrollTop:j},100).promise()},r=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return q(e+1,b)},s=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection]");if(!d){return j(0,b)}var e=c.children("[aria-selected=true]").index(d);return j(e-1,b)},t=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection]"),e=0;if(d){e=c.children("[aria-selected=true]").index(d);e=e+1}else{e=0}return j(e,b)},u=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return q(e-1,b)},v=function(b){var c=a(document.getElementById(b.inputId)),d=a(document.getElementById(b.suggestionsId));if("true"===c.attr("aria-expanded")){c.attr("aria-expanded",!1)}c.attr("aria-activedescendant",b.selectionId);d.hide().attr("aria-hidden",!0);return a.Deferred().resolve()},w=function(b,e,g,h){var i="form-autocomplete-updateSuggestions-"+e.inputId;M.util.js_pending(i);var j=a(document.getElementById(e.inputId)),k=a(document.getElementById(e.suggestionsId)),l=!1,m=[];h.children("option").each(function(b,c){if(!0!==a(c).prop("selected")){m[m.length]={label:c.innerHTML,value:a(c).attr("value")}}});var n=e.caseSensitive?g:g.toLocaleLowerCase(),o=a.extend({options:m},b,e),p=d.render("core/form_autocomplete_suggestions",o).then(function(f,g){d.replaceNode(k,f,g);k=a(document.getElementById(e.suggestionsId));k.show().attr("aria-hidden",!1);k.children().each(function(c,d){d=a(d);if(b.caseSensitive&&-1");f.append(document.createTextNode(e));f.attr("value",e);d.append(f);f.prop("selected",!0);f.attr("data-iscustom",!0)}}});return m(b,c,d).then(function(){o(d)}).then(function(){e.val("")}).then(function(){return v(c)})},y=function(b,c,d){var e=a(document.getElementById(c.inputId)),f=a(document.getElementById(c.suggestionsId)),g=f.children("[aria-selected=true]").attr("data-value");if(!b.multiple){d.children("option").prop("selected",!1)}d.children("option").each(function(b,c){if(a(c).attr("value")==g){a(c).prop("selected",!0)}});return m(b,c,d).then(function(){o(d)}).then(function(){if(b.closeSuggestionsOnSelect){e.val("");return v(c)}else{e.focus();return w(b,c,e.val(),d)}})},z=function(b,c,d,e,f){var h=B("updateAjax"),i=a(document.getElementById(d.selectId)).parent();g.addIconToContainerRemoveOnCompletion(i,h);var j=a(b.currentTarget).val();f.transport(c.selector,j,function(b){var g=f.processResults(c.selector,b),i=[];if(!c.multiple){e.children("option").remove()}e.children("option").each(function(b,c){c=a(c);if(!c.prop("selected")){c.remove()}else{i.push(c.attr("value")+"")}});if(!c.multiple&&0===e.children("option").length){var j=a("