[Dropdown] The selected item should change when reset the form

[ko2in]

Bug Report

Currently, the dropdown inside the form has no affection when the form triggers the reset event. It keeps showing the current selected value instead of the initial value. The select element is already responding properly to the reset event. But, the dropdown text container <div class="text"/> doesn't attach to the reset event and thus never update the text.

The other components: radio, checkbox are responding the reset event properly.

Steps to reproduce

1. Create the form and add the select element
2. Set default selected option for initial value
3. Convert the select element into dropdown component ($('select').dropdown())
4. Select something from the selection dropdown
5. Click the reset button of form or manually trigger reset event

Expected result

The dropdown should also reset the text with it's initial value.

Actual result

The dropdown keeps showing the current selected value.

Testcase

Open this fiddle (https://jsfiddle.net/v25tau6j/). Make some changes in the form and then click reset button.

Version

2.7.4

[lubber-de]

According to the docs, resetting a form should be done differently in FUI. The usual type=reset form behavior won't work, because dropdown uses a hidden input.

See https://fomantic-ui.com/behaviors/form.html#reset--clear-fields
Adjusted your fiddle here https://jsfiddle.net/42r3h6t1/

[lubber-de]

Another Workaround if you still want to stick with the type=reset button:
Instantiate the form with an explicit selector for the reset type

 $('.ui.form').form({
    selector: {
    	reset: '[type="reset"]'
    }
  });

See https://jsfiddle.net/mxbz7htj/

[ko2in]

@lubber-de Thanks, it works for resetting the dropdown. However, it brings another issue to me. I've a form with change event, and resetting the form using FUI form component also triggers the change events depend on the number of fields which had already changed.

Native form event: https://jsfiddle.net/bkLhzmv8/
FUI form event: https://jsfiddle.net/95gy7wxe/

Please watch the console for the output returns from the form change event.

In my project, I have change event attaches to the form and send Ajax request to server when the change happens immediately. Resetting with FUI form('reset') sends several Ajax requests to server.

With native form reset event, I don't have that problem. But, just the dropdown text not get updated.

[lubber-de]

Here is a proposal: https://jsfiddle.net/se37b2qh/
The onchange is still triggered, but you check for the onchange event on the dropdown directly if the value was empty -> then it was a reset and your code is not doing any ajax-calls

There is too much stuff to consider and change and probably breaks other code if we would change the set.value method to not trigger the onchange event in some cases (and there can be a lot), so for the time being, i suggest you catch this in your own code if its not possible for you to use the "offical" FUI way

[ko2in]

@lubber-de Thank you. I'll look the fiddle and check whether your proposal suits in my work. If not, I'll leave it as it's or use the native selection element. I'm closing this issue then.