Materialize: Select is broken

[Writtscher]

Hi,

im using the select component but I have to say that the component is broken - at least the one that contains optgroups.

Using optgroup together with "multiple" does not render any checkboxes neither does it select the correct options.. The label contains totaly different options than I've selected.

Another thing is: I would like to have the option to choose whether the option should scroll to the top as soon as it is selected. It's quite annoying.

[haidaraM]

Do you init the the select component in your jquery document ready ?

// Plugin initialization
$('select').not('.disabled').material_select();

[Writtscher]

Sure. Does not change anything.

Btw: using current version.

[vincentcox]

Can you look in the "console" for errors?
To access console you can right click on your page, select "inspect". Now go to the tab "Console" and reload the page. Look for errors there and post them here so we can take a look.

[Writtscher]

I know how to access the console - no offence. There is no error. Nohting.

Is it working for you? I mean selects with optgroups and checkboxes?

Another point is maybe that I'm using browserify to resolve dependencies. Weird. I'll try it without. Maybe this helps.

[Writtscher]

Not working. Even without browserify: http://codepen.io/anon/pen/XdRyEe
It the html and js from the docs. But no checkboxes and selecting option 3 or 4 does not work.

[erdostom]

👍 On this, spent hours trying to figure out what's wrong with my code, but it's the plugin thats' broken. It handles regular multiple selects fine, but can't deal with optgroups.

• no checkboxes
• submits incorrect selection
• displays incorrect selection when fed list of current selections

[Tim-arts]

Hi, long time ago I rewrote the entirely component, taking account the select multiple with optgroups.
You can get it at this address : https://github.com/TyrionGraphiste/materialize/blob/master/js/forms.js

There is an example : https://jsfiddle.net/TyrionGraphiste/5deezjj0/1/

[Birssan]

Hi,

Same issue here, when using select with multiple attribut and optgroup, checkbox aren't rendered and default selected values are not correct... Only got 3 "checked" out of 19 and yet in the markup the 19 options are selected, there just and issue with the generated list

[storm1er]

Just found this issue on 0.98.0
No PR for this ? Since 2016 ? Arf ... i'm on it :/

[aschoenebeck]

Had the same error in 0.98.0. Fixed it with a simple patch. Replace the if (multiple) { } block at materialize.js line 3575 with this:

      // Add initial multiple selections.
      if (multiple) {
          $select.find("option").each(function (index) {
              if ($(this).is('option:selected:not(:disabled)')) {
                  toggleEntryFromArray(valuesSelected, index, $select);
                  options.find("li:not(.optgroup)").eq(index).find(":checkbox").prop("checked", true);
              }
        });
      }

The problem with the original each() is, that the index is relative to the containing optgroup. By iterating over every option, checking for selected and taking the index within all options the corresponding li element of the generated optgroup-options can be properly addressed.

Please someone submit a proper pull request with this fix :-).

[fega]

@aschoenebeck we will be happy if you do it :)

[aschoenebeck]

Okay made a PR myself: https://github.com/Dogfalo/materialize/pull/4656

[acburst]

Hmm the multiple select with opt groups seems to work here on the latest version: http://materializecss.com/test/html/forms.html

Can you provide an updated codepen reproducing this issue?

[kmmbvnr]

Here is the codepen demonstrates the issue - https://codepen.io/kmmbvnr/pen/brVvVO

Expected behavior: Select value is "Option 2, Option 3"
Current behavior: Select value is "Option 2, Option 1"

Google chrome 59.0.3071

[JelleBlaauw]

Any update on this? Pretty weird this issue has been known for such a long time but has not yet been fixed,

[Dogfalo]

Update: this is being fixed in 1.0

[Dogfalo]

Fixed in v1-dev