CODEWITHSUNDEEP
semantic-ui
vst
vst

Reputation: 21

semantic-ui dropdown with remote selection menu content: 'clear' and 'set exactly' remove placeholder

I'm creating a dropdown with batched results (fetched from a remote source, using the apiSettings.url member), with a static placeholder text. Everything works (more or less) fine, until I call either dropdown('clear') or dropdown('set exactly'), which both do what they're supposed to - but additionally remove my placeholder text. Could this be the desired behaviour? Am I missing something?

Here's an example dropdown HTML:

<div name="dropdown" class="ui  fluid multiple search selection dropdown">
  <input class="search" tabindex="0">
  <div class="default text">my disappearing placeholder</div><i class="dropdown icon"></i>
  <input type="hidden" name="temporary">
  <div class="menu"></div>
</div>

And a stripped-down dropdown initialization code:

$('.ui.dropdown').dropdown({
  fullTextSearch: true,
  allowAdditions: false,
  apiSettings: {
    url: "<some URL returning search results for list>"
  }
});

And the culprits(?):

$('.ui.dropdown').dropdown('clear');

or

$('.ui.dropdown').dropdown('set exactly', ['value1', 'value2']);

The issue is demonstrated here: http://jsfiddle.net/11coy51r/3/

Either click the 'set exactly' button and then delete the value added, or type any artist name (from Spotify's catalog), select it, and then click clear. Both result in an empty dropdown input box, without the previously visible placeholder.

Bonus question:

I had a really hard time (and arguably have failed miserably) producing a simple demo for this issue, mainly because of the 'set exactly' part. So I'm wondering, am I missing something there? Is there a better way of using 'set exactly' on a remote contents dropdown, other than manually adding the selection items to the menu before setting the selected values?

Upvotes: 2

Views: 2177

Answers (1)

JesperGK
JesperGK

Reputation: 31

There is currently something amiss with the Semantic UI source, where the refresh function removes the placeholder/default text data, at least when allowAdditions or remote data/API is used.

I found a fix until the Semantic UI devs fix it. https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/dropdown.js in line 390-392 - function refreshData, outcomment the following:

//.removeData(metadata.defaultText)
//.removeData(metadata.defaultValue)
//.removeData(metadata.placeholderText)

This will of course require you to store the modified js-file locally for the time being.

Hope this helps.

Upvotes: 3

Related Questions