diff --git a/.changeset/sweet-forks-care.md b/.changeset/sweet-forks-care.md new file mode 100644 index 00000000000..e84cfab7e1f --- /dev/null +++ b/.changeset/sweet-forks-care.md @@ -0,0 +1,5 @@ +--- +"@clerk/shared": patch +--- + +Fixes restoration of the scrollbar behaviour after re-verification is completed or canceled/closed. diff --git a/packages/shared/src/react/hooks/useReverification.ts b/packages/shared/src/react/hooks/useReverification.ts index 4192c38fca5..0e07289dbbb 100644 --- a/packages/shared/src/react/hooks/useReverification.ts +++ b/packages/shared/src/react/hooks/useReverification.ts @@ -46,6 +46,7 @@ type UseReverificationOptions = { type CreateReverificationHandlerParams = UseReverificationOptions & { openUIComponent: Clerk['__internal_openReverification']; + closeUIComponent: Clerk['__internal_closeReverification']; }; function createReverificationHandler(params: CreateReverificationHandlerParams) { @@ -98,6 +99,8 @@ function createReverificationHandler(params: CreateReverificationHandlerParams) } return null; + } finally { + params.closeUIComponent?.(); } /** @@ -184,13 +187,14 @@ function useReverification< Fetcher extends (...args: any[]) => Promise | undefined, Options extends UseReverificationOptions, >(fetcher: Fetcher, options?: Options): UseReverificationResult { - const { __internal_openReverification } = useClerk(); + const { __internal_openReverification, __internal_closeReverification } = useClerk(); const fetcherRef = useRef(fetcher); const optionsRef = useRef(options); const handleReverification = useMemo(() => { const handler = createReverificationHandler({ openUIComponent: __internal_openReverification, + closeUIComponent: __internal_closeReverification, ...optionsRef.current, })(fetcherRef.current); return [handler] as const;