Hide popout when checkbox is checked

app/views/admin/products_v3/_table.html.haml

@@ -94,7 +94,7 @@
                       = error_message_on variant, :on_hand
                     .field.checkbox
                       = variant_form.label :on_demand do
-                        = variant_form.check_box :on_demand
+                        = variant_form.check_box :on_demand, 'data-action': 'change->popout#closeIfChecked'
                         = t('admin.products_page.columns.on_demand')
                 %td.align-left
                   .content= variant.product.supplier&.name # same as product

app/webpacker/controllers/popout_controller.js

@@ -38,9 +38,24 @@ export default class PopoutController extends Controller {
     }
   }
 
+  close() {
+    this.dialogTarget.style.display = "none";
+  }
+
   closeIfOutside(e) {
     if (!this.dialogTarget.contains(e.target)) {
-      this.dialogTarget.style.display = "none";
+      this.close();
+    }
+  }
+
+  // Close if checked
+  // But the `change` or `input` events are fired before the mouseup, therefore the user never sees the item has been successfully checked, making it feel like it wasn't
+  // We could try listening to the mouseup on the label and check for e.target.controls.checked, but that doesn't support use of keybaord, and the value is inverted for some reason..
+  // but maybe we don't need to. User will get enough feedback when the button text is updated..
+  closeIfChecked(e) {
+    if (e.target.checked) {
+      this.close();
+      this.buttonTarget.focus();
     }
   }
 }

spec/javascripts/stimulus/popout_controller_test.js

@@ -17,7 +17,7 @@ describe("PopoutController", () => {
         <button id="button" data-popout-target="button">On demand</button>
         <div id="dialog" data-popout-target="dialog" style="display: none;">
           <input id="input1">
-          <input id="input2">
+          <input id="input2" type="checkbox" data-action="change->popout#closeIfChecked">
         </div>
       </div>
       <input id="input3">
@@ -72,6 +72,21 @@ describe("PopoutController", () => {
 
       expect(dialog.style.display).toBe("block"); // visible
     });
+
+    it("closes the dialog when checkbox is checked", () => {
+      input2.click();
+
+      expect(dialog.style.display).toBe("none"); // not visible
+    });
+
+    it("doesn't close the dialog when checkbox is unchecked", () => {
+      input2.click();
+      button.dispatchEvent(new Event("click")); // Dialog is opened again
+      input2.click();
+
+      expect(input2.checked).toBe(false);
+      expect(dialog.style.display).toBe("block"); // visible
+    });
   });
 
   describe("Cleaning up", () => {