diff --git a/src/views/primary-auth/PrimaryAuthForm.js b/src/views/primary-auth/PrimaryAuthForm.js index 18fdaec877..9202d24d06 100644 --- a/src/views/primary-auth/PrimaryAuthForm.js +++ b/src/views/primary-auth/PrimaryAuthForm.js @@ -97,7 +97,14 @@ define([ 'label-top': true, className: 'margin-btm-0', initialize: function () { - this.listenTo(this.model, 'change:username', this.render); + this.listenTo(this.model, 'change:remember', function (model, val) { + // OKTA-98946: We normally re-render on changes to model values, + // but in this case we will manually update the checkbox due to + // iOS Safari and how it handles autofill - it will autofill the + // form anytime the dom elements are re-rendered, which prevents + // the user from editing their username. + this.$(':checkbox').prop('checked', val).trigger('updateState'); + }); } }); } diff --git a/test/spec/PrimaryAuth_spec.js b/test/spec/PrimaryAuth_spec.js index 50b54db52a..2fd36bee00 100644 --- a/test/spec/PrimaryAuth_spec.js +++ b/test/spec/PrimaryAuth_spec.js @@ -904,6 +904,17 @@ function (_, $, Q, OktaAuth, LoginUtil, Okta, Util, PrimaryAuthForm, Beacon, expect(test.form.rememberMeCheckboxStatus()).toBe('unchecked'); }); }); + itp('does not re-render rememberMe checkbox on changes', function () { + Util.mockCookie('ln', 'testuser'); + var options = { + 'features.rememberMe': true + }; + return setup(options).then(function (test) { + var orig = test.form.rememberMeCheckbox().get(0); + test.form.setUsername('new-user'); + expect(test.form.rememberMeCheckbox().get(0)).toBe(orig); + }); + }); itp('populate username if username is available', function () { var options = { 'username': 'testuser@ABC.com'