Level 63
When you say navigate back, is it with the back button in the browser or do you navigate back using a button on the web page ?
In my projects / Index component i have this code and when I search anything and get's the expected result and try to navigate back to the same projects/ index url on i had searched earlier the input search component get's clear and even also from the url params.
my code
const page = usePage();
const projects = computed(() => page.props.projects);
const breadcrumbLinks = [
{ name: 'Dashboard', href: route('admin.dashboard') },
{ name: 'Projects', href: route('projects.index') },
];
// Create form with search field
const form = useForm({
search: page.props.search ?? ''
});
// Debounced request for search
const debouncedSearch = debounce(() => {
form.get(route('projects.index'), {
replace: true,
preserveScroll: true,
preserveState: true
});
}, 500);
// Watch form.search directly
watch(() => form.search, () => {
debouncedSearch();
});
// Cancel debounce on unmount
onUnmounted(() => {
debouncedSearch.cancel();
});
The main issue comes here in the Notifications / Index component I was expecting the same behaviour but did not get the input cleared.
my code
const page = usePage();
const notifications = computed(() => page.props.notifications);
// Form (search + filter + date)
const form = useForm({
search: page.props.search ?? "",
filter: page.props.filter ?? "all",
from_date: page.props.from_date ?? "",
to_date: page.props.to_date ?? "",
});
// Debounced request
const debouncedSearch = debounce(() => {
form.get(route("notifications.index"), {
replace: true,
preserveScroll: true,
preserveState: true,
});
}, 500);
// Watch search, filter, and dates
watch(
() => [form.search, form.filter, form.from_date, form.to_date],
() => {
debouncedSearch();
}
);
// Cleanup
onUnmounted(() => {
debouncedSearch.cancel();
});
Is there anything I am missing ?
Please or to participate in this conversation.