diff options
Diffstat (limited to 'packages/anastasis-webui/src/components/AsyncButton.tsx')
-rw-r--r-- | packages/anastasis-webui/src/components/AsyncButton.tsx | 12 |
1 files changed, 11 insertions, 1 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> |