diff --git a/app/components/Sharing/Collection/SharePopover.tsx b/app/components/Sharing/Collection/SharePopover.tsx index 1792eaec10..f2dd0aab05 100644 --- a/app/components/Sharing/Collection/SharePopover.tsx +++ b/app/components/Sharing/Collection/SharePopover.tsx @@ -66,6 +66,7 @@ function SharePopover({ const share = shares.getByCollectionId(collection.id); const prevPendingIds = usePrevious(pendingIds); + const wrapperRef = React.useRef(null); const suggestionsRef = React.useRef(null); const searchInputRef = React.useRef(null); @@ -89,6 +90,15 @@ function SharePopover({ } ); + // Move focus into the popover to account for lazy-loading + React.useLayoutEffect(() => { + if (!hasRendered) { + return; + } + + (searchInputRef.current ?? wrapperRef.current)?.focus(); + }, [hasRendered]); + // Hide the picker when the popover is closed React.useEffect(() => { if (visible) { @@ -351,7 +361,7 @@ function SharePopover({ ); return ( - + {can.update && ( (null); const suggestionsRef = React.useRef(null); const searchInputRef = React.useRef(null); @@ -91,6 +92,15 @@ function SharePopover({ } ); + // Move focus into the popover to account for lazy-loading + React.useLayoutEffect(() => { + if (!hasRendered) { + return; + } + + (searchInputRef.current ?? wrapperRef.current)?.focus(); + }, [hasRendered]); + React.useEffect(() => { if (visible) { if (externalLoading === undefined) { @@ -358,7 +368,7 @@ function SharePopover({ ); return ( - + {can.manageUsers && ( (null); const selectedText = useTextSelection(); const text = ProsemirrorHelper.toPlainText(document); const stats = useTextStats(text ?? "", selectedText); const formatNumber = useFormatNumber(); + // Move focus into the modal to account for lazy-loading + useLayoutEffect(() => { + wrapperRef.current?.focus(); + }, []); + return ( -
+
{document ? (