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.

Material UI - label overlap when using setValue

See original GitHub issue

Describe the bug I am using material-ui with react-hook-form. I am loading some data in useEffect hook and I’d like to set these to the form. Unfortunately when I do that, the label is overlapping the value (value is set to the field).

I guess I can use value + onChange but I am not sure if it is the best solution (performance?).

To Reproduce Please see codesandbox link below

Codesandbox link (Required)

https://codesandbox.io/s/react-hook-form-useform-template-5egkh?fontsize=14&hidenavigation=1&theme=dark

Expected behavior

Label is not overlapped with the field value.

Screenshots

Desktop (please complete the following information):

OS: macOS
Browser Chrome/Safari
Version 83.0.4103.116/13.1.1

Issue Analytics

State:
Created 3 years ago
Reactions:21
Comments:16 (9 by maintainers)

Top GitHub Comments

6reactions

LuanPianeli07commented, Feb 17, 2022

InputLabelProps={{ shrink: true }}

6reactions

bluebill1049commented, Jul 14, 2020

here you go in Safari:

https://codesandbox.io/s/react-hook-form-useform-template-czc4r?file=/src/index.js

Top Results From Across the Web

React Material UI Label Overlaps with Text

This is due to the undefined state of the value. This workaround works for me as a fallback: value= this.state.name || '';.

Label is overlapping with the selected value

Select control's label is overlapping with the selected option. ... need to be wrapped in div.md-form for them to have their material UI...

React Text Field component - Material UI

The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......

React Material Ui Label Overlaps With Text

Keep Material Ui Textfield Label On Top When Text Field Has No Value with the labels overlapping prefilled content Try adding classactive to...

Creating a custom form field control

This property is used to indicate whether the label should be in the floating position. We'll use the same logic as matInput and...