summaryrefslogtreecommitdiff
path: root/packages/anastasis-webui/src/components/AsyncButton.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/anastasis-webui/src/components/AsyncButton.tsx')
-rw-r--r--packages/anastasis-webui/src/components/AsyncButton.tsx12
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>