diff --git a/app/scenes/Document/components/ShareButton.js b/app/scenes/Document/components/ShareButton.js index af7d1606e..c61556679 100644 --- a/app/scenes/Document/components/ShareButton.js +++ b/app/scenes/Document/components/ShareButton.js @@ -60,7 +60,7 @@ function ShareButton({ document }: Props) { document={document} share={share} sharedParent={sharedParent} - onSubmit={popover.hide} + onRequestClose={popover.hide} visible={popover.visible} /> diff --git a/app/scenes/Document/components/SharePopover.js b/app/scenes/Document/components/SharePopover.js index 10c9d544a..c6070b8fc 100644 --- a/app/scenes/Document/components/SharePopover.js +++ b/app/scenes/Document/components/SharePopover.js @@ -15,6 +15,7 @@ import HelpText from "components/HelpText"; import Input from "components/Input"; import Notice from "components/Notice"; import Switch from "components/Switch"; +import useKeyDown from "hooks/useKeyDown"; import useStores from "hooks/useStores"; import useToasts from "hooks/useToasts"; @@ -22,7 +23,7 @@ type Props = {| document: Document, share: Share, sharedParent: ?Share, - onSubmit: () => void, + onRequestClose: () => void, visible: boolean, |}; @@ -30,7 +31,7 @@ function SharePopover({ document, share, sharedParent, - onSubmit, + onRequestClose, visible, }: Props) { const { t } = useTranslation(); @@ -38,6 +39,7 @@ function SharePopover({ const { showToast } = useToasts(); const [isCopied, setIsCopied] = React.useState(false); const timeout = React.useRef(); + const buttonRef = React.useRef(); const can = policies.abilities(share ? share.id : ""); const documentAbilities = policies.abilities(document.id); const canPublish = @@ -47,8 +49,13 @@ function SharePopover({ documentAbilities.share; const isPubliclyShared = (share && share.published) || sharedParent; + useKeyDown("Escape", onRequestClose); + React.useEffect(() => { - if (visible) document.share(); + if (visible) { + document.share(); + buttonRef.current?.focus(); + } return () => clearTimeout(timeout.current); }, [document, visible]); @@ -87,11 +94,11 @@ function SharePopover({ timeout.current = setTimeout(() => { setIsCopied(false); - onSubmit(); + onRequestClose(); showToast(t("Share link copied"), { type: "info" }); }, 250); - }, [t, onSubmit, showToast]); + }, [t, onRequestClose, showToast]); return ( <> @@ -176,7 +183,12 @@ function SharePopover({ readOnly /> -