Choices: Searching with ajax broken in 4.1.0

[samueldjack]

Version 4.1.0 seems to have introduced a bug which isn't present in 4.0.5. Namely, when I open the dropdown and start typing, the textbox looses focus after each character and I can't type any more.

Our code is responding to the search event by calling the ajax method (and it is making sure to call the callback supplied by the ajax method once it has obtained the data).

[jshjohnson]

Hey - could you please provide a jsfiddle highlighting the issue please?

[stale[bot]]

Thanks for contributing to this issue. As it has been 60 days since the last activity, this issue is being automatically closed. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If that's not the case, please do feel free to either reopen this issue or open a new one. We'll gladly take a look again!

[edtownend]

I've run into this problem too - as a workaround, I'm calling choices.input.element.focus(); immediately after the call to the ajax callback.

To clarify, example code would look like this:

choices.ajax((callback) => {
    fetch(url)
        .then((response) => {
            callback(response.data, 'value', 'label');
            choices.input.element.focus();
        });
});

[majksner]

Experiencing similar issue. I'm losing focus on each keypress when using callback. If I use setChoices then after first key press select becomes disabled.

[majksner]

Here is the Jsfiddle

https://jsfiddle.net/60ac9hL3/1/

[tkaprol]

I have exactly same issue too. I am using v6.0.3

[majksner]

Use the latest version, and run the callback method after ajax call.

[ssc-hrep3]

You need to use the callback function instead of setChoices(). I've updated the fiddle of @majksner here:
https://jsfiddle.net/dz3gwhb7/

[noelrappin]

Hey, I still see this problem even if I use setChoices (at least in some browsers). If I explicitly add focus per @edtownend, it comes back, but slowly and keystrokes can get lost. Has anybody fixed this, or do I need to revert back to 4.0.5?

[jshjohnson]

Closing as ajax has been removed from version 8.*

[yogeshjain999]

I faced same issue as @samueldjack while using setChoices with a promise.

example.setChoices(async () => {
  const items = await fetch('/items');
  return items.json();
});

But if the data is loaded separately and then passed to setChoices, it seems to work.

async onSearch(e) {
  const response = await fetch(`/items?q=${e.detail.value}`);
  const data = await response.json();

  example.setChoices(data, 'value', 'label', true);
}

[KaraAJC]

Looks like this is related: https://github.com/jshjohnson/Choices/pull/701