[Dropdown] Multiple Selection causes infinite loop in Vue projects

[Kingo64]

Bug Report

Regression from v2.9.3. When using a multiple selection dropdown an infinite loop occurs when selecting a dropdown value when using Fomantic UI in a Vue project.

If I were to guess the cause I'd say that it seems that this issue was introduced by #3000.

Adding preventChangeTrigger = true; before the following line seems to resolve the infinite loop: module.remove.labels($module.find(selector.label), true);

Steps to reproduce

1. Create a multiple select dropdown field in a Vue project initialised from a <select> element
2. Try to select a value

Expected result

You are able to select values correctly and the selected value will update.

Actual result

It causes an infinite loop.

Testcase

Broken: v2.9.4 https://jsfiddle.net/6f7jyskh/ Working: v2.9.3 https://jsfiddle.net/qg2hfmz5/

Note: You may need to reload the jsfiddles if the dropdown doesn't load correctly. I wasn't entirely sure how to get jquery and Fomantic UI working in a fiddle properly with Vue lifecycle events (mounted()) so I used a hacky setTimeout(). I hope it still illustrates the problem.

Screenshot (if possible)

n/a

Version

2.9.4

[lubber-de]

Thanks for this finding.

In the end your suggested fix solves it, but the reason / loop trigger was caused later in the code in combination with vue's change event which itself modfies the dropdown

Solved by #3385