innerRef not working with withStyles

[mbrucher]

Similar problem was posted on https://stackoverflow.com/questions/53227495/how-i-can-access-to-dom-node-inside-of-withstyle-component
and should have been fixed in #10106.

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

Expected Behavior 🤔

I'm modifying the SignIn example to enable signing without post. I use innerRef to pass reference and get the underlying component (Inputs objects) and I expect the reference to populate current.value properly.

Current Behavior 😯

When running the app, I get

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

Steps to Reproduce 🕹

The callback that should access the references is logMeIn.

This is a modification of the official example.

class SignIn extends React.Component {
  constructor(props) {
    super(props);

//    this.usernameRef = React.createRef(); // Doesn't work either, same error message
//    this.passwordRef = React.createRef();

    this.logMeIn = this.logMeIn.bind(this);
  }

  logMeIn() {
  // The problem is here, no this.usernameRef or this.passwordRef
   }

  render() {
    const { classes } = this.props;

    return (
    <main className={classes.main}>
      <CssBaseline />
      <Paper className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form}>
          <FormControl margin="normal" required fullWidth>
            <InputLabel htmlFor="username">Username</InputLabel>
            <Input innerRef={node => this.usernameRef = node} id="username" name="username" autoComplete="username" autoFocus />
          </FormControl>
          <FormControl margin="normal" required fullWidth>
            <InputLabel htmlFor="password">Password</InputLabel>
            <Input innerRef={node => this.passwordRef = node} name="password" type="password" id="password" autoComplete="current-password" />
          </FormControl>
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={this.logMeIn}
          >
            Sign in
          </Button>
        </form>
      </Paper>
    </main>
  );
  }
}

Context 🔦

I want the button to call the callback and set up the object to access the input fields.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.3
React	v16.8.6

Project created by react-create-app

[joshwooding]

You can use inputRef. We are working on forwarding refs in v4. Where it makes sense all of the components forward refs in the alpha.

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[mbrucher]

Thanks a lot for the fast answer! I can see the field on the documentation indeed...

[iyobo]

@joshwooding thanks for the response, but that works for inputs. What about for components like Steps in Steppers?
Are those one of the components now using forward Refs in Muiv4

[joshwooding]

@iyobo Most components if not all of them should be forwarding refs now. For every component their is a section in their API docs under their props API that confirms it e.g. https://material-ui.com/api/step/