diff --git a/.changeset/quiet-crabs-jump.md b/.changeset/quiet-crabs-jump.md new file mode 100644 index 0000000000..4f63218bbd --- /dev/null +++ b/.changeset/quiet-crabs-jump.md @@ -0,0 +1,5 @@ +--- +"react-router-dom": patch +--- + +Add `preventScrollReset` prop to `
` diff --git a/packages/react-router-dom/dom.ts b/packages/react-router-dom/dom.ts index e6fd5aa73f..21d9b84a15 100644 --- a/packages/react-router-dom/dom.ts +++ b/packages/react-router-dom/dom.ts @@ -138,6 +138,12 @@ export interface SubmitOptions { * hierarchy and want to instead route based on /-delimited URL segments */ relative?: RelativeRoutingType; + + /** + * In browser-based environments, prevent resetting scroll after this + * navigation when using the component + */ + preventScrollReset?: boolean; } export function getFormSubmissionInfo( diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx index 408bcda48f..104994775e 100644 --- a/packages/react-router-dom/index.tsx +++ b/packages/react-router-dom/index.tsx @@ -593,6 +593,12 @@ export interface FormProps extends React.FormHTMLAttributes { */ relative?: RelativeRoutingType; + /** + * Prevent the scroll position from resetting to the top of the viewport on + * completion of the navigation when using the component + */ + preventScrollReset?: boolean; + /** * A function to call when the form is submitted. If you call * `event.preventDefault()` then this form will not do anything. @@ -640,6 +646,7 @@ const FormImpl = React.forwardRef( fetcherKey, routeId, relative, + preventScrollReset, ...props }, forwardedRef @@ -664,6 +671,7 @@ const FormImpl = React.forwardRef( method: submitMethod, replace, relative, + preventScrollReset, }); }; @@ -906,6 +914,7 @@ function useSubmitImpl(fetcherKey?: string, routeId?: string): SubmitFunction { let href = url.pathname + url.search; let opts = { replace: options.replace, + preventScrollReset: options.preventScrollReset, formData, formMethod: method as FormMethod, formEncType: encType as FormEncType, @@ -1000,8 +1009,9 @@ export type FetcherWithComponents = Fetcher & { Form: ReturnType; submit: ( target: SubmitTarget, - // Fetchers cannot replace because they are not navigation events - options?: Omit + // Fetchers cannot replace/preventScrollReset because they are not + // navigation events + options?: Omit ) => void; load: (href: string) => void; };