Topic: Material Select schows wrong selected options

pwfraley pro asked 6 years ago


I am trying to use material-select, when I select an Option in the dropdown and then close the dropdown it displays randomly one of the options in the select, not necesseraly the option I selected.  It gets worse when I select multiple options.  This is also reproducable on your example homepage. Here is my HTML:
Start your code here
<selectclass="mdb-select"multiple> <optionvalue=""disabled>Produkte</option> <optionvalue="1">Obst</option> <optionvalue="2"selected>Gemüse</option> <optionvalue="3">Eier</option> </select> <label>Produkte</label>



                
                  

Jakub Strebeyko staff answered 6 years ago


Hi,

Next release ships big changes in CSS, meaningful changes in syntax and performance. To answer your question straight-forward I'd have to ask you to be a little bit more specific or, best, provide an example on codepen or JSfiddle. The documented feedback is used to constantly make MDB better, one step at the time.

With Best Regards,
Kuba


Jakub Strebeyko staff answered 6 years ago


Hi there pwfraley,

Thanks for reaching out! Fixing the very issue you describe is part of the upcoming MDB 4.5 release, which should be out within a month. Until then, though, there are workarounds. Three steps to undertake in the mdb.js file:

1. Find options.find('li:not(.optgroup)').each(function (i) { (line 18944 depending on your compilation). There, swap the if (multiple) ... $newSelect.val($(this).text())} with the following:

if (multiple) {
  $(‘input[type=”checkbox”]’, this).prop(‘checked’, (i, v) => {
    return!v
  })
if (searchable) {
  if(optgroup) {
    selected=toggleEntryFromArray(valuesSelected, $(this).index() -$(this).prevAll(‘.optgroup’).length-1, $select)
  } else {
    selected=toggleEntryFromArray(valuesSelected, $(this).index() -1, $select)
  }
} else if(optgroup) {
  selected=toggleEntryFromArray(valuesSelected, $(this).index() -$(this).prevAll(‘.optgroup’).length, $select)
} else {
  selected=toggleEntryFromArray(valuesSelected, $(this).index(), $select)
}
  $newSelect.trigger(‘focus’)
} else {
  options.find(‘li’).removeClass(‘active’)
  $(this).toggleClass(‘active’)
  $newSelect.val($(this).text())
}

2. Add this bit before the found options.fint('li:not... part:

// Check for optgroups
var optgroup = false
if($select.find(‘optgroup’).length) {
 optgroup =true
}

 

3. Replace line select.siblings(‘ul.dropdown-content’).find(‘li’).eq(entryIndex).toggleClass(‘active’)(line 19177) with select.siblings(‘ul.dropdown-content’).find(‘li:not(.optgroup)’).eq(entryIndex).toggleClass(‘active’)

After these adjustments your material multiselect should fly.
Note: careful with characters like ,,", and '! These are OS-dependent - not paying attention while copy/pasting may break your code. Check yourself before you wreck yourself.

Let know whether this fixes helped your case.

With Best Regards,
Kuba


pwfraley pro commented 6 years ago

Thank you for your answer. I guess I will wait then until this version comes out, since I am just starting my project. I alos noticed that the selects and inputs do not line up. Meaning the bottom line on the selects is not at the same height as the bottom line of the inputs, will this also be fixed in the upcoming version?


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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags