Fix DirtySubmit handling of checkbox and radio inputs

Most browsers do not fire the "input" event for checkboxes or radios.
Adds a "change" listener to properly trigger these DirtySubmit updates.

3 files changed, 50 insertions, 13 deletions

diff --git a/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js b/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js
index 08ffc44605f..47be0b3ce9d 100644
--- a/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js
+++ b/spec/javascripts/dirty_submit/dirty_submit_collection_spec.js
@@ -1,5 +1,5 @@
 import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
-import { setInput, createForm } from './helper';
+import { setInputValue, createForm } from './helper';
 
 describe('DirtySubmitCollection', () => {
   it('disables submits until there are changes', done => {
@@ -14,11 +14,11 @@ describe('DirtySubmitCollection', () => {
 
       expect(submit.disabled).toBe(true);
 
-      return setInput(input, `${originalValue} changes`)
+      return setInputValue(input, `${originalValue} changes`)
         .then(() => {
           expect(submit.disabled).toBe(false);
         })
-        .then(() => setInput(input, originalValue))
+        .then(() => setInputValue(input, originalValue))
         .then(() => {
           expect(submit.disabled).toBe(true);
         })
diff --git a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
index 093fec97951..ae2a785de52 100644
--- a/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
+++ b/spec/javascripts/dirty_submit/dirty_submit_form_spec.js
@@ -1,14 +1,14 @@
 import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
-import { setInput, createForm } from './helper';
+import { getInputValue, setInputValue, createForm } from './helper';
 
 function expectToToggleDisableOnDirtyUpdate(submit, input) {
-  const originalValue = input.value;
+  const originalValue = getInputValue(input);
 
   expect(submit.disabled).toBe(true);
 
-  return setInput(input, `${originalValue} changes`)
+  return setInputValue(input, `${originalValue} changes`)
     .then(() => expect(submit.disabled).toBe(false))
-    .then(() => setInput(input, originalValue))
+    .then(() => setInputValue(input, originalValue))
     .then(() => expect(submit.disabled).toBe(true));
 }
 
@@ -33,4 +33,24 @@ describe('DirtySubmitForm', () => {
       .then(done)
       .catch(done.fail);
   });
+
+  it('disables submit until there are changes for radio inputs', done => {
+    const { form, input, submit } = createForm('radio');
+
+    new DirtySubmitForm(form); // eslint-disable-line no-new
+
+    return expectToToggleDisableOnDirtyUpdate(submit, input)
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('disables submit until there are changes for checkbox inputs', done => {
+    const { form, input, submit } = createForm('checkbox');
+
+    new DirtySubmitForm(form); // eslint-disable-line no-new
+
+    return expectToToggleDisableOnDirtyUpdate(submit, input)
+      .then(done)
+      .catch(done.fail);
+  });
 });
diff --git a/spec/javascripts/dirty_submit/helper.js b/spec/javascripts/dirty_submit/helper.js
index 6d1e643553c..b51783cb915 100644
--- a/spec/javascripts/dirty_submit/helper.js
+++ b/spec/javascripts/dirty_submit/helper.js
@@ -1,25 +1,42 @@
 import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
 import setTimeoutPromiseHelper from '../helpers/set_timeout_promise_helper';
 
-export function setInput(element, value) {
-  element.value = value;
+function isCheckableType(type) {
+  return /^(radio|checkbox)$/.test(type);
+}
+
+export function setInputValue(element, value) {
+  const { type } = element;
+  let eventType;
+
+  if (isCheckableType(type)) {
+    element.checked = !element.checked;
+    eventType = 'change';
+  } else {
+    element.value = value;
+    eventType = 'input';
+  }
 
   element.dispatchEvent(
-    new Event('input', {
+    new Event(eventType, {
       bubbles: true,
-      cancelable: true,
     }),
   );
 
   return setTimeoutPromiseHelper(DirtySubmitForm.THROTTLE_DURATION);
 }
 
-export function createForm() {
+export function getInputValue(input) {
+  return isCheckableType(input.type) ? input.checked : input.value;
+}
+
+export function createForm(type = 'text') {
   const form = document.createElement('form');
   form.innerHTML = `
-    <input type="text" value="original" class="js-input" name="input" />
+    <input type="${type}" name="${type}" class="js-input"/>
     <button type="submit" class="js-dirty-submit"></button>
   `;
+
   const input = form.querySelector('.js-input');
   const submit = form.querySelector('.js-dirty-submit');