[Bug]: Selects label dissapear

[baccarg]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Label display not showing in SELECT element

Current Behavior

No response

Expected behavior

No response

Possible Solutions or Causes

my code:

Sel. una opción Option 1 Option 2 Option 3 Provincia Sel. Provincia

Steps to reproduce

No response

Your Environment

• Version used: 2.0.1 alpha
• Browser Name and version: Firefox / Chrome
• Operating System and version (desktop or mobile): Windows 11
• Additional information you want to tell us: In code console cant see "label" element, its disappeared...Im try deleting all javascript includes but keep doing this.

[baccarg]

My code:
<div class="input-field outlined col-12 col-md-4"> <select required class="validate" name="id_provincia" id="id_provincia"> <option value="">Sel. una opción</option> <option value="">San Luis</option> </select> <label for="id_provincia">Provincia</label> <span class="helper-text">Sel. Provincia</span> </div>

[baccarg]

Ok, im find the bug.

If you initialize a < select > and initialize again < select > the label tag dissapear.

[philipraets]

I've also have seen this, and created a reinitialize function, which rebuilds the label and re-initializes the select element:

function reInitializeSelectElements(select) {
	if (select instanceof NodeList) {
		select.forEach(element => {
			var selectInstance = M.FormSelect.getInstance(element);
			var labelTekst = selectInstance.labelEl.innerHTML;
			selectInstance.destroy();
			var labelFor = element.getAttribute("id");
			var itemLabel = document.createElement("Label");
			itemLabel.setAttribute("for", labelFor);
			itemLabel.innerHTML = labelTekst;
			element.parentNode.appendChild(itemLabel);
		});
	} else {
		var selectInstance = M.FormSelect.getInstance(select);
		var labelTekst = selectInstance.labelEl.innerHTML;
		selectInstance.destroy();
		var labelFor = select.getAttribute("id");
		var itemLabel = document.createElement("Label");
		itemLabel.setAttribute("for", labelFor);
		itemLabel.innerHTML = labelTekst;
		select.parentNode.appendChild(itemLabel);
	}

	M.FormSelect.init(select, {
		dropdownOptions: {
			container: document.body
		}
	});
}

usage:

reInitializeSelectElements(document.querySelector("select[name='id_provincia']"));

or

reInitializeSelectElements(document.querySelectorAll("select"));

[Corbett000]

Can you give me a situation where you would want to initialize the same element twice? I think it is a mistake to initialize the element twice.

I looked at the code behind the select elements and I think I see where the problem is if somebody does want to take to fixing this in the future.
The culprit seems to be this line at the beginning of the _setupDropdown() function:
this.labelEl = this.el.parentElement.querySelector('label');

Because the original html label is changed and moved around when the select element is initialized, this.el.parentElement.querySelector('label') resolves to null when the element is reinitialized.

This could possibly be solved by checking if this.labelEl is null and then looking for the label in the wrapper div instead.

[philipraets]

if you dynamically need to change the value of the select element, you will need to reinitialize the select element, otherwise the the change is not visible.

[Lord-Leonard]

I am currently working arround this by keeping a reference to the instance inside the costom web component in which the options are initialized. Whenever I need to interact with the Select thingy, I talk to the web component and implement a function in it.

[daoluong]

function redrawSelect(id) {
    var instance = M.FormSelect.getInstance(document.querySelector(id));
    var labeltext = instance.labelEl.textContent;
    instance.destroy();

    $(id).parent().append("<label for='" + id.replace("#", "") + "'>" + labeltext + "</label>")

    M.FormSelect.init(document.querySelector(id));
}

I'm using this lazy code to rebuilt a selector after repopulated it's options