diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml index 0570f22e63..454bb2ed7f 100644 --- a/app/views/admin/products_v3/_table.html.haml +++ b/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 diff --git a/app/webpacker/controllers/popout_controller.js b/app/webpacker/controllers/popout_controller.js index a2fac4e58e..89a7d79791 100644 --- a/app/webpacker/controllers/popout_controller.js +++ b/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(); } } } diff --git a/spec/javascripts/stimulus/popout_controller_test.js b/spec/javascripts/stimulus/popout_controller_test.js index 59708a8e46..8b32fbf70b 100644 --- a/spec/javascripts/stimulus/popout_controller_test.js +++ b/spec/javascripts/stimulus/popout_controller_test.js @@ -17,7 +17,7 @@ describe("PopoutController", () => { @@ -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", () => {