[Bug]: tabindex properties on select elements are destroyed during initialization

[cmorgancli]

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

The _SetupDropdown method that gets run when the select is initialized sets the tabIndex property on the original select element to -1, but does not set any tabIndex property on the text input element that it creates. The end result is that any form that contains select elements can not have a predefined tab order.

Current Behavior

It is impossible to set a specific tab order for select elements

Expected behavior

It should be possible to specify a tabIndex property on a select element and have that property applied to the input element created during initialization.

Possible Solutions or Causes

I think this is a relatively easy issue to fix in the _SetupDropdown method. Just set the tabIndex property on the input element to match the value on the original select element.

Steps to reproduce

Create any page containing a form with a select element.
View the DOM and observe that there is no tabIndex property on the input element created during initialization.

Your Environment

• Version used: v2.1.0 and v2.1.1
• Browser Name and version: all
• Operating System and version (desktop or mobile): all
• Additional information you want to tell us:
  I created a kludgy workaound by adding a tabIndex property to the label on the select element, and then running this javascript after initialization:

var labelEls = document.getElementsByTagName("label"); for (i=0; i < labelEls.length; i++) { if (labelEls[i].id.startsWith('m_select')) { if (labelEls[i].tabIndex > 0) { //console.log( labelEls[i].htmlFor + ' tabindex ' + labelEls[i].tabIndex ); document.getElementById(labelEls[i].htmlFor).tabIndex = labelEls[i].tabIndex; labelEls[i].tabIndex = -1; } } }

[cmorgancli]

Note my workaound above also fails in v2.1.1 because of some differences in how the elements are constructed in the _SetupDropdown method.

[cmorgancli]

I've created a workarond that works in v2.1.1. Again, this depends on setting the tabIndex property on the label for the select element....

document.addEventListener('DOMContentLoaded', function() {
    var selElems = document.querySelectorAll('select');
    var selInstances = M.FormSelect.init(selElems, {
      // specify options here
    });
    selInstances.forEach(setSelectTab);
}
function setSelectTab(selInstance) {
    if (selInstance.labelEl.tabIndex > 0) {
        selInstance.input.tabIndex = selInstance.labelEl.tabIndex;
        selInstance.labelEl.tabIndex = -1;
    }    
}

[gselderslaghs]

It turns out accessibility is currently a major issue in Materialize as it does affects multiple components

I'll create a new issue for the follow up of all accessibility related issues and will reference this issue regarding the select component

[gselderslaghs]

I've created a workarond that works in v2.1.1. Again, this depends on setting the tabIndex property on the label for the select element....

@cmorgancli
Could you commit your workaround in a pull-request within the corresponding component?

[gselderslaghs]

It would also be great if you can provide a Codepen example of your usecase and additional screenshots explaining the issue in more detail, as it would me more accurate to reproduce

[cmorgancli]

@gselderslaghs My current workaround is not a change to any materialize code. I am post-processing the dom after initialization with the javascript I included in my comment.

I will look at creating a PR that fixes the issue in the materialize code.