Autocomplete value are not being set on the state or maybe just on the autocomplete

Viewed 322

Autocomplete value are not being set on the state or maybe just on the autocomplete. When I select a value from the autocomplete after selecting a value when I click on a blank spot or anywhere else my selected value is gone. I didn't check the state value so maybe the value is set on the state but not being on the autocomplete.

CodeSandbox : https://codesandbox.io/s/great-butterfly-qgmcr?file=/src/Demo.js:910-922

import React, { Component } from "react";
import { Container, Grid, TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";

const styles = (theme) => ({
  mT: {
    marginTop: theme.spacing(1)
  }
});

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      accname: ""
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const top100Films = [
      { title: "The Shawshank Redemption", year: 1994 },
      { title: "The Godfather", year: 1972 }
    ];

    return (
      <React.Fragment>
        <Container>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
              <Autocomplete
                options={top100Films}
                getOptionLabel={(option) => option.title}
                style={{ minWidth: 200, display: "inline-flex" }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Account Name"
                    variant="outlined"
                  />
                )}
                className={classes.mT}
                onChange={this.onChange}
                value={this.state.accname}
                size="small"
                color="primary"
              />
            </Grid>
          </Grid>
        </Container>
      </React.Fragment>
    );
  }
}

export default withStyles(styles, { withTheme: true })(Demo);
1 Answers

Modify onChange method like below,

onChange = (event, value) => {
    this.setState({ accname: value });
  };

Complete Code:-

import React, { Component } from "react";
import { Container, Grid, TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";

const styles = (theme) => ({
  mT: {
    marginTop: theme.spacing(1)
  }
});

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      accname: ""
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange = (event, value) => {
    this.setState({ accname: value });
  };

  render() {
    const { classes } = this.props;
    const top100Films = [
      { title: "The Shawshank Redemption", year: 1994 },
      { title: "The Godfather", year: 1972 }
    ];

    return (
      <React.Fragment>
        <Container>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
              <Autocomplete
                options={top100Films}
                getOptionLabel={(option) => option.title}
                style={{ minWidth: 200, display: "inline-flex" }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="Account Name"
                    variant="outlined"
                  />
                )}
                className={classes.mT}
                onChange={this.onChange}
                value={this.state.accname}
                size="small"
                color="primary"
              />
            </Grid>
          </Grid>
        </Container>
      </React.Fragment>
    );
  }
}

export default withStyles(styles, { withTheme: true })(Demo);

Code Sandbox - https://codesandbox.io/s/priceless-mcnulty-9z2de?file=/src/Demo.js

Related