bulma-tagsinput icon indicating copy to clipboard operation
bulma-tagsinput copied to clipboard

Autocomplete via 'Dynamic data source' fetch call has race condition

Open jackward-countdown opened this issue 3 years ago • 1 comments

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.

jackward-countdown avatar Jun 04 '21 05:06 jackward-countdown

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)
                    }
                }

ybitso avatar Mar 03 '22 20:03 ybitso