sm-select does not bind to data

[kbjerring]

I am experiencing problems with data-binding / event emissions using ngSemantic on page reload. It could appear that this is an issue with Semantic UI.

For example, in a standard "sm-select" dropdown data binding is lost upon page reload, and new selections in the dropdown does not fire an onChange event (No error messages are thrown). Both data binding and onChange events are restored if I navigate to another page and come back to the page with the "sm-select" again.

Using a Semantic UI select (without ngSemantic) appears to behave in a similar manner. I am not sure if this Plunker (not mine) is related to the issue?

In the plunker, if the following line is introduced, then the Semantic UI select is activated and appears in a "SemanticUI" way - but the change events and data binding are lost. If removed, data binding and events are restored (but the select no longer has the SemanticUI interface).

setTimeout(() => { 
jQuery(this.elementRef.nativeElement).find('select').dropdown(); 
}, 1);

[vladotesanovic]

Your selection on sm-select is lost upon reload or if you by mistake navigate to other page?

I tried here https://ng-semantic.herokuapp.com/#/elements/select to reproduce your problem about loosing binding or events, but i didn't been able to reproduce it.

[kbjerring]

The binding/events are lost upon reload of the page. When I force reload the page seems to load with bindings intact. But normal reload seems to lose those bindings - in this case, bindings can be re-established if I navigate away from the page and come back again.

[sguiheux]

Same problem for me :/. To reproduce the initialization problem with the demo, change this line : https://github.com/vladotesanovic/ngSemantic/blob/4f8413c82ed61f60bfb50b9edcae1f4b486502d6/demo/app/components/elements/select.ts#L158 with this one: selection: string = "Leanne Graham"; You will see that Leanne Graham is not selected.

[sguiheux]

With a bigger timeout, the problem not occurs: set model(data: string|number) { if (data) { setTimeout(() => { jQuery(this.select.nativeElement).dropdown("set selected", data); }, 400); } }