From 28b3bf9d3ebe446b58b32269cbabb2ab264c58b4 Mon Sep 17 00:00:00 2001
From: Andrew Nicols <andrew@nicols.co.uk>
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/src/form-autocomplete.js              |  6 +-
 lib/behat/behat_field_manager.php             |  5 +-
 .../form_field/behat_form_autocomplete.php    | 93 +++++++++++++------
 .../form_autocomplete_input.mustache          | 26 +++++-
 lib/tests/behat/behat_forms.php               | 13 ++-
 .../core/form_autocomplete_input.mustache     | 26 +++++-
 7 files changed, 129 insertions(+), 42 deletions(-)

diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
index a5218b0f03e..7f2567414f3 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:44,UP:38},g=a.now(),h=function(b,c){var d=a(document.getElementById(c.selectionId)),e=d.children("[aria-selected=true]").length;for(b%=e;b<0;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c.selectionId+"-"+b;return d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g),a.Deferred().resolve()},i=function(b,c,f){var g="form-autocomplete-updateSelectionList-"+c.inputId;M.util.js_pending(g);var i=[],j=a(document.getElementById(c.selectionId)),k=j.attr("aria-activedescendant"),l=!1;k&&(l=a(document.getElementById(k)).attr("data-value")),f.children("option").each(function(b,c){if(a(c).prop("selected")){var d;d=a(c).data("html")?a(c).data("html"):a(c).html(),i.push({label:d,value:a(c).attr("value")})}});var m=a.extend({items:i},b,c);return d.render("core/form_autocomplete_selection",m).then(function(b,e){return d.replaceNodeContents(j,b,e),l!==!1&&j.children("[aria-selected=true]").each(function(b,d){a(d).attr("data-value")===l&&h(b,c)}),l}).then(function(){return M.util.js_complete(g)})["catch"](e.exception)},j=function(a){"undefined"!=typeof M.core_formchangechecker&&M.core_formchangechecker.set_form_changed(),a.change()},k=function(b,c,d,e){var f=a(d).attr("data-value");return b.multiple&&e.children("option").each(function(b,c){a(c).attr("value")==f&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),i(b,c,e).then(function(){j(e)})},l=function(b,c){var d=a(document.getElementById(c.inputId)),e=a(document.getElementById(c.suggestionsId)),f=e.children("[aria-hidden=false]").length;for(b%=f;b<0;)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()},m=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return l(e+1,b)},n=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]");if(!d)return h(0,b);var e=c.children("[aria-selected=true]").index(d);return h(e-1,b)},o=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]"),e=0;return d?(e=c.children("[aria-selected=true]").index(d),e+=1):e=0,h(e,b)},p=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return l(e-1,b)},q=function(b){var c=a(document.getElementById(b.inputId)),d=a(document.getElementById(b.suggestionsId));return c.attr("aria-expanded",!1).attr("aria-activedescendant",b.selectionId),d.hide().attr("aria-hidden",!0),a.Deferred().resolve()},r=function(b,f,g,h){var i="form-autocomplete-updateSuggestions-"+f.inputId;M.util.js_pending(i);var j=a(document.getElementById(f.inputId)),k=a(document.getElementById(f.suggestionsId)),m=!1,n=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(n[n.length]={label:c.innerHTML,value:a(c).attr("value")})});var o=f.caseSensitive?g:g.toLocaleLowerCase(),p=a.extend({options:n},b,f),q=d.render("core/form_autocomplete_suggestions",p).then(function(e,g){return d.replaceNode(k,e,g),k=a(document.getElementById(f.suggestionsId)),k.show().attr("aria-hidden",!1),k.children().each(function(c,d){d=a(d),b.caseSensitive&&d.text().indexOf(o)>-1||!b.caseSensitive&&d.text().toLocaleLowerCase().indexOf(o)>-1?(d.show().attr("aria-hidden",!1),m=!0):d.hide().attr("aria-hidden",!0)}),j.attr("aria-expanded",!0),h.attr("data-notice")?k.html(h.attr("data-notice")):m?b.tags||l(0,f):c.get_string("nosuggestions","form").done(function(a){k.html(a)}),k}).then(function(){return M.util.js_complete(i)})["catch"](e.exception);return q},s=function(b,c,d){var e=a(document.getElementById(c.inputId)),f=e.val(),g=f.split(","),h=!1;return a.each(g,function(c,e){if(e=e.trim(),""!==e&&(b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==e&&(h=!0,a(c).prop("selected",!0))}),!h)){var f=a("<option>");f.append(document.createTextNode(e)),f.attr("value",e),d.append(f),f.prop("selected",!0),f.attr("data-iscustom",!0)}}),i(b,c,d).then(function(){j(d)}).then(function(){e.val("")}).then(function(){return q(c)})},t=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");return b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==g&&a(c).prop("selected",!0)}),i(b,c,d).then(function(){j(d)}).then(function(){return b.closeSuggestionsOnSelect?(e.val(""),q(c)):(e.focus(),r(b,c,e.val(),d))})},u=function(b,c,d,e,f){var g=w("updateAjax"),h=a(b.currentTarget).val();return f.transport(c.selector,h,function(b){var h=f.processResults(c.selector,b),i=[];if(e.children("option").each(function(b,c){c=a(c),c.prop("selected")?i.push(String(c.attr("value"))):c.remove()}),!c.multiple&&0===e.children("option").length){var j=a("<option>");e.append(j)}a.isArray(h)?(a.each(h,function(b,c){if(i.indexOf(String(c.value))===-1){var d=a("<option>");d.append(c.label),d.attr("value",c.value),e.append(d)}}),e.attr("data-notice","")):e.attr("data-notice",h),g.resolve(r(c,d,"",e))},function(a){g.reject(a)}),g},v=function(b,c,d){var g=a(document.getElementById(c.inputId));if(g.on("keydown",function(e){var h=w("addNavigation-"+c.inputId+"-"+e.keyCode);switch(e.keyCode){case f.DOWN:return b.showSuggestions?("true"===g.attr("aria-expanded")?h.resolve(m(c)):!g.val()&&b.ajax?require([b.ajax],function(a){h.resolve(u(e,b,c,d,a))}):h.resolve(r(b,c,g.val(),d)),e.preventDefault(),!1):(h.resolve(),!0);case f.UP:return h.resolve(p(c)),e.preventDefault(),!1;case f.ENTER:var i=a(document.getElementById(c.suggestionsId));return"true"===g.attr("aria-expanded")&&i.children("[aria-selected=true]").length>0?h.resolve(t(b,c,d)):b.tags?h.resolve(s(b,c,d)):h.resolve(),e.preventDefault(),!1;case f.ESCAPE:return"true"===g.attr("aria-expanded")?h.resolve(q(c)):h.resolve(),e.preventDefault(),!1}return h.resolve(),!0}),g.on("keypress",function(a){return a.keyCode!==f.COMMA||(b.tags&&w("keypress-"+a.keyCode).resolve(s(b,c,d)),a.preventDefault(),!1)}),g.closest("form").on("submit",function(){return b.tags&&w("form-autocomplete-submit").resolve(s(b,c,d)),!0}),g.on("blur",function(){var e=w("form-autocomplete-blur");window.setTimeout(function(){var f=a(document.activeElement),h=a.Deferred();f.attr("id")!=g.attr("id")&&a("#"+c.inputId).length&&(b.tags&&h.then(function(){return s(b,c,d)})["catch"](),h.then(function(){return q(c)})["catch"]()),h.then(function(){return e.resolve()})["catch"](),h.resolve()},500)}),b.showSuggestions){var h=a(document.getElementById(c.downArrowId));h.on("click",function(a){var e=w("form-autocomplete-show-suggestions");g.focus(),!g.val()&&b.ajax?require([b.ajax],function(f){e.resolve(u(a,b,c,d,f))}):e.resolve(r(b,c,g.val(),d))})}var i=a(document.getElementById(c.suggestionsId));i.parent().prop("onclick",null).off("click"),i.parent().on("click","[role=option]",function(e){var f=w("form-autocomplete-parent"),g=a(e.currentTarget).closest("[role=option]"),h=a(document.getElementById(c.suggestionsId)),i=h.children("[aria-hidden=false]").index(g);l(i,c).then(function(){return t(b,c,d)}).then(function(){return f.resolve()})["catch"]()});var j=a(document.getElementById(c.selectionId));j.on("click","[role=listitem]",function(e){var f=w("form-autocomplete-clicks");f.resolve(k(b,c,a(e.currentTarget),d))}),j.on("keydown",function(e){var g=w("form-autocomplete-keydown-"+e.keyCode);switch(e.keyCode){case f.DOWN:return e.preventDefault(),g.resolve(o(c)),!1;case f.UP:return e.preventDefault(),g.resolve(n(c)),!1;case f.SPACE:case f.ENTER:var h=a(document.getElementById(c.selectionId)).children("[data-active-selection=true]");return h&&(e.preventDefault(),g.resolve(k(b,c,h,d))),!1}return g.resolve(),!0}),b.showSuggestions&&(b.ajax?require([b.ajax],function(a){var f=null,h=!1,i="autocomplete-throttledhandler",j=function(g){f=null,h=!0,u(g,b,c,d,a).then(function(){return null===f&&M.util.js_complete(i),h=!1,arguments[0]})["catch"](e.exception)},k=function(a){return window.clearTimeout(f),h?void(f=window.setTimeout(k.bind(this,a),100)):(null===f&&M.util.js_pending(i),void(f=window.setTimeout(j.bind(this,a),300)))};g.on("input",k)}):g.on("input",function(e){var f=a(e.currentTarget).val(),g=a(e.currentTarget).data("last-value");g!==f&&r(b,c,f,d),a(e.currentTarget).data("last-value",f)}))},w=function(b){var c="form-autocomplete:"+b;M.util.js_pending(c);var d=a.Deferred();return d.then(function(){return M.util.js_complete(c),arguments[0]})["catch"](e.exception),d};return{enhance:function(f,h,j,k,l,m,n,o){var p={selector:f,tags:!1,ajax:!1,placeholder:k,caseSensitive:!1,showSuggestions:!0,noSelectionString:n},q="autocomplete-setup-"+f;M.util.js_pending(q),"undefined"!=typeof h&&(p.tags=h),"undefined"!=typeof j&&(p.ajax=j),"undefined"!=typeof l&&(p.caseSensitive=l),"undefined"!=typeof m&&(p.showSuggestions=m),"undefined"==typeof n&&c.get_string("noselection","form").done(function(a){p.noSelectionString=a}).fail(e.exception);var r=a(f);if(!r)return b.debug("Selector not found: "+f),M.util.js_complete(q),!1;r.css("visibility","hidden").attr("aria-hidden",!0);var s={selectId:r.attr("id"),inputId:"form_autocomplete_input-"+g,suggestionsId:"form_autocomplete_suggestions-"+g,selectionId:"form_autocomplete_selection-"+g,downArrowId:"form_autocomplete_downarrow-"+g};g++,p.multiple=r.attr("multiple"),"undefined"!=typeof o?p.closeSuggestionsOnSelect=o:p.closeSuggestionsOnSelect=!p.multiple;var t=a("[for="+s.selectId+"]"),u=[];r.children("option").each(function(b,c){u[b]={label:c.innerHTML,value:a(c).attr("value")}});var w=a.extend({},p,s);w.options=u,w.items=[];var x="",y=d.render("core/form_autocomplete_input",w).then(function(a,b){return x+=b,a}),z=d.render("core/form_autocomplete_suggestions",w).then(function(a,b){return x+=b,a}),A=d.render("core/form_autocomplete_selection",w).then(function(a,b){return x+=b,a});return a.when(y,z,A).then(function(b,c,e){r.hide(),r.after(c),r.after(b),r.after(e),d.runTemplateJS(x),t.attr("for",s.inputId),v(p,s,r);var f=a(document.getElementById(s.suggestionsId));f.hide().attr("aria-hidden",!0)}).then(function(){return i(p,s,r)}).then(function(){return M.util.js_complete(q)})["catch"](function(a){M.util.js_complete(q),e.exception(a)})}}});
\ 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:44,UP:38},g=a.now(),h=function(b,c){var d=a(document.getElementById(c.selectionId)),e=d.children("[aria-selected=true]").length;for(b%=e;b<0;)b+=e;var f=a(d.children("[aria-selected=true]").get(b)),g=c.selectionId+"-"+b;return d.children().attr("data-active-selection",!1).attr("id",""),f.attr("data-active-selection",!0).attr("id",g),d.attr("aria-activedescendant",g),a.Deferred().resolve()},i=function(b,c,f){var g="form-autocomplete-updateSelectionList-"+c.inputId;M.util.js_pending(g);var i=[],j=a(document.getElementById(c.selectionId)),k=j.attr("aria-activedescendant"),l=!1;k&&(l=a(document.getElementById(k)).attr("data-value")),f.children("option").each(function(b,c){if(a(c).prop("selected")){var d;d=a(c).data("html")?a(c).data("html"):a(c).html(),i.push({label:d,value:a(c).attr("value")})}});var m=a.extend({items:i},b,c);return d.render("core/form_autocomplete_selection",m).then(function(b,e){return d.replaceNodeContents(j,b,e),l!==!1&&j.children("[aria-selected=true]").each(function(b,d){a(d).attr("data-value")===l&&h(b,c)}),l}).then(function(){return M.util.js_complete(g)})["catch"](e.exception)},j=function(a){"undefined"!=typeof M.core_formchangechecker&&M.core_formchangechecker.set_form_changed(),a.change()},k=function(b,c,d,e){var f=a(d).attr("data-value");return b.multiple&&e.children("option").each(function(b,c){a(c).attr("value")==f&&(a(c).prop("selected",!1),a(c).attr("data-iscustom")&&a(c).remove())}),i(b,c,e).then(function(){j(e)})},l=function(b,c){var d=a(document.getElementById(c.inputId)),e=a(document.getElementById(c.suggestionsId)),f=e.children("[aria-hidden=false]").length;for(b%=f;b<0;)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()},m=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return l(e+1,b)},n=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]");if(!d)return h(0,b);var e=c.children("[aria-selected=true]").index(d);return h(e-1,b)},o=function(b){var c=a(document.getElementById(b.selectionId)),d=c.children("[data-active-selection=true]"),e=0;return d?(e=c.children("[aria-selected=true]").index(d),e+=1):e=0,h(e,b)},p=function(b){var c=a(document.getElementById(b.suggestionsId)),d=c.children("[aria-selected=true]"),e=c.children("[aria-hidden=false]").index(d);return l(e-1,b)},q=function(b){var c=a(document.getElementById(b.inputId)),d=a(document.getElementById(b.suggestionsId));return c.attr("aria-expanded",!1).attr("aria-activedescendant",b.selectionId),d.hide().attr("aria-hidden",!0),a.Deferred().resolve()},r=function(b,f,g,h){var i="form-autocomplete-updateSuggestions-"+f.inputId;M.util.js_pending(i);var j=a(document.getElementById(f.inputId)),k=a(document.getElementById(f.suggestionsId)),m=!1,n=[];h.children("option").each(function(b,c){a(c).prop("selected")!==!0&&(n[n.length]={label:c.innerHTML,value:a(c).attr("value")})});var o=f.caseSensitive?g:g.toLocaleLowerCase(),p=a.extend({options:n},b,f),q=d.render("core/form_autocomplete_suggestions",p).then(function(e,g){return d.replaceNode(k,e,g),k=a(document.getElementById(f.suggestionsId)),k.show().attr("aria-hidden",!1),k.children().each(function(c,d){d=a(d),b.caseSensitive&&d.text().indexOf(o)>-1||!b.caseSensitive&&d.text().toLocaleLowerCase().indexOf(o)>-1?(d.show().attr("aria-hidden",!1),m=!0):d.hide().attr("aria-hidden",!0)}),j.attr("aria-expanded",!0),h.attr("data-notice")?k.html(h.attr("data-notice")):m?b.tags||l(0,f):c.get_string("nosuggestions","form").done(function(a){k.html(a)}),k}).then(function(){return M.util.js_complete(i)})["catch"](e.exception);return q},s=function(b,c,d){var e=a(document.getElementById(c.inputId)),f=e.val(),g=f.split(","),h=!1;return a.each(g,function(c,e){if(e=e.trim(),""!==e&&(b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==e&&(h=!0,a(c).prop("selected",!0))}),!h)){var f=a("<option>");f.append(document.createTextNode(e)),f.attr("value",e),d.append(f),f.prop("selected",!0),f.attr("data-iscustom",!0)}}),i(b,c,d).then(function(){j(d)}).then(function(){e.val("")}).then(function(){return q(c)})},t=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");return b.multiple||d.children("option").prop("selected",!1),d.children("option").each(function(b,c){a(c).attr("value")==g&&a(c).prop("selected",!0)}),i(b,c,d).then(function(){j(d)}).then(function(){return b.closeSuggestionsOnSelect?(e.val(""),q(c)):(e.focus(),r(b,c,e.val(),d))})},u=function(b,c,d,e,f){var g=w("updateAjax"),h=a(b.currentTarget).val();return f.transport(c.selector,h,function(b){var h=f.processResults(c.selector,b),i=[];if(e.children("option").each(function(b,c){c=a(c),c.prop("selected")?i.push(String(c.attr("value"))):c.remove()}),!c.multiple&&0===e.children("option").length){var j=a("<option>");e.append(j)}a.isArray(h)?(a.each(h,function(b,c){if(i.indexOf(String(c.value))===-1){var d=a("<option>");d.append(c.label),d.attr("value",c.value),e.append(d)}}),e.attr("data-notice","")):e.attr("data-notice",h),g.resolve(r(c,d,"",e))},function(a){g.reject(a)}),g},v=function(b,c,d){var g=a(document.getElementById(c.inputId));if(g.on("keydown",function(e){var h=w("addNavigation-"+c.inputId+"-"+e.keyCode);switch(e.keyCode){case f.DOWN:return b.showSuggestions?("true"===g.attr("aria-expanded")?h.resolve(m(c)):!g.val()&&b.ajax?require([b.ajax],function(a){h.resolve(u(e,b,c,d,a))}):h.resolve(r(b,c,g.val(),d)),e.preventDefault(),!1):(h.resolve(),!0);case f.UP:return h.resolve(p(c)),e.preventDefault(),!1;case f.ENTER:var i=a(document.getElementById(c.suggestionsId));return"true"===g.attr("aria-expanded")&&i.children("[aria-selected=true]").length>0?h.resolve(t(b,c,d)):b.tags?h.resolve(s(b,c,d)):h.resolve(),e.preventDefault(),!1;case f.ESCAPE:return"true"===g.attr("aria-expanded")?h.resolve(q(c)):h.resolve(),e.preventDefault(),!1}return h.resolve(),!0}),g.on("keypress",function(a){return a.keyCode!==f.COMMA||(b.tags&&w("keypress-"+a.keyCode).resolve(s(b,c,d)),a.preventDefault(),!1)}),g.closest("form").on("submit",function(){return b.tags&&w("form-autocomplete-submit").resolve(s(b,c,d)),!0}),g.on("blur",function(){var e=w("form-autocomplete-blur");window.setTimeout(function(){var f=a(document.activeElement),h=a.Deferred();f.attr("id")!=g.attr("id")&&a("#"+c.inputId).length&&(b.tags&&h.then(function(){return s(b,c,d)})["catch"](),h.then(function(){return q(c)})["catch"]()),h.then(function(){return e.resolve()})["catch"](),h.resolve()},500)}),b.showSuggestions){var h=a(document.getElementById(c.downArrowId));h.on("click",function(a){var e=w("form-autocomplete-show-suggestions");g.focus(),!g.val()&&b.ajax?require([b.ajax],function(f){e.resolve(u(a,b,c,d,f))}):e.resolve(r(b,c,g.val(),d))})}var i=a(document.getElementById(c.suggestionsId));i.parent().prop("onclick",null).off("click"),i.parent().on("click","[role=option]",function(e){var f=w("form-autocomplete-parent"),g=a(e.currentTarget).closest("[role=option]"),h=a(document.getElementById(c.suggestionsId)),i=h.children("[aria-hidden=false]").index(g);l(i,c).then(function(){return t(b,c,d)}).then(function(){return f.resolve()})["catch"]()});var j=a(document.getElementById(c.selectionId));j.on("click","[role=listitem]",function(e){var f=w("form-autocomplete-clicks");f.resolve(k(b,c,a(e.currentTarget),d))}),j.on("keydown",function(e){var g=w("form-autocomplete-keydown-"+e.keyCode);switch(e.keyCode){case f.DOWN:return e.preventDefault(),g.resolve(o(c)),!1;case f.UP:return e.preventDefault(),g.resolve(n(c)),!1;case f.SPACE:case f.ENTER:var h=a(document.getElementById(c.selectionId)).children("[data-active-selection=true]");return h&&(e.preventDefault(),g.resolve(k(b,c,h,d))),!1}return g.resolve(),!0}),b.showSuggestions&&(b.ajax?require([b.ajax],function(a){var f=null,h=!1,i="autocomplete-throttledhandler",j=function(g){f=null,h=!0,u(g,b,c,d,a).then(function(){return null===f&&M.util.js_complete(i),h=!1,arguments[0]})["catch"](e.exception)},k=function(a){return window.clearTimeout(f),h?void(f=window.setTimeout(k.bind(this,a),100)):(null===f&&M.util.js_pending(i),void(f=window.setTimeout(j.bind(this,a),300)))};g.on("input",k)}):g.on("input",function(e){var f=a(e.currentTarget).val(),g=a(e.currentTarget).data("last-value");g!==f&&r(b,c,f,d),a(e.currentTarget).data("last-value",f)}))},w=function(b){var c="form-autocomplete:"+b;M.util.js_pending(c);var d=a.Deferred();return d.then(function(){return M.util.js_complete(c),arguments[0]})["catch"](e.exception),d};return{enhance:function(f,h,j,k,l,m,n,o){var p={selector:f,tags:!1,ajax:!1,placeholder:k,caseSensitive:!1,showSuggestions:!0,noSelectionString:n},q="autocomplete-setup-"+f;M.util.js_pending(q),"undefined"!=typeof h&&(p.tags=h),"undefined"!=typeof j&&(p.ajax=j),"undefined"!=typeof l&&(p.caseSensitive=l),"undefined"!=typeof m&&(p.showSuggestions=m),"undefined"==typeof n&&c.get_string("noselection","form").done(function(a){p.noSelectionString=a}).fail(e.exception);var r=a(f);if(!r)return b.debug("Selector not found: "+f),M.util.js_complete(q),!1;r.css("visibility","hidden").attr("aria-hidden",!0);var s={selectId:r.attr("id"),inputId:"form_autocomplete_input-"+g,suggestionsId:"form_autocomplete_suggestions-"+g,selectionId:"form_autocomplete_selection-"+g,downArrowId:"form_autocomplete_downarrow-"+g};g++,p.multiple=!!r.attr("multiple"),"undefined"!=typeof o?p.closeSuggestionsOnSelect=o:p.closeSuggestionsOnSelect=!p.multiple;var t=a("[for="+s.selectId+"]"),u=[];r.children("option").each(function(b,c){u[b]={label:c.innerHTML,value:a(c).attr("value")}});var w=a.extend({},p,s);w.options=u,w.items=[];var x="",y=d.render("core/form_autocomplete_input",w).then(function(a,b){return x+=b,a}),z=d.render("core/form_autocomplete_suggestions",w).then(function(a,b){return x+=b,a}),A=d.render("core/form_autocomplete_selection",w).then(function(a,b){return x+=b,a});return a.when(y,z,A).then(function(b,c,e){r.hide(),a(b).find("input").attr("data-fieldtype","autocomplete"),r.after(c),r.after(b),r.after(e),d.runTemplateJS(x),t.attr("for",s.inputId),v(p,s,r);var f=a(document.getElementById(s.suggestionsId));f.hide().attr("aria-hidden",!0)}).then(function(){return i(p,s,r)}).then(function(){return M.util.js_complete(q)})["catch"](function(a){M.util.js_complete(q),e.exception(a)})}}});
\ No newline at end of file
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
index c00c887ac6c..39b8f02f688 100644
--- a/lib/amd/src/form-autocomplete.js
+++ b/lib/amd/src/form-autocomplete.js
@@ -1001,7 +1001,7 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             // Increment the unique counter so we don't get duplicates ever.
             uniqueId++;
 
-            options.multiple = originalSelect.attr('multiple');
+            options.multiple = !!originalSelect.attr('multiple');
 
             if (typeof closeSuggestionsOnSelect !== "undefined") {
                 options.closeSuggestionsOnSelect = closeSuggestionsOnSelect;
@@ -1043,6 +1043,10 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             return $.when(renderInput, renderDatalist, renderSelection)
             .then(function(input, suggestions, selection) {
                 originalSelect.hide();
+
+                // Ensure that the data-fieldtype is set for behat.
+                $(input).find('input').attr('data-fieldtype', 'autocomplete');
+
                 originalSelect.after(suggestions);
                 originalSelect.after(input);
                 originalSelect.after(selection);
diff --git a/lib/behat/behat_field_manager.php b/lib/behat/behat_field_manager.php
index dcef9e27b5e..c55c0e61ee7 100644
--- a/lib/behat/behat_field_manager.php
+++ b/lib/behat/behat_field_manager.php
@@ -101,7 +101,6 @@ class behat_field_manager {
      * @return behat_form_field
      */
     public static function get_field_instance($type, NodeElement $fieldnode, Session $session) {
-
         global $CFG;
 
         // If the field is not part of a moodleform, we should still try to find out
@@ -152,6 +151,10 @@ class behat_field_manager {
             $type = $fieldnode->getAttribute('type');
             switch ($type) {
                 case 'text':
+                    if ($fieldtype = $fieldnode->getAttribute('data-fieldtype')) {
+                        return self::normalise_fieldtype($fieldtype);
+                    }
+                    return 'text';
                 case 'password':
                 case 'email':
                 case 'file':
diff --git a/lib/behat/form_field/behat_form_autocomplete.php b/lib/behat/form_field/behat_form_autocomplete.php
index d6b29c20fac..52eb40c9eea 100644
--- a/lib/behat/form_field/behat_form_autocomplete.php
+++ b/lib/behat/form_field/behat_form_autocomplete.php
@@ -48,44 +48,77 @@ class behat_form_autocomplete extends behat_form_text {
             throw new coding_exception('Setting the value of an autocomplete field requires javascript.');
         }
 
-        // Set the value of the autocomplete's input.
-        // If this autocomplete offers suggestions then these should be fetched by setting the value and waiting for the
-        // JS to finish fetching those suggestions.
+        // Clear all current selections.
+        $rootnode = $this->field->getParent()->getParent();
+        $selections = $rootnode->findAll('css', '.form-autocomplete-selection > [role=listitem]');
+        foreach (array_reverse($selections) as $selection) {
+            $selection->click();
+            $this->wait_for_pending_js();
+        }
 
-        $istagelement = $this->field->hasAttribute('data-tags') && $this->field->getAttribute('data-tags');
+        $allowscreation = $this->field->hasAttribute('data-tags') && !empty($this->field->getAttribute('data-tags'));
+        $hasmultiple = $this->field->hasAttribute('data-multiple') && !empty($this->field->getAttribute('data-multiple'));
 
-        if ($istagelement && false !== strpos($value, ',')) {
-            // Commas have a special meaning as a value separator in 'tag' autocomplete elements.
+        if ($hasmultiple && false !== strpos($value, ',')) {
+            // Commas have a special meaning as a value separator in 'multiple' autocomplete elements.
             // To handle this we break the value up by comma, and enter it in chunks.
             $values = explode(',', $value);
 
             while ($value = array_shift($values)) {
-                $this->set_value($value);
+                $this->add_value(trim($value), $allowscreation);
             }
         } else {
-            $this->field->setValue($value);
-            $this->wait_for_pending_js();
-
-            // If the autocomplete found suggestions, then it will have:
-            // 1) marked itself as expanded; and
-            // 2) have an aria-selected suggestion in the list.
-            $expanded = $this->field->getAttribute('aria-expanded');
-            $suggestion = $this->field->getParent()->find('css', '.form-autocomplete-suggestions > [aria-selected="true"]');
-
-            if ($expanded && null !== $suggestion) {
-                // A suggestion was found.
-                // Click on the first item in the list.
-                $suggestion->click();
-            } else {
-                // Press the return key to create a new tag.
-                behat_base::type_keys($this->session, [behat_keys::ENTER]);
-            }
-            $this->wait_for_pending_js();
-
-            // Note: This does not make use of the `type_keys` API because it can cause some modals to close.
-            // This is not an issue in later versions of Moodle where the autocomplete handling has been updated.
-            $this->key_press(27);
-            $this->wait_for_pending_js();
+            $this->add_value(trim($value), $allowscreation);
         }
     }
+
+    /**
+     * Add a value to the autocomplete.
+     *
+     * @param   string $value
+     * @param   bool $allowscreation
+     */
+    protected function add_value(string $value, bool $allowscreation) {
+        $value = trim($value);
+
+        // Click into the field.
+        $this->field->click();
+
+        // Remove any existing text.
+        do {
+            behat_base::type_keys($this->session, [behat_keys::BACKSPACE, behat_keys::DELETE]);
+        } while (strlen($this->field->getValue()) > 0);
+        $this->wait_for_pending_js();
+
+        // Type in the new value.
+        behat_base::type_keys($this->session, str_split($value));
+        $this->wait_for_pending_js();
+
+        // If the autocomplete found suggestions, then it will have:
+        // 1) marked itself as expanded; and
+        // 2) have an aria-selected suggestion in the list.
+        $expanded = $this->field->getAttribute('aria-expanded');
+        $suggestion = $this->field->getParent()->getParent()->find('css', '.form-autocomplete-suggestions > [aria-selected="true"]');
+
+        if ($expanded && null !== $suggestion) {
+            // A suggestion was found.
+            // Click on the first item in the list.
+            $suggestion->click();
+        } else if ($allowscreation) {
+            // Press the return key to create a new entry.
+            behat_base::type_keys($this->session, [behat_keys::ENTER]);
+        } else {
+            throw new \InvalidArgumentException(
+                "Unable to find '{$value}' in the list of options, and unable to create a new option"
+            );
+        }
+
+        $this->wait_for_pending_js();
+
+        // Press the escape to close the autocomplete suggestions list.
+        // Note: This does not make use of the `type_keys` API because it can cause some modals to close.
+        // This is not an issue in later versions of Moodle where the autocomplete handling has been updated.
+        $this->key_press(27);
+        $this->wait_for_pending_js();
+    }
 }
diff --git a/lib/templates/form_autocomplete_input.mustache b/lib/templates/form_autocomplete_input.mustache
index 805b1622fa6..24c530c9620 100644
--- a/lib/templates/form_autocomplete_input.mustache
+++ b/lib/templates/form_autocomplete_input.mustache
@@ -36,10 +36,32 @@
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
 {{#showSuggestions}}
-<input type="text" id="{{inputId}}" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
+<input type="text"{{!
+    }} id="{{inputId}}"{{!
+    }} class="form-control"{{!
+    }} list="{{suggestionsId}}"{{!
+    }} placeholder="{{placeholder}}"{{!
+    }} role="combobox"{{!
+    }} aria-expanded="false"{{!
+    }} autocomplete="off"{{!
+    }} autocorrect="off"{{!
+    }} autocapitalize="off"{{!
+    }} aria-autocomplete="list"{{!
+    }} aria-owns="{{suggestionsId}} {{selectionId}}"{{!
+    }}{{#tags}} data-tags="1"{{/tags}}{{!
+    }}{{#multiple}} data-multiple="multiple"{{/multiple}}{{!
+    }}>
+    <span class="form-autocomplete-downarrow position-absolute p-1" id="{{downArrowId}}">&#x25BC;</span>
 {{/showSuggestions}}
 {{^showSuggestions}}
-<input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
+<input type="text"{{!
+    }} id="{{inputId}}"{{!
+    }} placeholder="{{placeholder}}"{{!
+    }} role="textbox"{{!
+    }} aria-owns="{{selectionId}}"{{!
+    }}{{#tags}} data-tags="1"{{/tags}}{{!
+    }}{{#multiple}} data-multiple="multiple"{{/multiple}}{{!
+    }}>
 {{/showSuggestions}}
 
 {{#js}}
diff --git a/lib/tests/behat/behat_forms.php b/lib/tests/behat/behat_forms.php
index ccba7cd8111..d7877a95ee9 100644
--- a/lib/tests/behat/behat_forms.php
+++ b/lib/tests/behat/behat_forms.php
@@ -693,18 +693,21 @@ class behat_forms extends behat_base {
         $xpathtarget = "//ul[@class='form-autocomplete-suggestions']//*[contains(concat('|', string(.), '|'),'|" . $item . "|')]";
 
         $this->execute('behat_general::i_click_on', [$xpathtarget, 'xpath_element']);
-
-        $this->execute('behat_general::i_press_key_in_element', ['13', 'body', 'xpath_element']);
     }
 
     /**
      * Open the auto-complete suggestions list (Assuming there is only one on the page.).
      *
-     * @Given /^I open the autocomplete suggestions list$/
+     * @Given I open the autocomplete suggestions list
+     * @Given I open the autocomplete suggestions list in the :container :containertype
      */
-    public function i_open_the_autocomplete_suggestions_list() {
+    public function i_open_the_autocomplete_suggestions_list($container = null, $containertype = null) {
         $csstarget = ".form-autocomplete-downarrow";
-        $this->execute('behat_general::i_click_on', [$csstarget, 'css_element']);
+        if ($container && $containertype) {
+            $this->execute('behat_general::i_click_on', [$csstarget, 'css_element', $container, $containertype]);
+        } else {
+            $this->execute('behat_general::i_click_on', [$csstarget, 'css_element']);
+        }
     }
 
     /**
diff --git a/theme/boost/templates/core/form_autocomplete_input.mustache b/theme/boost/templates/core/form_autocomplete_input.mustache
index ea4614dcd9a..1aa7378de9e 100644
--- a/theme/boost/templates/core/form_autocomplete_input.mustache
+++ b/theme/boost/templates/core/form_autocomplete_input.mustache
@@ -36,10 +36,32 @@
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
 {{#showSuggestions}}
-<input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
+<input type="text"{{!
+    }} id="{{inputId}}"{{!
+    }} class="form-control"{{!
+    }} list="{{suggestionsId}}"{{!
+    }} placeholder="{{placeholder}}"{{!
+    }} role="combobox"{{!
+    }} aria-expanded="false"{{!
+    }} autocomplete="off"{{!
+    }} autocorrect="off"{{!
+    }} autocapitalize="off"{{!
+    }} aria-autocomplete="list"{{!
+    }} aria-owns="{{suggestionsId}} {{selectionId}}"{{!
+    }}{{#tags}} data-tags="1"{{/tags}}{{!
+    }}{{#multiple}} data-multiple="multiple"{{/multiple}}{{!
+    }}>
+    <span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
 {{/showSuggestions}}
 {{^showSuggestions}}
-<input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}" {{#tags}}data-tags="1"{{/tags}}/>
+<input type="text"{{!
+    }} id="{{inputId}}"{{!
+    }} placeholder="{{placeholder}}"{{!
+    }} role="textbox"{{!
+    }} aria-owns="{{selectionId}}"{{!
+    }}{{#tags}} data-tags="1"{{/tags}}{{!
+    }}{{#multiple}} data-multiple="multiple"{{/multiple}}{{!
+    }}>
 {{/showSuggestions}}
 
 {{#js}}