[Dropdown] Api dropdown should destroy selection menu if API returns an empty array

[truesteps]

Steps

When affecting one api dropdown by another, meaning that I select a project, then I want to choose a task but only from the pool of tasks for that given project, I can still see the tasks of the preset project.

• create 2 api dropdowns
• one has a default selected value
• update query url of second dropdown by results of the first dropdowns selection
• open second dropdown

Expected Result

There should be an empty menu with the message no results

Actual Result

The API returns an empty array and the dropdown menu doesn't regenerate with the no results message but stays the same.

Version

2.4.2

Hacky solution

I fixed it by overwriting the onSuccess behaviour of the dropdown, in apiSettings.

onSuccess: (response) => {
	const values = response[fields.remoteValues];
	const hasRemoteValues = (_.isArray(values) && values.length > 0);

	this.$dropdown.dropdown('setup menu', {
		values,
	});

	if (hasRemoteValues) {
		this.$dropdown.dropdown('remove message');
		this.$dropdown.dropdown('show');
	} else {
		this.$dropdown.dropdown('add message', 'No results');
	}
},

Currently implemented

 onSuccess : function(response) {
                var
                  values          = response[fields.remoteValues],
                  hasRemoteValues = ($.isArray(values) && values.length > 0)
                ;
                if(hasRemoteValues) {
                  module.remove.message();
                  module.setup.menu({
                    values: response[fields.remoteValues]
                  });
                }
                else {
                  module.add.message(message.noResults);
                }
                callback();
}   

Possible solution

 onSuccess : function(response) {
   var
                  values          = response[fields.remoteValues],
                  hasRemoteValues = ($.isArray(values) && values.length > 0)
                ;

                  module.setup.menu({
                    values: response[fields.remoteValues]
                  });

                if(hasRemoteValues) {
                  module.remove.message();
                  callback()
                }
                else {
                  module.add.message(message.noResults);
                }
}

Sorry for the bad formatting on the code, copied it from IDE here, other than that it should work as expected if modified.

[lubber-de]

This should be fixed in the community fork Fomantic-UI since v2.7.0 by https://github.com/fomantic/Fomantic-UI/pull/300