Semantic-ui: [Dropdown] Clicking on the dropdown icon will generate multiple hits to the server (when no results are returned).

Created on 3 Apr 2017  路  5Comments  路  Source: Semantic-Org/Semantic-UI

I was just about to upgrade to v2.2.10 when I noticed my remote dropdowns where generating multiple hits to the server when no results are returned. It also looks like the caching parameter is ignored.

For some reason this bug only happens if you click on the actual dropdown icon (you will see the loading icon spin, stop, spin, stop... ).

If you look at the console log you will see multiple repeated requests.

http://jsfiddle.net/kmd1970/pzcm8zo4/
(Please note this link needs to remain http:// for the remote ajax call to work properly)

Looks like this issue started in v2.2.8. In more recent versions (v2.2.7) the dropdown icon doesn't open the empty menu (after load) until you click into the input at least once, so this issue doesn't occur.

Confirmed Bug

Most helpful comment

Quick work-around is to define own onSuccess in apiSettings:

onSuccess(response, el) {
    el.dropdown('internal', 'remove').message();
    el.dropdown('internal', 'setup').menu({
        values: response.results
    });
    if (response.results && response.results.length) {
        el.dropdown('show');
    }
}

All 5 comments

Another test case in #5290 where the request loops infinitely:

Remote content dropdown creates infinite loop when clicked on it and server returns empty list response.
Apparently, clicking a remote content dropdown triggers show() function to queryRemote() with a callback to show() function. When server returns empty list, can.show() condition returns false because of has.items() and has.message() is false. Which creates infinite loop.
jsfiddle: https://jsfiddle.net/dhfa4730/
Step to re-produce: after running fiddle, click dropdown arrow.
Result: infinite loop request to server.

A bit critical issue.

Quick work-around is to define own onSuccess in apiSettings:

onSuccess(response, el) {
    el.dropdown('internal', 'remove').message();
    el.dropdown('internal', 'setup').menu({
        values: response.results
    });
    if (response.results && response.results.length) {
        el.dropdown('show');
    }
}

From what I understand this means that no message is added. As there's no message & no items, the query gets run again.

I can see the recursion in the logic here. I'll add a solve to next patch release.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

ghost picture ghost  路  3Comments

ghost picture ghost  路  3Comments

rdzidziguri picture rdzidziguri  路  3Comments

playgithub picture playgithub  路  3Comments