Form reset button / label clearing

Topic: Form reset button / label clearing

andrewjknox asked 2 years ago

Click a form "reset" button containing a multiselect, all selected options are cleared (both in the textbox where they're comma-separated and the checkboxes themselves) and the multiselect dropdown label should reset back in place of the cleared options.

The options are not cleared and the label in the textbox is blank, though it has cleared the comma-separated selected options in the textbox.

https://mdbootstrap.com/snippets/standard/andrewjknox/5011746

Add comment

kpienkowska staff answered 2 years ago

1 0 Best answer

This is not a bug. It should work as it does. To reset the select value you need to use setValue method. Here is a snippet example: https://mdbootstrap.com/snippets/standard/kpienkowska/5015048

Add comment

andrewjknox answered 2 years ago

0 0 Best answer

Ahh, I see - right that change has got me part there, thanks!

But. If the page renders in with an option already selected, it doesn't clear? I'm rendering with a view model set in an ASPNET Core controller and binding server-side. So, users coming to the page (or submitting the filter form) via something like, "https://domain/?distances=5k"

Would this be a bug or in this scenario, can I get around this by rendering the selected options (csv) into a hidden input field and set programmatically client-side?

I've updated the snippet.

kpienkowska staff commented 2 years ago

"If the page renders in with an option already selected, it doesn't clear?" - I don't understand this question, sorry.

andrewjknox commented 2 years ago

I'd updated the snippet which showcases that issue (i.e. the selected option is set server-side, not client-side so renders the option as selected):

<option value="5k" selected="selected"<5K</option<

kpienkowska staff commented 2 years ago

I see. You can set initial options with Javascript using the same method I've added to the Reset button. If you render the way you do now it should also work correctly.

andrewjknox commented 2 years ago

Just on your last comment, that approach didn't work when the page loads in with selected options, where I used setValue('') - it cleared the textbox, but left the checkbox checked.

kpienkowska staff commented 2 years ago

Do you mean that the reset button didn't work or setting value with js?

If you set values with JS you need to remove passing initial values with HTML. Also, make sure your JS is executed after the page is loaded.

Example in the snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/5040698

Add comment