bulma-tagsinput
bulma-tagsinput copied to clipboard
Autocomplete via 'Dynamic data source' fetch call has race condition
For example you can see this in effect in the documentation itself given your response time to the dynamic data source is high enough.
- Go to Dynamic Data Source on: https://bulma-tagsinput.netlify.app/get-started/usage/
- Type a country name as quickly as you can without making a typo
- If I type "New Z" in 0.2 sec and my response time from the server is 0.21 sec, 4 fetch calls will be fired to return a source. Once the 4 different fetch calls have completed, the autocompleted tags are now populated with "New Zealand" 4 different times.
I have the same issue with my code with using api call in source
Any fix or workaround for this without changing source? My hackish fix was modifying the js
key: "_createDropdownItem",
value: function _createDropdownItem(t) {
if (this.dropdown) {
//start custom mod - check if value already exists in dropdown
const els = [...this.dropdown.children]
for (let x = 0; x < els.length; x++) {
if (els[x].getAttribute('data-value') == t.value)
return
}
//done custom mod
var e = document.createRange().createContextualFragment((0, _.default)({
text: t.text,
value: t.value
})).firstElementChild;
e.dataset.value = t.value, e.dataset.text = t.text, e.addEventListener("click", this._onDropdownItemClick), this.dropdown.append(e)
}
}