[Dropdown] mutation observer should restore selection

Steps

I use i18next with aurelia and when switching language, all static strings in the ui are updated. This includes the placeholders of all sui form elements. In the case of the dropdowns, the mutation observers see the modification to the

and recreate the component but the selection is not visually reapplied...

Expected Result

I would expect the selection to remain after changing the placeholder value of the component set in the

Actual Result

The component loses its selection and displays the placeholder instead

Version

2.3.0

Testcase

Kind of difficult to reproduce exactly, unfortunately...

y0hami commented 6 years ago

Have you tried using the refresh behavior https://semantic-ui.com/modules/dropdown.html#behavior

gama410 commented 6 years ago

thanks for your answer @hammy2899 ! unfortunately, this does not work... I tried to refresh the dropdown after changing the locale but nothing changed. The mutation observer already does that I think so it would be a bit redundant... I retrieved the selected value at the same time with the 'get value' behavior and it was correct, just not displayed...

any idea?

y0hami commented 6 years ago

How are you building the dropdown, can you provide some code showing the HTML you use?

gama410 commented 6 years ago

Sure!

My html looks like this: `

    <div class="default text" t.bind="placeholder"></div>
    <i class="dropdown icon"></i>
    <div class="menu"></div>
</div>`

note that the placeholder is bound by aurelia. It is automatically updated to its new value when the locale changes.

I initialize it like this : $('.ui.dropdown').dropdown({ allowReselection: true, fullTextSearch: 'exact', match: 'text', });

So, when I switch the value of my dropdown, it actually changes the locale of the application, which will modify the placeholder. I watch for locale change with this code:

ea.subscribe('i18n:locale:changed', function(payload) { $('.ui.dropdown').dropdown('refresh'); console.log($('.ui.dropdown').dropdown('get value')); });

which calls the refresh behavior (no effect unfortunately) than displays the value in the dropdown's state correctly updated (when I clicked on 'us', 'us' is correctly set).

I noticed in the dropdown mutation observer that we execute the following code : doesn't it already do the dropdown refresh?

if(isSelectMutation) { module.disconnect.selectObserver(); module.refresh(); module.setup.select(); module.set.selected(); module.observe.select(); }

Semantic-Org / Semantic-UI