Topic: material select not working with all options selected

root-nine priority asked 5 years ago


After upgrading to version 4.5.9 I have a problem with the material select toggle option. When all items are selected via "select all" checkbox and I post the form, then the selected values are not posted. The behavior is as followed: - Select single or multiple options (not all) and POST => working fine - Select all options manually (without the "select all" checkbox) and POST => working fine - Click on "select all" checkbox and POST => no values are posted - Click on "select all" checkbox and deselect one option and POST => "select all" is unchecked but not values are posted Seems that the click on the "select all" checkbox causes that control to not provide the values for the POST, even if options are deselected/selected manually. Here´s the code snippet I used to reproduce:
Start your code here
<form method="post" id="options-form"> <select multiple="" searchable="Search..." class="mdb-select colorful-select dropdown-secondary" id="SelectedOptions" name="SelectedOptions"> <option value="" disabled="">Please select</option> <option value="option_value_0">Option 0</option> <option value="option_value_1">Option 1</option> <option value="option_value_2">Option 2</option> <option value="option_value_3">Option 3</option> <option value="option_value_4">Option 4</option> <option value="option_value_5">Option 5</option> </select> <button class="btn-save btn btn-flat btn-md" title="Apply">Apply</button> <div class="mt-4"> <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button> </div> </form> <script type="text/javascript"> $(document).ready(function () { $("#options-form .mdb-select").materialSelect(); }); </script>

Sebastian Kaczmarek staff commented 5 years ago

Hello there, It works all fine when I use `FormData` or `$.serializeArray()` on the form object. Could you please provide me with more details? Does the problem occur on all browsers? And most important- how do you handle the `submit` event? Regards, Sebastian

root-nine priority answered 5 years ago


Thanks for your answer and your explanation how to temporarely solve it. I have two suggestions that would improve the MaterialSelect a lot
  • The labels "Select all" and "x options selected" should be configurable in order to provide multi language support.
  • It should be possible to completely disable (hide) the toggle all checkbox (independent from the multiple attribute)

Sebastian Kaczmarek staff commented 5 years ago

Glad I could help. Thanks for the suggestions, we'll consider that in the next releases. Adding to the "Ideas" list. Regards, Sebastian

Sebastian Kaczmarek staff answered 5 years ago


Thank you for the detailed description of the problem. I have managed to find the answer to your issue.
So the problem is in our code. There is a bug there. We have already addressed that but it will be released with the next version. For now, you have to fix it on your own. Here is the solution:
In the material-select.js file, there is the class called MaterialSelect. Please find the _onToggleAllClick() method and remove the following line:

this.$nativeSelect.val(this.valuesSelected);

It should be on the 498 line in the file. You will have to recompile the MDB package again to have it done.
The second temporary solution is to edit the mdb.js file directly and remove the exact same line from there. Then, you have to minify the file again to have this change in your mdb.min.js file.
Please note that this solution is temporary and will be included in the next release so you won't have to bother with that anymore.
Kind regards,
Sebastian


root-nine priority answered 5 years ago


I´m using FormData und the default form submit. According to my sample when I click on the submit-button inside the form, the following is posted (Chrome) according to the developer console: case 1: “Option 0” and “Option 1” selected shows the following FormData SelectedOptions: option_value_0 SelectedOptions: option_value_1 case 2: Selecting all items with “Select all'” results in empty FormData Same problem with Firefox and Edge. When I use $.serializeArray() I see the same result. The array is empty after I´ve clicked on “Select all” and called $(“#options-form”).serializeArray()

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags