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:closed
  • Created 3 years ago
  • Comments:12 (12 by maintainers)

github_iconTop GitHub Comments

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.

ineswqcommented, Feb 23, 2021

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

Read more comments on GitHub >

github_iconTop 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...
Read more >
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....
Read more >
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....
Read more >
React Material UI Tutorial - 7 - Text Field - YouTube
Courses - Support - Github -⚡️ Checkout ...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found