diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-12 13:12:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-12 13:12:27 -0300 |
commit | 38b84bb8051db2f03b152d66c34a1cb4c8944a12 (patch) | |
tree | 1e7a23bacb5287a53da51f93faee8667292c56ee /packages/anastasis-webui/src/components/AsyncButton.tsx | |
parent | 377e78e8543b67c22798479fcf2d2f8d1dae5b28 (diff) |
fix #7059
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> |