No way to get ref to root of <Input> in a <TextField>

[dantman]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behaviour

<Input> outputs a <div> root that wraps the accents and the input. It should be possible to attach a ref to this input. And it should be possible to do this from a <TextField />.

Current Behaviour

Input only passes {...other} to the <div>

Context

I needed to attach a Popper based menu to the bottom of a TextField, but I need it to open lined up with the whole <Input>, not the <input> (then it's inset by the inputAdornment) and not the <FormControl> (then when the menu is above the input it will appear above the label instead of overlapping the label).

[jedwards1211]

@dantman have you tried <TextField InputProps={{ref: c => this.inputDiv = findDOMNode(c)}} />? (not sure if it works)

[dantman]

@jedwards1211 Yeah, it works. It'll be using that as a workaround for now. But it should be possible to do this without the discouraged findDOMNode. And with the same ease of use as inputRef (i.e. no need to use a callback when you want React.createRef, no need to make an extra findDOMNode call outside passing the ref, and no need to wrap a normal ref callback with more code).

[oliviertassinari]

@dantman have you tried <TextField InputProps={{ref: c => this.inputDiv = findDOMNode(c)}} />? (not sure if it works)

@jedwards1211 Yes, it's the encouraging approach to solve the issue until React proposes a better solution. #10825 Won't help for this issue as it targets higher-order components, exposing a rootRef property to all the components doesn't scale.

[dantman]

Other MUI components already have an equivalent. e.g. ButtonBase has a ref={buttonRef} on the root element it outputs.

And I doubt that React is going to propose an alternative. Adding ref={rootRef} where it makes sense sounds perfectly reasonable, it's the same level of effort as adding {...other} to those same nodes as you already do.

[oliviertassinari]

@dantman We do provide a buttonRef and inputRef properties for the DOM elements people are most likely to need (button & input). By the way, we exposes a RootRef component for this use case.

[jedwards1211]

Another way to do it which is questionable but avoids findDOMNode: inputRef={c => this.inputDiv = c.parentElement}

[dantman]

RootRef is just findDOMNode in disguise. And it doesn't work in this use case because <TextField /> is in charge of adding the <Input /> I would need to wrap with RootRe.

[oliviertassinari]

@dantman for advanced use cases, I encourage people to break the TextField abstraction. You can use the lower level components.