Show popout when press printable character

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;
     }
   }
 

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);