DropDownFieldView should show empty option if model value is unset.

TNL-2022

common/test/acceptance/tests/lms/test_account_settings.py

@@ -318,7 +318,7 @@ class AccountSettingsPageTest(AccountSettingsTestMixin, WebAppTest):
         self._test_dropdown_field(
             u'country',
             u'Country or Region',
-            u'Afghanistan',
+            u'',
             [u'Pakistan', u'Palau'],
         )
 

lms/static/js/spec/views/fields_spec.js

@@ -192,6 +192,34 @@ define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'j
                 }, requests);
             });
 
+            it("only shows empty option in DropdownFieldView if required is false or model value is not set", function() {
+                requests = AjaxHelpers.requests(this);
+
+                var editableOptions = ['toggle', 'always'];
+                _.each(editableOptions, function(editable) {
+                    var fieldData = FieldViewsSpecHelpers.createFieldData(FieldViews.DropdownFieldView, {
+                        title: 'Drop Down Field',
+                        valueAttribute: 'drop-down',
+                        helpMessage: 'edX drop down',
+                        editable: editable,
+                        required:true
+                    });
+                    var view = new FieldViews.DropdownFieldView(fieldData).render();
+
+                    expect(view.modelValueIsSet()).toBe(false);
+                    expect(view.displayValue()).toBe('');
+
+                    if(editable === 'toggle') { view.showEditMode(true); }
+                    view.$('.u-field-value > select').val(FieldViewsSpecHelpers.SELECT_OPTIONS[0]).change();
+                    expect(view.fieldValue()).toBe(FieldViewsSpecHelpers.SELECT_OPTIONS[0][0]);
+
+                    AjaxHelpers.respondWithNoContent(requests);
+                    if(editable === 'toggle') { view.showEditMode(true); }
+                    // When server returns success, there should no longer be an empty option.
+                    expect($(view.$('.u-field-value option')[0]).val()).toBe('si');
+                });
+            });
+
             it("correctly renders and updates TextAreaFieldView when editable == never", function() {
                 var fieldData = FieldViewsSpecHelpers.createFieldData(FieldViews.TextareaFieldView, {
                     title: 'About me',

lms/static/js/views/fields.js

@@ -318,7 +318,7 @@
                     title: this.options.title,
                     screenReaderTitle: this.options.screenReaderTitle || this.options.title,
                     iconName: this.options.iconName,
-                    required: this.options.required,
+                    showBlankOption: (!this.options.required || !this.modelValueIsSet()),
                     selectOptions: this.options.options,
                     message: this.helpMessage
                 }));
@@ -385,10 +385,12 @@
             },
 
             saveSucceeded: function() {
-                this._super();
                 if (this.editable === 'toggle') {
                     this.showDisplayMode(true);
+                } else {
+                    this.showEditMode(true);
                 }
+                this._super();
             },
 
             disableField: function(disable) {

lms/templates/fields/field_dropdown.underscore

@@ -10,8 +10,8 @@
 
 <span class="u-field-value">
     <% if (mode === 'edit') { %>
-        <select name="select" id="u-field-select-<%- id %>" aria-describedby="u-field-help-message-<%- id %>">
-            <% if (!required) { %>
+        <select name="select" id="u-field-select-<%- id %>" aria-describedby="u-field-message-<%- id %>">
+            <% if (showBlankOption) { %>
                 <option value=""></option>
             <% } %>
             <% _.each(selectOptions, function(selectOption) { %>