Merge branch 'MDL-67447-master-autocomplete' of git://github.com/mudrd8mz/moodle

lib/amd/src/form-autocomplete.js

@@ -114,7 +114,7 @@ function($, log, str, templates, notification, LoadingIcon) {
         });
         var context = $.extend({items: items}, options, state);
         // Render the template.
-        return templates.render('core/form_autocomplete_selection', context)
+        return templates.render('core/form_autocomplete_selection_items', context)
         .then(function(html, js) {
             // Add it to the page.
             templates.replaceNodeContents(newSelection, html, js);

lib/templates/form_autocomplete_selection.mustache

@@ -17,7 +17,7 @@
 {{!
     @template core/form_autocomplete_selection
 
-    Moodle template for the currently selected items in an autocomplate form element.
+    Moodle template for the wrapper of currently selected items in an autocomplate form element.
 
     Classes required for JS:
     * none
@@ -28,8 +28,8 @@
     Context variables required for this template:
     * multiple True if this field allows multiple selections
     * selectionId The dom id of the current selection list.
-    * items List of items with label and value fields.
-    * noSelectionString String to use when no items are selected
+    * items List of items with label and value fields (used by the partial).
+    * noSelectionString String to use when no items are selected (used by the partial).
 
     Example context (json):
     { "multiple": true, "selectionId": 1, "items": [
@@ -39,12 +39,5 @@
 }}
 <div class="form-autocomplete-selection w-100 {{#multiple}}form-autocomplete-multiple{{/multiple}}" id="{{selectionId}}" role="list" aria-atomic="true" {{#multiple}}tabindex="0" aria-multiselectable="true"{{/multiple}}>
 <span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
-    {{#items}}
-        <span role="listitem" data-value="{{value}}" aria-selected="true" class="badge badge-info mb-3 mr-1" style="font-size: 100%">
-            <span aria-hidden="true">× </span>{{{label}}}
-        </span>
-    {{/items}}
-    {{^items}}
-        <span class="mb-3 mr-1">{{noSelectionString}}</span>
-    {{/items}}
+    {{> core/form_autocomplete_selection_items }}
 </div>

lib/templates/form_autocomplete_selection_items.mustache

@@ -0,0 +1,47 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/form_autocomplete_selection_items
+
+    Moodle template for the currently selected items in an autocomplate form element.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-value
+
+    Context variables required for this template:
+    * items List of items with label and value fields.
+    *   - value Value of the selected item.
+    *   - label HTML representing the value.
+    * noSelectionString String to use when no items are selected
+
+    Example context (json):
+    { "items": [
+        { "label": "Item label with <strong>tags</strong>", "value": "5" },
+        { "label": "Another item label with <strong>tags</strong>", "value": "4" }
+    ], "noSelectionString": "No selection" }
+}}
+{{#items}}
+    <span role="listitem" data-value="{{value}}" aria-selected="true" class="badge badge-info mb-3 mr-1" style="font-size: 100%">
+        <span aria-hidden="true">× </span>{{{label}}}
+    </span>
+{{/items}}
+{{^items}}
+    <span class="mb-3 mr-1">{{noSelectionString}}</span>
+{{/items}}