preserveState not working properly

On my app with Vue3 have this watcher:

watch: {
    filter: {
        handler: _.throttle(function () {
            this.$inertia.get('/contacts', { filter: this.filter }, {
                preserveState: true,
                replace: true,
                preserveScroll: true,
            });
        }, 400),
        deep: true
    }
},

It keeps the v-model in the inputs but it loses the focus. The filtering works and have no errors in console, but after one key pressed, the page do the request and loses the focus on the input.

jbloomstrom

2 years ago

Level 50

I think debounce would be more appropriate for your use case.

In summary, throttle limits the execution rate of a function to once every X milliseconds, while debounce delays the function execution until an event has stopped occurring for X milliseconds.

watch: {
    filter: {
        handler: _.debounce(function () {
            this.$inertia.get('/contacts', { filter: this.filter }, {
                preserveState: true,
                replace: true,
                preserveScroll: true,
            });
        }, 400),
        deep: true
    }
},

Edit: But that doesn't answer why it's not preserving state. Can you share the entire component?

luismabenitez

2 years ago

Level 12

@jbloomstrom appreciate it. But the point was loosing the state / focus on the input.

Please or to participate in this conversation.