MDL-63125 forms: allow item removal from single-select autocomplete.
authorPaul Holden <paulh@moodle.com>
Mon, 12 Aug 2019 16:21:27 +0000 (17:21 +0100)
committerPaul Holden <paulh@moodle.com>
Mon, 14 Oct 2019 16:07:59 +0000 (17:07 +0100)
lib/amd/build/form-autocomplete.min.js
lib/amd/build/form-autocomplete.min.js.map
lib/amd/src/form-autocomplete.js
lib/templates/form_autocomplete_selection.mustache
theme/boost/scss/moodle/forms.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index 1688749..45a80ae 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js and b/lib/amd/build/form-autocomplete.min.js differ
index 11e43c8..2a0d468 100644 (file)
Binary files a/lib/amd/build/form-autocomplete.min.js.map and b/lib/amd/build/form-autocomplete.min.js.map differ
index 43e3227..a3be9b6 100644 (file)
@@ -107,11 +107,12 @@ function($, log, str, templates, notification, LoadingIcon) {
                 } else {
                     label = $(ele).html();
                 }
-                items.push({label: label, value: $(ele).attr('value')});
+                if (label !== '') {
+                    items.push({label: label, value: $(ele).attr('value')});
+                }
             }
         });
         var context = $.extend({items: items}, options, state);
-
         // Render the template.
         return templates.render('core/form_autocomplete_selection', context)
         .then(function(html, js) {
@@ -161,19 +162,16 @@ function($, log, str, templates, notification, LoadingIcon) {
     var deselectItem = function(options, state, item, originalSelect) {
         var selectedItemValue = $(item).attr('data-value');
 
-        // We can only deselect items if this is a multi-select field.
-        if (options.multiple) {
-            // Look for a match, and toggle the selected property if there is a match.
-            originalSelect.children('option').each(function(index, ele) {
-                if ($(ele).attr('value') == selectedItemValue) {
-                    $(ele).prop('selected', false);
-                    // We remove newly created custom tags from the suggestions list when they are deselected.
-                    if ($(ele).attr('data-iscustom')) {
-                        $(ele).remove();
-                    }
+        // Look for a match, and toggle the selected property if there is a match.
+        originalSelect.children('option').each(function(index, ele) {
+            if ($(ele).attr('value') == selectedItemValue) {
+                $(ele).prop('selected', false);
+                // We remove newly created custom tags from the suggestions list when they are deselected.
+                if ($(ele).attr('data-iscustom')) {
+                    $(ele).remove();
                 }
-            });
-        }
+            }
+        });
         // Rerender the selection list.
         return updateSelectionList(options, state, originalSelect)
         .then(function() {
@@ -571,6 +569,9 @@ function($, log, str, templates, notification, LoadingIcon) {
             var existingValues = [];
 
             // Now destroy all options that are not currently selected.
+            if (!options.multiple) {
+                originalSelect.children('option').remove();
+            }
             originalSelect.children('option').each(function(optionIndex, option) {
                 option = $(option);
                 if (!option.prop('selected')) {
index c305311..33c7b6c 100644 (file)
@@ -41,7 +41,7 @@
 <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%">
-            {{#multiple}}<span aria-hidden="true">× </span>{{/multiple}}{{{label}}}
+            <span aria-hidden="true">× </span>{{{label}}}
         </span>
     {{/items}}
     {{^items}}
index f3556c8..302299c 100644 (file)
@@ -285,7 +285,7 @@ fieldset.coursesearchbox label {
     min-height: 2 * $input-padding-y-sm + 2 * $font-size-base;
 }
 
-.form-autocomplete-multiple [role=listitem] {
+.form-autocomplete-selection [role=listitem] {
     cursor: pointer;
     white-space: inherit;
     word-break: break-word;
index 0d79e5e..629671a 100644 (file)
@@ -15850,7 +15850,7 @@ fieldset.coursesearchbox label {
   margin: 0.25rem;
   min-height: 2.375rem; }
 
-.form-autocomplete-multiple [role=listitem] {
+.form-autocomplete-selection [role=listitem] {
   cursor: pointer;
   white-space: inherit;
   word-break: break-word;
index 0578c9a..3539da4 100644 (file)
@@ -16121,7 +16121,7 @@ fieldset.coursesearchbox label {
   margin: 0.25rem;
   min-height: 2.375rem; }
 
-.form-autocomplete-multiple [role=listitem] {
+.form-autocomplete-selection [role=listitem] {
   cursor: pointer;
   white-space: inherit;
   word-break: break-word;