Level 6
did you ever figure this out? I'm having the same issue right now, and can't figure it out.
Mar 27, 2021
4
Level 12
Keep focus state on input - Inertia.js
I've got a search filter function very similar to PingCRM, with a watch function making a get request to the current route to filter the results.
The only real difference between my app and PingCRM is that I'm using Inertia.get instead of Inertia.replace , as advised in the docs.
But when the results load, the input loses focus.
So, I pass preserveState: true to the options on Inertia.get.
The input remains focussed now, but the results of thequery filter don't update.
I've solved this by watching the prop and updating the data manually in the watch function.
But Jonathan's code doesn't do this last bit and input remains focussed when the results load. I can't figure out why... Can anyone advise what might be missing?
I've tried autofocus, but it doesn't work. The only other difference is that I'm not using his query string package to remove the query string.
If you've not looked at PingCRM then this video explains the query filter I'm referencing about halfway through https://laracasts.com/series/learn-inertia-with-jeffrey/episodes/10
Level 6
@pweil In the router.get, use preserveState and replace. For example:
router.get('/products', { search: value }, { preserveState: true, replace: true });
Then after that, just update the screen as needed, but the focus remains on the search input element.
2 likes
Level 12
Sorry I don't remember!
Level 12
1 year later and I find my own post via a google search...
I found out that router.reload() keeps the focus on the input, but has the undesired effect of repeating certain array query string params because it uses the current url.
If you look at the inertia source code for reload(), and carry those options across to router.get(), you can keep the input focused while also maintaining the desired query params.
inertia source code:
public reload<T extends RequestPayload = RequestPayload>(options: ReloadOptions<T> = {}): void {
if (typeof window === 'undefined') {
return
}
return this.visit(window.location.href, {
...options,
preserveScroll: true,
preserveState: true,
async: true,
headers: {
...(options.headers || {}),
'Cache-Control': 'no-cache',
},
})
}
example in my project:
watchDebounced(
filters,
(value) => {
router.visit(route('gr-list.index'), {
data: {
filter: {
search: value.search,
manufacturingOrders: value.manufacturingOrders,
purchaseOrders: value.purchaseOrders,
},
},
only: ['query', 'currentInventoryItems', 'depletedInventoryItems'],
preserveScroll: true,
preserveState: true,
async: true,
})
},
{ debounce: 250 },
)
Please or to participate in this conversation.