Material-ui: TextField with select=true and native does not add the DOM ID to the select element

[bopfer]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using TextField to render a select no longer puts the DOM id on the select element. This causes the label for attribute to point to nothing and it is breaking all of my tests.

I am using native: true, but it seems to be an issue with native set to true or false.

The problem started with version 4.5.2.

Expected Behavior 🤔

The id should be present to match the label's for attribute.

Steps to Reproduce 🕹

The issue can be seen on in the official docs: https://material-ui.com/components/text-fields/#select

Inspect any of the selects and you will see no id attribute that matches the label's for.

Context 🔦

I was just updating my packages and during testing this issue is breaking all my forms.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.5.2 |
| React | v16.11.0 |
| Browser | |
| TypeScript | v3.6.4 |

[bopfer]

Follow up: Adding the id to inputProps seems to restore the previous behavior. Is that the preferred way to handle it?

[eps1lon]

Follow up: Adding the id to inputProps seems to restore the previous behavior. Is that the preferred way to handle it?

I think we fix InputLabel having a for value since the labeling is done manually. Otherwise the label points to a hidden input. I don't think that is valid anyway.

A nice feature to have would be focusing of the select when clicking the label. But this never worked for non-native selects anyway. I just mentioned it here in case someone wants to work on this independently.

[KrasimirZl]

Hi All,

I experienced the same when upgraded to "@material-ui/core": "^4.5.2". id from select element disapered. I am using this for automated testing will be good to be put back there.

As @bopfer pointed it is on official samples page too.

[eps1lon]

@KrasimirZl Could you share what how you're testing this right now?

As I said the labelling was broken before. If you want to query the hidden input to make sure submitting the form to the server submits the correct value I suggest you query the form elements by name which is also what your server will see.

[bopfer]

When testing forms in React, best practice is to query by the label. Here is a simple sandbox to show the issue I am seeing with the new version:

https://codesandbox.io/s/clever-wescoff-dvztj

In the Test tab, you will see:

Found a label with the text of: Testing, however no form control was found associated
to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute
correctly.

The label does have a for attribute. However, the select does not have an id to match. Prior to version 4.5.2, it did have the id.

[KrasimirZl]

@eps1lon

I am using puppeteer to do automated UI regression testing and I am fetching controls where data to be entered using id's.

Regards,
Krasimir

[eps1lon]

When testing forms in React, best practice is to query by the label

Yeah for native selects I can see an issue. The original issue report claimed it was an issue for both though.

I am fetching controls where data to be entered using id's

The input that was previously referenced with for was not however targetable by users. It seems like you were not actually testing what your users does.

It's very likely that this is a current limitation of byLabelText which does not implement complete accessible name computation. In addition to that the combobox pattern is currently being revisited for Aria 1.2 while byRole still uses combobox for <select />.

There are a lot of moving parts here at various levels so please be very precise with your issue description. Right now the issue is only confirmed for <Select native />

[KrasimirZl]

Hi Here is example how I used the control.

             <TextField
                required
                id="select-role-input"
                select
                label="User role"
                className={classes.textField}
                value={this.state.role}
                onChange={this.handleChangeFormAddUser("role")}
                SelectProps={{
                  native: true,
                  MenuProps: {
                    className: classes.menu
                  }
                }}
                disabled={this.state.uiDisabled}
                margin="normal"
              >
                {roles.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </TextField>