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.
[AutoComplete] Breaks full width of TextField inside flex containers
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
As you can see in the example linked below, setting fullWidth on an TextField supplied to Autocomplete doesn’t take the full width anymore as soon as the Autocomplete is wrapped inside a flex container.
Expected Behavior 🤔
That it takes the full width inside a flex container like a raw TextField does.
Steps to Reproduce 🕹
See https://codesandbox.io/s/trusting-bassi-7dtc1
Context 🔦
Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.9.5 |
| Material-UI Lab | v4.0.0-alpha.95 |
| React | 16.13.0 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:7 (4 by maintainers)
Top Results From Across the Web
[AutoComplete] Breaks full width of TextField inside flex ...
The problem is that Autocomplete wraps the TextField in an extra <div> . You now have to add width: 100% or flex-grow: 1...
Read more >How can I change the width of Material UI Autocomplete ...
the 'fullWidth' makes the Autocomplete component take the full width of it's container. I don't want to change the width of the whole...
Read more >C38: Using CSS width, max-width and flexbox to fit labels and ...
This technique ensures labels and inputs do not break out of their layout area, including in one-column layouts where it would cause horizontal...
Read more >Implementing autocompletion in a React Material UI ...
In this article, we will learn how to implement autocompletion in a React ... props => ( <TextField fullWidth InputProps={{ inputComponent, ...
Read more >Breaking changes in v5, part two: core components - Material UI
This is a reference guide to all of the breaking changes introduced in Material v5, and how to handle them when migrating from...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Adding
fullWidthto theAutocompletecomponent sounds like a good idea as long as that wrapper div has to be kept.@igorbrasileiro It’s required per https://www.w3.org/TR/wai-aria-practices/#combobox.