MDL-67447 form: Fix the duplicate autocomplete selection node

When the autocomplete selection is updated, the content of the selection
wrapper is replaced with the new list of selected items. We must replace
only the content of the selection wrapper and not to nest it into
itself.

diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
index 45a80ae..7de1001 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js and b/lib/amd/build/form-autocomplete.min.js differ

diff --git a/lib/amd/build/form-autocomplete.min.js.map b/lib/amd/build/form-autocomplete.min.js.map
index 2a0d468..98bedda 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js.map and b/lib/amd/build/form-autocomplete.min.js.map differ

diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
index a3be9b6..2cffd17 100644 (file)
--- a/lib/amd/src/form-autocomplete.js
+++ b/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);

diff --git a/lib/templates/form_autocomplete_selection.mustache b/lib/templates/form_autocomplete_selection.mustache
index 33c7b6c..932ad37 100644 (file)
--- a/lib/templates/form_autocomplete_selection.mustache
+++ b/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>

diff --git a/lib/templates/form_autocomplete_selection_items.mustache b/lib/templates/form_autocomplete_selection_items.mustache
new file mode 100644 (file)
index 0000000..22ff5f2
--- /dev/null
+++ b/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}}