SearchForm: fix inconsistent/mixed search results

- SearchForm.vue: route Enter key through submit() (native form submit
  interception) so it behaves like the button; fix autocomplete array
  mutation during iteration in the typed watcher.
- Base.vue: parse terms consistently in beforeRouteUpdate; render items
  via displayedItems (drops sparse holes); only mount infinite-loading
  after the first page and reset it per search via :identifier.
- search store: guard against stale async responses (searchId); place
  each page at its offset instead of concatenating in arrival order,
  which mixed pages when a later page resolved first.
This commit is contained in:
2026-07-15 21:11:53 +02:00
parent 3bbc26e5b7
commit 2f5a230370
3 changed files with 85 additions and 24 deletions
@@ -135,16 +135,17 @@ export default {
// let tag_list = n
// }
// remove terms from autocomplete if removed from typed
if (typeof n !== 'string') {
return
}
const r = /,\s?$/ // remove last comma space
let tag_list = n.replace(r,'').split(', ')
console.log('watch typed tag_list', tag_list)
console.log('watch typed autocomplete before', this.autocomplete)
this.autocomplete.forEach( (term,index,array) => {
console.log("watch typed autocomplete term", term, index, array)
if (tag_list.indexOf(term.label) < 0) {
this.autocomplete.splice(index,1)
}
});
// Keep only the terms whose label is still present in the typed text.
// Filtering into a new array avoids skipping items when splicing during
// iteration (which left stale terms in autocomplete, corrupting `terms`).
this.autocomplete = this.autocomplete.filter(term => tag_list.indexOf(term.label) >= 0)
console.log('watch typed autocomplete after', this.autocomplete)
},
keys(n, o){
@@ -166,6 +167,20 @@ export default {
mounted(){
// console.log('SearchForm mounted')
Drupal.attachBehaviors(this.$el);
// Route the native form submission (Enter key) through the same submit()
// method as the button (@click.prevent="submit"). Without this, pressing
// Enter either triggers a native POST reload or only fills the jQuery UI
// autocomplete selection, so keys/terms sent to the backend differ from a
// button click and the search results are inconsistent.
// Note: when the autocomplete menu is open, jQuery UI handles Enter itself
// (selects the highlighted suggestion) and prevents this submit event, which
// is the intended behaviour.
this.$el.addEventListener('submit', (e) => {
e.preventDefault()
this.submit()
})
// get the search input
this.$input = this.$el.querySelector('#edit-search')
// // focus on input