Search in panel shows old results when response times from server vary

[toebu]

Description

The search in the panel can show partial/old results when the response time from the server can vary. Example: You want to search for "test". You type slowly, so a first query is launched for "te", then another one when you finished typing "test". If the request for "test" is faster to load, it shows those results. If afterwards the request for "te" completes, it overwrites the results shown. So you seem to see the results for "test" but you actually see the results for "te".

Expected behavior
When a new search query is launched, the old running queries should be canceled so that this behaviour can't happen.

To reproduce

Easiest way might be to overwrite the search method to include a random delay:

Kirby::plugin('searchtest', [
    // This is overwriting the search used in the panel
    'areas' => [
        'site' => function ($kirby) {
            return [
                'searches' => [
                    'pages' => [
                        'query' => function (string $query = null, int $limit, int $page) use ($kirby) {
                            sleep(rand(0, 3));
                            // Simply pass on to the core search
                            return $kirby->core()->area('site')['searches']['pages']['query']($query, $limit, $page);
                        }
                    ]
                ]
            ];
        },
    ]
]);

Then go to the panel and quickly type part of the query, wait half a second, then type the rest. You might have to try a few times so that the first query actually takes longer than the second one.

Your setup

Kirby Version
4.2.0

Additional context
The behaviour might not happen with just the default setup and few results. But if you overwrite the panel search with a custom search that e.g. fetches data from a big DB or another API, this happens and there's no way to fix it within the custom search.

[nilshoerrmann]

Just for reference, this issue can be fixed by using abort controllers in the search Vue component: https://developer.mozilla.org/en-US/docs/Web/API/AbortController.