Close when Bulk selection is empty

Once all of the <form> element’s descendant <input type="checkbox"> elements are unchecked, trigger a reset event.

Then, listen for descendant elements of the <dialog> element to fire reset events, and call HTMLDilogElement.close() to close the dialog.


      app/javascript/controllers/bulk_controller.js

diff --git a/app/javascript/controllers/bulk_controller.js b/app/javascript/controllers/bulk_controller.js
index d800b82..b1fb5d7 100644
--- a/app/javascript/controllers/bulk_controller.js
+++ b/app/javascript/controllers/bulk_controller.js
@@ -5,9 +5,7 @@ export default class extends Controller {
 
   select({ currentTarget }) {
     const value = currentTarget.getAttribute(`data-${this.identifier}-value`)
-    const inputTargets = Array.from(this.formTarget.elements)
-
-    const input = inputTargets.find(input => input.value === value)
+    const input = this.inputTargets.find(input => input.value === value)
 
     if (input) {
       input.checked = true
@@ -15,7 +13,17 @@ export default class extends Controller {
     }
   }
 
+  resetIfAllUnchecked() {
+    if (this.inputTargets.some(input => input.checked)) return
+
+    this.resetForm()
+  }
+
   resetForm() {
     this.formTarget.reset()
   }
+
+  get inputTargets() {
+    return Array.from(this.formTarget.elements)
+  }
 }


      app/javascript/controllers/dialog_controller.js

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index b231734..ef104ca 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -6,4 +6,10 @@ export default class extends Controller {
   connect() {
     dialogPolyfill.registerDialog(this.element)
   }
+
+  close() {
+    if (this.element.open) {
+      this.element.close()
+    }
+  }
 }


      app/views/events/new.html.erb

diff --git a/app/views/events/new.html.erb b/app/views/events/new.html.erb
index 3314c46..9442652 100644
--- a/app/views/events/new.html.erb
+++ b/app/views/events/new.html.erb
@@ -1,6 +1,6 @@
 <%= form_with scope: :event, url: completions_path, html: {
-  autocomplete: :off, "data-bulk-target": "form"
-} do |form| %>
+  autocomplete: :off, "data-bulk-target": "form", "data-action": "input->bulk#resetIfAllUnchecked"
+}  do |form| %>
   <fieldset>
     <table>
       <tbody>
@@ -35,6 +35,12 @@
                 <%= action.translate(:delay) %>
               <% end %>
             </td>
+
+            <td>
+              <%= render "button", builder: form, type: :reset, class: "bg-black text-white" do %>
+                <%= action.translate(:close) %>
+              <% end %>
+            </td>
           <% end %>
         <% end %>
       </tfoot>


      app/views/layouts/application.html.erb

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 364caac..64d275b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,7 +14,7 @@
       <%= yield %>
     </main>
 
-    <dialog data-controller="dialog" data-controls-dialog-target="dialog" data-action="close->bulk#resetForm" class="
+    <dialog data-controller="dialog" data-controls-dialog-target="dialog" data-action="close->bulk#resetForm reset->dialog#close" class="
       backdrop:hidden
       bg-transparent
       border-0


      config/locales/en.yml

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 4625680..4d85eda 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -33,6 +33,7 @@ en:
   helpers:
     submit:
       event:
+        close: "Discard"
         complete: "Complete"
         delay: "Delay"
         promote: "Promote"


      test/system/tasks_test.rb

diff --git a/test/system/tasks_test.rb b/test/system/tasks_test.rb
index 6040244..c447b4b 100644
--- a/test/system/tasks_test.rb
+++ b/test/system/tasks_test.rb
@@ -58,6 +58,31 @@ class TasksTest < ApplicationSystemTestCase
     end
   end
 
+  test "resets the form when closing the modal" do
+    do_the_homework, pass_the_test = tasks(:do_the_homework, :pass_the_test)
+
+    visit root_path
+    click_on do_the_homework.name
+    click_on submit(:event, :close)
+    click_on pass_the_test.name
+
+    assert_no_checked_field do_the_homework.name
+    assert_checked_field pass_the_test.name
+  end
+
+  test "switches back to reading mode when there are no checked Tasks" do
+    do_the_homework = tasks(:do_the_homework)
+
+    visit root_path
+    click_on do_the_homework.name
+    uncheck do_the_homework.name
+
+    assert_no_button submit(:event, :complete)
+    within_section :todo do
+      assert_text do_the_homework.name
+    end
+  end
+
   def assert_no_section(i18n_key)
     assert_no_text translate(i18n_key, scope: [:tasks, :index])
   end