Space character doesn't get recognized in lodash's debounce method with b-taginput in buefy? - vue.js

Question

I am using buefy's b-taginput with lodash's debounce method to fetch data from an api source during the #typing event. The issue is when I hit spacebar in the input field , inside the debounce method the input character is not recognized as an actual character.
<b-field label="Roles">
<b-taginput
:value="this.objectData.roles"
:data="filteredTags"
autocomplete
field="role"
icon="label"
placeholder="add role..."
#focus="getAsyncRole"
#typing="getAsyncRole"
#input="(newValue) => {updateValue(newValue, 'roles')}"
>
<template slot-scope="props">
<p>{{props.option.role}}</p>
</template>
<template slot="empty">There are no items</template>
</b-taginput>
</b-field>
getAsyncRole: debounce(function(name) {
console.log('inside getAsyncRole and name.length is '+name.length) // the length is 0 when i hit
spacebar but why?
if (!name.length) {
this.filteredTags = [];
return; //exits the function if length of input is zero
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/role/?filter={role} LIKE '%25${name}%25'`)
.then(response => {
console.log('response for getasync role is'+JSON.stringify(response))
this.filteredTags = [];
response.forEach(item => {
this.filteredTags.push(item);
});
})
.catch(error => {
this.filteredTags = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
The above mentioned code works if I type any alphabetic character (i.e. it give's me the possible autocomplete results based on input character). But I also want it to list out all the autocomplete results (total results) when I hit spacebar into the b-taginput. Since it doesn't recognize the space character as an actual character, name.length become zero, and then it exits the function without making the api call.
NOTE: I noticed that this issue occurs only for b-taginput. This issue does not occur in the case of <b-autocomplete>. With <b-autocomplete> if I hit spacebar then I get all the results as desired. Therefore, I think this issue is specific only to b-taginput. Please help by advising a workaround for this.

Answer 1

The source code indicates that #typing trims the input before emitting it. This leaves a couple options, the best one (by far) is to pre-fetch the unfiltered list. With the list in hand, you can filter exactly as the example code does, searching for the input string within the list.
(The example code works because the empty string '' emitted by typing a space is "found" in every string)
Think about this: you're debouncing the API because you're concerned about hitting it too hard. Drop the debounce and just hit it once. Worried that fetching all tags is too long to wait? Just wait once and never wait again (consider that you were willing to incur this wait on every blank input).