search

material-components / material-components-web-react

Material Components for React (MDC React)
MIT License
2.02k stars 227 forks source link

NotchedOutline receives 0 width from FloatingLabel if TextField appears in Dialog #657

Open mgr34 opened 5 years ago

mgr34 commented 5 years ago

Not sure this is a bug per say, but wanted to share an issue I ran into.

I have a <TextField outlined label={this.state.label}/> in a <Dialog/>. Since the TextField is mounted while the dialog is not visible the handleWidthChange method of FloatingLabel reports a zero width. Therefore NotchedOutline carves out a zero-width notch. And lays atop the label. [0]

For my purposes I can avoid this issue via:

<Dialog onOpen={() => this.setState({isMounted: true})} onClose={() => this.setState({isMounted: false})/>

and

<TextField outlined label={this.state.isMounted ? 'Title' : undefined}/>

I believe this is likely a bug, but I cannot proffer a solution to it just yet. Maybe I will later, but I don't know that I will have time to return to this issue in the near future. Additionally, I would imagine this is not limited to the Dialog, but this is where I ran into my issue.

[0] https://i.imgur.com/xU8vzYL.png

moog16 commented 5 years ago

Yes definitely sounds like a bug without investigating this. Let's leave this open until someone can take a look. For now its good to have your workaround recorded. Thank you!

kfranqueiro commented 5 years ago

From the MDC Web end, this is expected behavior if you initialize a text field inside a closed dialog, because notched outline needs the elements to be in flow to measure correctly. This can be remedied by calling layout on the text field component when the MDCDialog:opened event is fired.

See also https://github.com/material-components/material-components-web/issues/4328#issuecomment-459473464

moog16 commented 5 years ago

Ah thanks for the insight @kfranqueiro - I think then the React version should have some prop to trigger the foundation.layout method.