diff --git a/common/test/acceptance/tests/lms/test_account_settings.py b/common/test/acceptance/tests/lms/test_account_settings.py index 6633bdc175..5aca9f089b 100644 --- a/common/test/acceptance/tests/lms/test_account_settings.py +++ b/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'], ) diff --git a/lms/static/js/spec/views/fields_spec.js b/lms/static/js/spec/views/fields_spec.js index 4c2c249071..06a3e6bb74 100644 --- a/lms/static/js/spec/views/fields_spec.js +++ b/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', diff --git a/lms/static/js/views/fields.js b/lms/static/js/views/fields.js index f6c1fd3516..30ffecb3d4 100644 --- a/lms/static/js/views/fields.js +++ b/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) { diff --git a/lms/templates/fields/field_dropdown.underscore b/lms/templates/fields/field_dropdown.underscore index abc5705acf..6791340de4 100644 --- a/lms/templates/fields/field_dropdown.underscore +++ b/lms/templates/fields/field_dropdown.underscore @@ -10,8 +10,8 @@ <% if (mode === 'edit') { %> - + <% if (showBlankOption) { %> <% } %> <% _.each(selectOptions, function(selectOption) { %>