Merge branch 'MDL-63125-36' of https://github.com/paulholden/moodle into MOODLE_36_STABLE

lib/amd/src/form-autocomplete.js

@@ -105,11 +105,12 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 } 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) {
@@ -159,19 +160,16 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
     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() {
@@ -565,6 +563,9 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             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')) {

lib/form/tests/behat/autocomplete.feature

@@ -0,0 +1,28 @@
+@core @javascript @core_form
+Feature: Autocomplete functionality in forms
+  For forms including autocomplete elements
+  As a user
+  I need to use the autocomplete form element
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname |
+      | user1    | Jane      | Jones    |
+      | user2    | Sam       | Smith    |
+    And I log in as "admin"
+
+  Scenario: Use autocomplete element which accepts a single value
+    When I navigate to "Users > Privacy and policies > Data requests" in site administration
+    And I follow "New request"
+    And I open the autocomplete suggestions list
+    And I click on "Jane Jones" item in the autocomplete list
+    Then "Jane Jones" "autocomplete_selection" should exist
+    # Change selection
+    And I open the autocomplete suggestions list
+    And I click on "Sam Smith" item in the autocomplete list
+    And "Sam Smith" "autocomplete_selection" should exist
+    And "Jane Jones" "autocomplete_selection" should not exist
+    # Remove selection
+    And I click on "Sam Smith" "autocomplete_selection"
+    And "Sam Smith" "autocomplete_selection" should not exist
+    And I should see "No selection" in the ".form-autocomplete-selection" "css_element"

lib/templates/form_autocomplete_selection.mustache

@@ -41,7 +41,7 @@
 <span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
     {{#items}}
         <span role="listitem" data-value="{{value}}" aria-selected="true" class="label label-info" style="font-size: 100%; margin-bottom: 0.5rem;">
-            {{#multiple}}<span aria-hidden="true">× </span>{{/multiple}}{{{label}}}
+            <span aria-hidden="true">× </span>{{{label}}}
         </span>
     {{/items}}
     {{^items}}

theme/boost/scss/moodle/forms.scss

@@ -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;

theme/boost/style/moodle.css

@@ -15261,7 +15261,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;

theme/boost/templates/core/form_autocomplete_selection.mustache

@@ -41,7 +41,7 @@
 <span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
     {{#items}}
         <span role="listitem" data-value="{{value}}" aria-selected="true" class="tag tag-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}}

theme/bootstrapbase/less/moodle/forms.less

@@ -499,7 +499,7 @@ select.form-autocomplete-original-select {
     margin: 0.2em;
     min-height: @baseLineHeight + @baseFontSize / 2;
 }
-.form-autocomplete-multiple [role=listitem] {
+.form-autocomplete-selection [role=listitem] {
     cursor: pointer;
     white-space: inherit;
     word-break: break-word;

theme/bootstrapbase/style/moodle.css

@@ -17153,7 +17153,7 @@ select.form-autocomplete-original-select {
   margin: 0.2em;
   min-height: 27px;
 }
-.form-autocomplete-multiple [role=listitem] {
+.form-autocomplete-selection [role=listitem] {
   cursor: pointer;
   white-space: inherit;
   word-break: break-word;