fix(search): desktop Clear all keeps the search
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m13s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 17s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 17s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m13s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 17s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 17s
The desktop toolbar's Clear went to the bare home URL, dropping the search along with the filters, so it landed on the home page instead of the unfiltered results. It now clears every filter and keeps the search, postcode and distance, as the phone's Clear all already did. It is offered only once a filter is applied, since with only a search there is nothing for it to clear, and is labelled Clear all to match the phone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
19c574edb0
commit
0450f8ecd6
3 files changed
+41
-25
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import { act, fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { HomeView } from '@/components/HomeView';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
import { fetchSchools } from '@/lib/api';
|
||||
@@ -175,3 +175,24 @@ describe('the results list', () => {
|
||||
expect(screen.queryByText('Search: southmead')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the desktop Clear all', () => {
|
||||
const row = () => screen.getByRole('group', { name: 'Filters' });
|
||||
|
||||
it('removes the filters and keeps the search, rather than going home', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=3&phase=primary&school_type=council&local_authority=Wandsworth');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(within(row()).getByRole('button', { name: 'Clear all' }));
|
||||
const pushed = push.mock.calls.at(-1)![0] as string;
|
||||
const next = new URLSearchParams(pushed.split('?')[1]);
|
||||
expect(next.get('postcode')).toBe('SW196AR');
|
||||
expect(next.get('radius')).toBe('3');
|
||||
for (const key of ['phase', 'school_type', 'local_authority']) expect(next.get(key)).toBeNull();
|
||||
});
|
||||
|
||||
it('is not offered when only a search is applied', () => {
|
||||
params = new URLSearchParams('search=southmead');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(within(row()).queryByRole('button', { name: /^Clear/ })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -377,31 +377,13 @@ export function FilterBar({
|
||||
updateURL({ ...cleared, [key]: value });
|
||||
};
|
||||
|
||||
// Every filter at once, keeping the search and its distance: what "Clear
|
||||
// all" means beside the applied filters, where the search is not one of them.
|
||||
// Every filter at once, keeping the search and its distance. The search is
|
||||
// what the results answer, not a filter on them: clearing it too used to
|
||||
// send desktop back to the home page.
|
||||
const handleClearFilterValues = () => {
|
||||
updateURL(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setOmniValue("");
|
||||
pendingQueryRef.current = "";
|
||||
startTransition(() => {
|
||||
router.push(pathname);
|
||||
});
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
currentSearch ||
|
||||
currentLA ||
|
||||
currentType ||
|
||||
currentFaith ||
|
||||
currentPhase ||
|
||||
currentPostcode ||
|
||||
currentGender ||
|
||||
currentAdmissionsPolicy ||
|
||||
currentHasSixthForm;
|
||||
|
||||
/*
|
||||
* A filter's options come from the full lists, not from the results: the
|
||||
* results have already been narrowed by that filter, so scoping to them
|
||||
@@ -844,14 +826,14 @@ export function FilterBar({
|
||||
/>
|
||||
</button>
|
||||
|
||||
{hasActiveFilters && (
|
||||
{appliedCount > 0 && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
onClick={handleClearFilterValues}
|
||||
className={`btn btn-tertiary ${styles.clearButton}`}
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
>
|
||||
Clear
|
||||
Clear all
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user