Semantic UI dropdown allowAdditions - add to menu?

Question

I'm trying to use the allowAdditions: true setting on a single search selection dropdown, and it's behaving as expected, however I am trying to have it behave a little differently and cannot find any examples or documentation suggesting how it can be done if it's possible.

Right now, when I enter a new value, it simply sets the value of the hidden input and that's it. What I want, is to have it actually add that item to the menu and not just set the inputs value.

Alternatively, is there a callback that lets me know when a custom value has been added so I can handle the rest in javascript. I've tried the onLabelCreate callback, but I think this only works for a multi-select dropdown so it's never fired

Edit

OK so looks like this is a known bug https://github.com/Semantic-Org/Semantic-UI/issues/5759 but doesn't help with the callback issue.

For now as a horrible workaround, I've kept a list of the dropdown contents on page load, then when the onChange callback is fired, check to see if the newly selected value is present in the list. If not, then it adds a new menu item to the dropdown, selects it, and adds to the list of known items. Horribly hack but it works for now

helenej helenej · Accepted Answer · 2020-02-13T10:39:27

There is an alternative to the workaround you mention, in the onChange() callback you can check whether $choice (third parameter corresponding to the element) has class addition, like this:

$('.dropdown').dropdown({
    ignoreCase: true,
    allowAdditions: true,
    hideAdditions: false,
    onChange: function(value, text, $choice) {
        if ($choice.hasClass('addition')) {
            console.log(`adding ${value}`);
        }
    }
})

Semantic UI dropdown allowAdditions - add to menu?

1 Answers