feat(web/input): submit on enter press

web/src/features/dialog/InputDialog.tsx

@@ -17,6 +17,7 @@ import InputNumber from "./components/number";
 import Input from "./components/input";
 import CheckboxField from "./components/checkbox";
 import SelectField from "./components/select";
+import { useKeyPress } from "../../hooks/useKeyPress";
 
 interface Props {
   heading: string;
@@ -58,9 +59,13 @@ const InputDialog: React.FC = () => {
   >([]);
   const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
   const [visible, setVisible] = React.useState(false);
-
+  const enterPressed = useKeyPress("Enter");
   const { locale } = useLocales();
 
+  React.useEffect(() => {
+    if (visible && enterPressed === false) handleConfirm();
+  }, [enterPressed]);
+
   const handlePasswordStates = (index: number) => {
     setPasswordStates({
       ...passwordStates,

web/src/hooks/useKeyPress.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const useKeyPress = (targetKey: KeyboardEvent["key"]) => {
+  const [keyPressed, setKeyPressed] = React.useState(false);
+
+  const downHandler = React.useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    },
+    [targetKey]
+  );
+
+  const upHandler = React.useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    },
+    [targetKey]
+  );
+
+  React.useEffect(() => {
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, [downHandler, upHandler]);
+
+  return keyPressed;
+};