Materialize CSS Select Element not enabling

[cmcknight]

I have two Select elements. The second Select is initially disabled until the value of the first element is changed to something other than 'all'. The behavior works as expected in vanilla HTML/JS with no MaterializeCSS. When using MaterailizeCSS, the disabled attribute is removed from the second Select but the control fails to become enabled.

Expected Behavior

My expectation is that when I remove the disabled attribute and/or set the disabled property to false on the second Select, it should become active.

Current Behavior

The second Select never becomes enabled when the value of the first select is changed from 'all' to something else.

Steps to Reproduce (for bugs)

1. Click first Select
2. Change value

Context

I am seeking to control the state of the second select based on the value in the first select.

Your Environment

Mac OS 11.5.2
RAM 32GB
Visual Studio Code
Materialize 1.1.0-alpha
Chrome v92.0.4515.159

Code Pen Link: link

[warrenrodrigues]

I have had this issue previously. I'm not sure if it's a bug or the way it's meant to behave. Because the disabled attribute is changed outside MaterializeCSS, you have to re-initialize it, using:

var options = {};
var selects = document.querySelectorAll('select');
M.FormSelect.init(selects, options);

Forked and updated your Codepen here.

[Smankusors]

IMO, this could be fixed by adding the new methods, which are .enable() and .disable() to the Select component.

You can use an alternative like @warrenrodrigues suggested.

anyway, a PR would be welcome to fix this.

[ivanBell199]

I always thought re-initialization is intended in such situations. The docs say:
You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.

[cmcknight]

I always thought re-initialization is intended in such situations. The docs say:
You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.

The verbiage is a bit ambiguous, to be honest. One reading of it could be that if you are dynamically generating the select, as opposed to just modifying an attribute, then an additional call is needed, and I suspect that is how many read it. More clear might be "you will need a separate call to init() for any dynamically generated select or any changes to an existing select".

Just my tuppence...

[ivanBell199]

More clear might be "you will need a separate call to init() for any dynamically generated select or any changes to an existing select".

Yes, that sounds better

[wuda-io]

So what is the Solution here?
Best regards

[LoganTann]

So what is the Solution here? Best regards

Just by editing this sentence #171 (comment) in the docs, since it seems this issue is a documented behavior, but not well explained ?

(just storing here the screenshot)