Semantic-ui: [Dropdown] should show "no results" instead of previous query result when filterRemoteData is false

[Bouke]

[Dropdown] should show "no results" instead of previous query result when filterRemoteData is false

Steps

1. Setup dropdown with remote API, specify filterRemoteData: false (default).
2. Query for something that exists, wait for the result.
3. Append to this query until the API returns no results.

Expected Result

1. The message "no results" is shown.

Actual Result

1. The results from step 2 will stay visible.

Version

2.4

Testcase

https://jsfiddle.net/yhzja8nd/

Analysis

1. In queryRemote, the no results message is actually being set: https://github.com/Semantic-Org/Semantic-UI/blob/c4e307c6c1a0b8c10f71b3c1b923d5e05253030c/dist/components/dropdown.js#L768.

2. However, it doesn't remove existing values, as would happen if there were any results: https://github.com/Semantic-Org/Semantic-UI/blob/c4e307c6c1a0b8c10f71b3c1b923d5e05253030c/dist/components/dropdown.js#L763-L765.

3. So adding the module.setup.menu({values: []}) probably would solve this issue. However, I'm not sure how this would work together with allowAdditions and possibly other advanced usages.

[pzanitti]

I'm having this exact same bug.

Note that when setting filterRemoteData: true as a workaround you probably also want fullTextSearch: 'exact' or your dropdown query might not be returning the same as your API query. From the fullTextSearch docs:

Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string.

[lubber-de]

Fixed since https://github.com/fomantic/Fomantic-UI 2.7.0 see https://jsfiddle.net/c092thvs/1/

[snickers54]

Hi guys, I might be late, still I see the problem and it's because in some cases (when you delete what you write inside the input), the API might not even be called (minCharacters: 2 for example).
In that case, the dropdown still display the content of the previous request however the input is empty.

And you can definitely see this behavior in the fiddle: https://jsfiddle.net/c092thvs/1/, type af then backspace to erase it, you still see the results in there, which might not be desirable for everyone.

Here are my settings:

{
        filterRemoteData: false,
        fullTextSearch: true,
        saveRemoteData: false,
        minCharacters: 2
}

And this is the fix I did myself inside the code:
Sorry I don't know how to tag the line / file with github.

                if(hasRemoteValues && module.has.minCharacters(module.get.query())) {
                  module.remove.message();
                  module.setup.menu({
                    values: response[fields.remoteValues]
                  });
                }
                else {
                  module.add.message(message.noResults);
                  module.setup.menu({
                    values: []
                  });
                }

[lubber-de]

@snickers54 The jsfiddle you are mentioning does not have any minCharacters setting, thus it uses its default 0 which, in turn, calls the API all the time
I adjusted the jsfiddle and added a minCharacters:2 and then the menu vanishes whenever the search length does not match, as expected:
https://jsfiddle.net/jt34k0cp/