[Dropdown] `set selected` trigger multiple times `onChange` callback when selecting multiple values

Bug Report

Steps to reproduce

1. Create a multiple selection dropdown
2. Use the set selected behavior to add at least two selected values
3. !?

Expected result

onChange is fired once

Actual result

onChange is fired multiple times

Testcase

https://jsfiddle.net/kqbfpwm6/1/

Related SUI issues

Semantic-Org/Semantic-UI#4913 Semantic-Org/Semantic-UI#4691

[cupcakedream]

Would love to see this change made +1

[ardamose123]

I’d like to tackle this. However, what I read in the discussion and how onChange works currently look different.

Currently, after using set selected, the onChange callback is fired once for each provided value that was not previously selected. The callback receives 3 parameters, value, text and $choice, as per the documentation in https://fomantic-ui.com/modules/dropdown.html#/settings.

The fix would be to have a configuration setting for .dropdown({ ... }) to trigger onChange either once per affected option or just once per “batch operation” (set selected, remove selected). This setting will affect the data sent through the second parameter to the onChange(value, text, $choice) callback.

Am I on the right track here?

Another possible solution would be to have a completely new callback function (onUpdate or similar name) that provides the callback with the values and texts/labels as arrays and fires only once per batch operation. This shouldn’t break any existing code in the end; people who want to have this new behavior would use the new callback instead of the existing onChange.