Skip to content

Commit

Permalink
Add preventScrollReset prop to Form
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 committed Jan 11, 2023
1 parent 2a385ba commit f550b69
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/quiet-crabs-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router-dom": patch
---

Add `preventScrollReset` prop to `<Form>`
6 changes: 6 additions & 0 deletions packages/react-router-dom/dom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 <ScrollRestoration> component
*/
preventScrollReset?: boolean;
}

export function getFormSubmissionInfo(
Expand Down
14 changes: 12 additions & 2 deletions packages/react-router-dom/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,12 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
*/
relative?: RelativeRoutingType;

/**
* Prevent the scroll position from resetting to the top of the viewport on
* completion of the navigation when using the <ScrollRestoration> component
*/
preventScrollReset?: boolean;

/**
* A function to call when the form is submitted. If you call
* `event.preventDefault()` then this form will not do anything.
Expand Down Expand Up @@ -640,6 +646,7 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
fetcherKey,
routeId,
relative,
preventScrollReset,
...props
},
forwardedRef
Expand All @@ -664,6 +671,7 @@ const FormImpl = React.forwardRef<HTMLFormElement, FormImplProps>(
method: submitMethod,
replace,
relative,
preventScrollReset,
});
};

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1000,8 +1009,9 @@ export type FetcherWithComponents<TData> = Fetcher<TData> & {
Form: ReturnType<typeof createFetcherForm>;
submit: (
target: SubmitTarget,
// Fetchers cannot replace because they are not navigation events
options?: Omit<SubmitOptions, "replace">
// Fetchers cannot replace/preventScrollReset because they are not
// navigation events
options?: Omit<SubmitOptions, "replace" | "preventScrollReset">
) => void;
load: (href: string) => void;
};
Expand Down

0 comments on commit f550b69

Please sign in to comment.