Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make `id` a required prop for the TextField component

See original GitHub issue

According to the accessibility section in the docs for TextField, adding an id is needed for Material UI to label our text fields correctly, which is important for keeping our app accessible for screen readers.

It’s quite a low hanging fruit considering the library does the hard work of doing the rest right so we should fix this some time. A good first issue for anyone looking to get started!

Issue Analytics

State:
Created 3 years ago
Comments:12 (12 by maintainers)

Top GitHub Comments

1reaction

ineswqcommented, Feb 26, 2021

I found that an interface cannot extend TextFieldProps because it is defined as: type TextFieldProps = StandardTextFieldProps | FilledTextFieldProps | OutlinedTextFieldProps and an interface can only extend an object type with statically known members.

I tried to implement via intersecting types but it still did not require the id. In the end I found a solution using BaseTextFieldProps, which I could make work by also including the onChange? prop from TextFieldProps. I opened a PR with the changes, but I mention my thinking in case there’s a more elegant solution I’m not seeing.

1reaction

ineswqcommented, Feb 23, 2021

Is it alright if I try to implement this as my first contribution?

Top Results From Across the Web

Material Ui - Add required attribute to a TextField in "select ...

In the chrome element inspector, I tried to add directly a required attribute to the html input inside the Select component and it...

React Text Field component - Material UI - MUI

The TextField wrapper component is a complete form control including a ... The multiline prop transforms the text field into a TextareaAutosize element....

The `id` prop will be required in future versions to make the ...

The id prop will be required in future versions to make the component accessible for users of assistive technologies such as screen readers....

React Material UI Tutorial - 7 - Text Field - YouTube

Courses - https://learn.codevolution.dev/ Support - https://www.paypal.me/Codevolution Github - https://github.com/gopinav⚡️ Checkout ...

React-admin - Field Components - Marmelab

And if you can't find a field for your need, you can always create your own. Common Field Props. All Field components accept...