Fix save button not activating when original setting started as null

2 files changed, 24 insertions, 11 deletions

diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_form.js b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
index 5bea47f23c5..d8d0fa1fac4 100644
--- a/app/assets/javascripts/dirty_submit/dirty_submit_form.js
+++ b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
@@ -31,7 +31,7 @@ class DirtySubmitForm {
   updateDirtyInput(event) {
     const input = event.target;
 
-    if (!input.dataset.dirtySubmitOriginalValue) return;
+    if (!input.dataset.isDirtySubmitInput) return;
 
     this.updateDirtyInputs(input);
     this.toggleSubmission();
@@ -65,6 +65,7 @@ class DirtySubmitForm {
   }
 
   static initInput(element) {
+    element.dataset.isDirtySubmitInput = true;
     element.dataset.dirtySubmitOriginalValue = DirtySubmitForm.inputCurrentValue(element);
   }
 
diff --git a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
index b7b29190c31..093fec97951 100644
--- a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
+++ b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
@@ -1,23 +1,35 @@
 import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
 import { setInput, createForm } from './helper';
 
+function expectToToggleDisableOnDirtyUpdate(submit, input) {
+  const originalValue = input.value;
+
+  expect(submit.disabled).toBe(true);
+
+  return setInput(input, `${originalValue} changes`)
+    .then(() => expect(submit.disabled).toBe(false))
+    .then(() => setInput(input, originalValue))
+    .then(() => expect(submit.disabled).toBe(true));
+}
+
 describe('DirtySubmitForm', () => {
   it('disables submit until there are changes', done => {
     const { form, input, submit } = createForm();
-    const originalValue = input.value;
 
     new DirtySubmitForm(form); // eslint-disable-line no-new
 
-    expect(submit.disabled).toBe(true);
+    return expectToToggleDisableOnDirtyUpdate(submit, input)
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('disables submit until there are changes when initializing with a falsy value', done => {
+    const { form, input, submit } = createForm();
+    input.value = '';
+
+    new DirtySubmitForm(form); // eslint-disable-line no-new
 
-    return setInput(input, `${originalValue} changes`)
-      .then(() => {
-        expect(submit.disabled).toBe(false);
-      })
-      .then(() => setInput(input, originalValue))
-      .then(() => {
-        expect(submit.disabled).toBe(true);
-      })
+    return expectToToggleDisableOnDirtyUpdate(submit, input)
       .then(done)
       .catch(done.fail);
   });