Semantic-ui: Dropdown does not respond to value changed by javascript

[jclee100]

See: http://jsfiddle.net/haq53nkf/2/

Huge problem for people using vuejs and similar systems where values are managed through JS.

[PhilLehmann]

Have a look at the Dropdown behaviours here: http://semantic-ui.com/modules/dropdown.html#/usage. set selected(value) should be your friend.

[jclee100]

Unfortunately, set selected is not very friendly with variable binding with libraries like vuejs.

[PhilLehmann]

Could you elaborate on that comment? I don't understand it :-)

Here is a working fiddle: http://jsfiddle.net/2vdgwrty/

[jclee100]

With libraries like vuejs, the input values are bind directly to the element.

You don't execute a method to set the value. You set a "model" variable on the input element and when the variable changes, the input is automatically updated. You could "watch" a variable manually and execute set selected every time it's updated, but that's not how it should work.

Information: https://vuejs.org/v2/guide/forms.html

Other libraries also work like this.

Semantic ui should not require the value to be set using a custom method. Instead, it should be watching the hidden input and triggering the the set selected method internally automatically.

[awgv]

Hi @komirad, this is an issue with Vue lifecycle, not SUI, and jQuery doesn’t play well with JavaScript frameworks in general. There were a lot of similar issues when I was doing a Vue 2/SUI project, but unless someone will do a Vue integration, I don’t think it makes sense to overengineer the jQuery version.

[PhilLehmann]

Instead, it should be watching the hidden input and triggering the the set selected method internally automatically.

If this is what you need for integrating vue and sui, then do it ;-)

[jclee100]

@Banandrew Since SUI is the one generating the hidden input(to replace the select element), shouldn't SUI also watch for changes in the hidden input? Not doing that means that every other library has to have custom code to work with SUI dropdowns.

Not sure if it's a jQuery problem. I am guessing coding in vanilla js, I would also be selecting using [name=] attribute to change the value. (Or setting the selected attribute on <option> but that has been replaced.)

[awgv]

@komirad SUI doesn’t replace select element, and hides it instead, but that doesn’t matter—I understand what you’re saying, and it does make a lot of sense to me; when you use jQuery libraries with JavaScript frameworks, extra code is, unfortunately, inevitable.