diff --git a/app/webpacker/controllers/popout_controller.js b/app/webpacker/controllers/popout_controller.js index 49530e7e26..0545e2d3c9 100644 --- a/app/webpacker/controllers/popout_controller.js +++ b/app/webpacker/controllers/popout_controller.js @@ -10,7 +10,7 @@ export default class PopoutController extends Controller { // Show when click or down-arrow on button this.buttonTarget.addEventListener("click", this.show.bind(this)); - this.buttonTarget.addEventListener("keydown", this.showIfDownArrow.bind(this)); + this.buttonTarget.addEventListener("keydown", this.applyKeyAction.bind(this)); // Close when click or tab outside of dialog. Run async (don't block primary event handlers). this.closeIfOutsideBound = this.closeIfOutside.bind(this); // Store reference for removing listeners later. @@ -33,9 +33,16 @@ export default class PopoutController extends Controller { e.preventDefault(); } - showIfDownArrow(e) { - if (e.keyCode == 40) { + // Apply an appropriate action, behaving similar to a dropdown + // Shows the popout and applies the value where appropriate + applyKeyAction(e) { + if ([38, 40].includes(e.keyCode)) { + // Show if Up or Down arrow this.show(e); + } else if (e.key.match(/^[\d\w]$/)) { + // Show, and apply value if it's a digit or word character + this.show(e); + this.first_input.value = e.key; } } diff --git a/spec/javascripts/stimulus/popout_controller_test.js b/spec/javascripts/stimulus/popout_controller_test.js index c90e6a90ab..82da807bfb 100644 --- a/spec/javascripts/stimulus/popout_controller_test.js +++ b/spec/javascripts/stimulus/popout_controller_test.js @@ -42,7 +42,21 @@ describe("PopoutController", () => { expectToBeShown(dialog); }); - it("doesn't show the dialog on other key press (tab)", () => { + it("shows and updates on number press", () => { + button.dispatchEvent(new KeyboardEvent("keydown", { key: "1" })); + + expectToBeShown(dialog); + expect(input1.value).toBe("1"); + }); + + it("shows and updates on character press", () => { + button.dispatchEvent(new KeyboardEvent("keydown", { key: "a" })); + + expectToBeShown(dialog); + expect(input1.value).toBe("a"); + }); + + it("doesn't show the dialog on control key press (tab)", () => { button.dispatchEvent(new KeyboardEvent("keydown", { keyCode: 9 })); expectToBeClosed(dialog);