Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jackward-countdown opened this issue Jun 4, 2021 · 1 comment

Comments

@jackward-countdown
Copy link

jackward-countdown commented Jun 4, 2021

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.
@ybitso
Copy link

ybitso commented Mar 3, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants