[Bug]: Dropdown with previous search filter retains cached options

[jeremystretch]

Bug description

I'm not sure if this is considered a bug, but I found it confusing for my use case.

I'm working with a TomSelect instance which queries a remote API to populate its options. When I enter search text, this is conveyed along with the API request so that only relevant responses are returned.

A problem arises when I enter search text, close the dropdown, and re-open it: The filtered set of options is still present, however the original filter text is not. There does not seem to be a way to clear or otherwise re-initialize the search without entering a new search filter.

For many use cases, this makes sense. However, when considering a use case where searching is optional, this is likely to confuse the user.

Expected behavior

IMO this could be improved by either:

1. Retaining the initial text so that it's clear to the user that a filter is in place; or
2. Clearing the filter on blur if no selection has been made.

Steps to reproduce

We can use the first example on this page (under "Ajax Loading") to observe the behavior.

1. Start searching for a repository. We'll use the string django.
2. After a moment, a set of relevant repositories is populated in the dropdown.
3. Click elsewhere on the page so that the input loses focus.
4. Open the dropdown again. Notice that the list of options remains the same, however our search text is gone. There is no way to clear the search filter without entering and deleting new text.

Additional context

• Version: v2.3.1

[Kreyu]

Hey @jeremystretch. I'm currently facing the same issue, and as a "workaround" I'm fetching the data from remote each time the dropdown opens:

new TomSelect('...', {
    onDropdownOpen: function () {
        this.clearOptions();
        this.load();
    },
    load: function (query, callback) {
        fetch(this.getUrl(query))
            .then(response => response.json())
            .then(data => {
                callback(data.items);
            })
            .catch(() => {
                callback();
            });
    }
});

For some reason, the built-in load function was causing another issue - the dropdown wasn't opening after second/third click. I tried overriding the shouldLoad option to always return true, but then, the results weren't fetched from the remote, and Tom Select displayed "no results". Everything seemed to be working properly after I manually configured the load option.

Additional checks can be provided to force fetching the remote data conditionally, but I haven't tested it, since in my case, I'm always fetching the data (due to other custom features that can change the URL of the remote).

I've already spent enough time on this, if someone has more elegant solution, I'm all ears 😄