[docs] Show how to combine OutlinedInput and FilledInput #12968
Conversation
oliviertassinari
force-pushed
the
docs-filled-outlined-input
branch
from
2056040 to
d1f19e4
Compare
| @@ -17,10 +20,16 @@ const styles = theme => ({ | |||
| }); | |||
|
|
|||
| class ComposedTextField extends React.Component { | |||
| labelRef = null; | |||
There was a problem hiding this comment.
I think we should use the modern React.createRef API.
There was a problem hiding this comment.
We could but it more boilerplate (like in the TextField source).
| <FormControl className={classes.formControl} variant="outlined"> | ||
| <InputLabel | ||
| ref={ref => { | ||
| this.labelRef = ReactDOM.findDOMNode(ref); |
There was a problem hiding this comment.
I believe you don't need to do this anymore. The ref already grants access to the dom node.
There was a problem hiding this comment.
Well not in this case because InputLabel is not properly forwarding the ref. I assumed it did which was wrong. I always try to avoid findDOMNode since it's usage in refs is discourage by React.
If it would be forwarded we could reduce the boilerplate you wanted to avoid by using callback refs by simply using createRef and then passing that to InputLabel#ref.
facebook/react#4936 has additional explanation about findDOMNode(ref).
Considering how much customization we allow findDOMNode is probably safer and since it works there's no need for a change in my book. I just spotted something unusual (for me).
There was a problem hiding this comment.
As far as I understand the warning about using findDOMNode, it's about educating people that React might provide another way to do what they want. Many people access the DOM when they don't need to. Hence the warning. In our case, it's fine.
Closes #12965.