Skip to content

fix(ui): retains search params when navigating back#9576

Merged
jacobsfletch merged 2 commits into
mainfrom
fix/retain-params
Nov 27, 2024
Merged

fix(ui): retains search params when navigating back#9576
jacobsfletch merged 2 commits into
mainfrom
fix/retain-params

Conversation

@jacobsfletch

Copy link
Copy Markdown
Member

Closes #9132. When query params are present in the URL, such as after searching or filtering in the list view, they are not being retained after navigating back to that view via history.back() (i.e. the back button). This makes it difficult to quickly navigate in and out of documents from the list view when an underlying search exists. This was because the SearchParamsProvider is stale when the new view renders, which then replaces the URL with these stale params. The fix here is to not use the SearchParamsProvider at all, and instead use next/navigation directly. Ultimately, this provider should likely be marked deprecated and then removed in the next major release for this very reason.

@jacobsfletch jacobsfletch marked this pull request as ready for review November 27, 2024 18:49
Comment thread packages/ui/src/providers/SearchParams/index.tsx
@jacobsfletch jacobsfletch merged commit 3961223 into main Nov 27, 2024
@jacobsfletch jacobsfletch deleted the fix/retain-params branch November 27, 2024 19:49
marwinhormiz pushed a commit to marwinhormiz/payload that referenced this pull request Nov 28, 2024
…ep nav

PR payloadcms#9576 fixes the issue with not preserving the search params when
going back to the list view after visiting a document, but it only works
by going back in the browser and not through the breadcrumbs or 'step
nav'. This solves it by adding a query field in the context type and
making sure that the url and query is added in the List component
directly.
@github-actions

Copy link
Copy Markdown
Contributor

🚀 This is included in version v3.2.2

jacobsfletch added a commit that referenced this pull request Dec 2, 2024
As described in #9576, the `SearchParamsProvider` can become stale when
navigating routes and relying on search params during initial render.
This is because this context, along with the `ParamsProvider`, is
duplicative to the internal lifecycle of `useSearchParams` and
`useParams` from `next/navigation`– but always one render behind.
Instead, we need to use the hooks directly from `next/navigation` as
described in the jsdocs. This will also remove any abstraction over top
the web standard for `URLSearchParams`.

For this reason, these providers and their corresponding hooks have been
marked with the deprecated flag and will continue to behave as they do
now, but will be removed in the next major release. This PR replaces all
internal reliance on these hooks with `next/navigation` as suggested,
except for the `useParams` hook, which was never used in the first
place.

```diff
'use client'
- import { useSearchParams } from '@payloadcms/ui'
+ import { useSearchParams } from 'next/navigation'
+ import { parseSearchParams } from '@payloadcms/ui'

export function MyClientComponent() {
- const { searchParams } = useSearchParams()
+ const searchParams = useSearchParams()
+ const parsedParams = parseSearchParams(searchParams)

  // ...
}
```
_MyClientComponent.tsx_
kendelljoseph pushed a commit that referenced this pull request Feb 21, 2025
Closes #9132. When query params are present in the URL, such as after
searching or filtering in the list view, they are not being retained
after navigating back to that view via `history.back()` (i.e. the back
button). This makes it difficult to quickly navigate in and out of
documents from the list view when an underlying search exists. This was
because the `SearchParamsProvider` is stale when the new view renders,
which then replaces the URL with these stale params. The fix here is to
_not_ use the `SearchParamsProvider` at all, and instead use
`next/navigation` directly. Ultimately, this provider should likely be
marked deprecated and then removed in the next major release for this
very reason.
kendelljoseph pushed a commit that referenced this pull request Feb 21, 2025
As described in #9576, the `SearchParamsProvider` can become stale when
navigating routes and relying on search params during initial render.
This is because this context, along with the `ParamsProvider`, is
duplicative to the internal lifecycle of `useSearchParams` and
`useParams` from `next/navigation`– but always one render behind.
Instead, we need to use the hooks directly from `next/navigation` as
described in the jsdocs. This will also remove any abstraction over top
the web standard for `URLSearchParams`.

For this reason, these providers and their corresponding hooks have been
marked with the deprecated flag and will continue to behave as they do
now, but will be removed in the next major release. This PR replaces all
internal reliance on these hooks with `next/navigation` as suggested,
except for the `useParams` hook, which was never used in the first
place.

```diff
'use client'
- import { useSearchParams } from '@payloadcms/ui'
+ import { useSearchParams } from 'next/navigation'
+ import { parseSearchParams } from '@payloadcms/ui'

export function MyClientComponent() {
- const { searchParams } = useSearchParams()
+ const searchParams = useSearchParams()
+ const parsedParams = parseSearchParams(searchParams)

  // ...
}
```
_MyClientComponent.tsx_
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search query is not preserved when navigating back to list view

2 participants