Fomantic-UI - Initialization of dropdown with settings

Question

There is probably a simple solution for this one, but I'm not able to figure it out. After going from Semantic-UI to Fomantic-UI an change has occured, that I need help with.

When initializing a dropdown that I want to show, this worked earlier:

$('.ui.dropdown').dropdown('show',{                                 
  maxSelections:2  
});

But it seems like the settings are ignored (maxSelections in this case).

If I use:

$('.ui.dropdown').dropdown({                                    
    maxSelections:2  
});

the settings work just fine.

Working https://jsfiddle.net/ruznv83a/2/

Not working https://jsfiddle.net/ruznv83a/1/

I would appreciate any help :)

I don't think you can do that (both show and change the settings), I think you'll need two calls, something like `$('.ui.dropdown').dropdown({maxSelections:2}).dropdown('show');` — Titus, Jan 28 '20 at 08:42
Hi - in my recent experience there is the well-run community at the Fomantic-UI Discord server and specifically the support > Need help channel. Also, if you want to see the code for the DD component it is here, in case it helps. https://github.com/fomantic/Fomantic-UI/blob/master/dist/components/dropdown.js — Vanquished Wombat, Jan 28 '20 at 08:47
Titus: It worked earlier with a combined call, but not anymore. But your solution works fine, so I'll go for that one for now :) Thanks! I'll pop by the Discord server to see if there are any comments there as well! :) — Alexander N, Jan 28 '20 at 08:55
@AlexanderN - I searched that channel for DropDown and there are many hits but nothing I could relate to you query in the first page full (50). But you will find that the devs will respond if you continue to be polite and open. They aren't verbose but I guess they have taken on a significant task for no pay! — Vanquished Wombat, Jan 28 '20 at 08:58
I posted on the Discord channel now, but it looks like there is a 9 to 1 ratio on questions to answers.... They have really taken on a huge task, but I really hope they can keep it up, and not hit a dead end like Semantic-UI did. I would gladly pay for the development to continue. Maybee through support :) — Alexander N, Jan 28 '20 at 09:08
My experience to date has been that questioners who provide well considered questions on specific topics with a fiddle example get optimum responses. Re the ratio you mention, that's kind of how it pans out as you realise that your best route to a workable answer is to 'show your workings'. I reckon they talk best in JavaScript anyway ;-) — Vanquished Wombat, Jan 28 '20 at 09:20
@AlexanderN - did my answer below get you past the issue ? If you could upvote it I would be pleased as I am at 4,995 points and dearly want to get 5K ! — Vanquished Wombat, Feb 06 '20 at 16:52

score 0 · Answer 1 · answered Jan 28 '20 at 09:30

If I understand it correctly, the issue is in the switch to object-based delivery of parameters into the dropdown module. Looking at the source code, around line 26 we see:

$.fn.dropdown = function(parameters) {
...

which is the point where the dropdown functionality is first announced so that you can call $('selector').dropdown();. Then aroudn line 50 we see:

settings = ( $.isPlainObject(parameters) )
    ? $.extend(true, {}, $.fn.dropdown.settings, parameters)
    : $.extend({}, $.fn.dropdown.settings),

which is looking at the makeup of 'parameters' and deciding how to interpret it - basically if parameters is a JS object then it is used by merging into the dropdown defaults, otherwise the defaults are used alone.

Going back to your testing, in the case of:

$('.ui.dropdown').dropdown('show',{                                 
  maxSelections:2  
});

you are passing in 2 arguments, and only the first is used in the $.fn.dropdown function, so the maxSelections option is ignored, as per your result.

In the case of:

$('.ui.dropdown').dropdown({                                    
    maxSelections:2  
});

The parameter you have supplied is indeed a plain object, hence it has the desired result.

This is a technical explanation of what you are seeing of course, but it still leaves the question 'how would I find this in the docs?' I believe the docs have some catching up to do - I hope the FUI team get on top of that soon because the work they are doing is high quality and the docs are undermining their work, IMHO.

Also as a matter of opinion, I think the move to a JS-object parameter approach is the right course to steer. So whilst this might be a 'mind-breaking change' for anyone coming from a Semantic-UI background, it will offer a more standard approach when applied across all FUI components. I would expect to come across this change with all components over time.

Fomantic-UI - Initialization of dropdown with settings

1 Answers1