fix #7059

5 files changed, 37 insertions, 3 deletions

diff --git a/packages/anastasis-webui/src/components/AsyncButton.tsx b/packages/anastasis-webui/src/components/AsyncButton.tsx
index 33f3a7258..8f855f29f 100644
--- a/packages/anastasis-webui/src/components/AsyncButton.tsx
+++ b/packages/anastasis-webui/src/components/AsyncButton.tsx
@@ -20,6 +20,7 @@
  */
 
 import { ComponentChildren, h, VNode } from "preact";
+import { useLayoutEffect, useRef } from "preact/hooks";
 // import { LoadingModal } from "../modal";
 import { useAsync } from "../hooks/async";
 // import { Translate } from "../../i18n";
@@ -28,17 +29,26 @@ type Props = {
   children: ComponentChildren;
   disabled?: boolean;
   onClick?: () => Promise<void>;
+  grabFocus?: boolean;
   [rest: string]: any;
 };
 
 export function AsyncButton({
   onClick,
+  grabFocus,
   disabled,
   children,
   ...rest
 }: Props): VNode {
   const { isLoading, request } = useAsync(onClick);
 
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useLayoutEffect(() => {
+    if (grabFocus) {
+      buttonRef.current?.focus();
+    }
+  }, [grabFocus]);
+
   // if (isSlow) {
   //   return <LoadingModal onCancel={cancel} />;
   // }
@@ -48,7 +58,7 @@ export function AsyncButton({
 
   return (
     <span data-tooltip={rest["data-tooltip"]} style={{ marginLeft: 5 }}>
-      <button {...rest} onClick={request} disabled={disabled}>
+      <button {...rest} ref={buttonRef} onClick={request} disabled={disabled}>
         {children}
       </button>
     </span>
diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx
index 0b6a7e316..18ef89908 100644
--- a/packages/anastasis-webui/src/components/fields/DateInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx
@@ -1,4 +1,4 @@
-import { format, isAfter, parse, sub, subYears } from "date-fns";
+import { format, subYears } from "date-fns";
 import { h, VNode } from "preact";
 import { useLayoutEffect, useRef, useState } from "preact/hooks";
 import { DatePicker } from "../picker/DatePicker";
@@ -9,6 +9,7 @@ export interface DateInputProps {
   tooltip?: string;
   error?: string;
   years?: Array<number>;
+  onConfirm?: () => void;
   bind: [string, (x: string) => void];
 }
 
@@ -44,7 +45,12 @@ export function DateInput(props: DateInputProps): VNode {
               type="text"
               class={showError ? "input is-danger" : "input"}
               value={value}
-              onInput={(e) => {
+              onKeyPress={(e) => {
+                if (e.key === 'Enter' && props.onConfirm) {
+                  props.onConfirm()
+                }
+              }}
+                  onInput={(e) => {
                 const text = e.currentTarget.value;
                 setDirty(true);
                 props.bind[1](text);
diff --git a/packages/anastasis-webui/src/components/fields/EmailInput.tsx b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
index fe676f284..4c35c0686 100644
--- a/packages/anastasis-webui/src/components/fields/EmailInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
@@ -7,6 +7,7 @@ export interface TextInputProps {
   error?: string;
   placeholder?: string;
   tooltip?: string;
+  onConfirm?: () => void;
   bind: [string, (x: string) => void];
 }
 
@@ -37,6 +38,11 @@ export function EmailInput(props: TextInputProps): VNode {
           placeholder={props.placeholder}
           type="email"
           class={showError ? "input is-danger" : "input"}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter' && props.onConfirm) {
+              props.onConfirm()
+            }
+          }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
diff --git a/packages/anastasis-webui/src/components/fields/NumberInput.tsx b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
index e1489eafa..4856131c7 100644
--- a/packages/anastasis-webui/src/components/fields/NumberInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
@@ -7,6 +7,7 @@ export interface TextInputProps {
   error?: string;
   placeholder?: string;
   tooltip?: string;
+  onConfirm?: () => void;
   bind: [string, (x: string) => void];
 }
 
@@ -36,6 +37,11 @@ export function PhoneNumberInput(props: TextInputProps): VNode {
           type="tel"
           placeholder={props.placeholder}
           class={showError ? "input is-danger" : "input"}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter' && props.onConfirm) {
+              props.onConfirm()
+            }
+          }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx
index 4f417730c..efa95d84e 100644
--- a/packages/anastasis-webui/src/components/fields/TextInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx
@@ -8,6 +8,7 @@ export interface TextInputProps {
   error?: string;
   placeholder?: string;
   tooltip?: string;
+  onConfirm?: () => void;
   bind: [string, (x: string) => void];
 }
 
@@ -37,6 +38,11 @@ export function TextInput(props: TextInputProps): VNode {
           disabled={props.disabled}
           placeholder={props.placeholder}
           class={showError ? "input is-danger" : "input"}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter' && props.onConfirm) {
+              props.onConfirm()
+            }
+          }}
           onInput={(e) => {
             setDirty(true);
             props.bind[1]((e.target as HTMLInputElement).value);