React Material-UI TextField looses focus with every key

Question

I have a material-ui CharField, but I am unable to type a full string because it looses focus after one key entered, so I have to click on it after every key stroke, which is not acceptable.

This is my component SearchControl:

render() {
    const SearchControl = () => {
      return (
        <div className="col-6">
          <TextField
            className="col-11"
            id={this.state.code}
            defaultValue={this.state.code}
            label={"Modelo o Número de Serie"}
            variant="outlined"
            onChange={this.handleChange.bind(this)}
          />
          <IconButton
            ariaLabel="Buscar"
            className="col-1"
            onClick={this.handleSearchProductClick}
          >
            <SearchIcon />
          </IconButton>
        </div>
      );
    };

    if (!this.state.messageShown) {
      return (
        <div>
          <div style={{ display: "flex" }}>
            <NavBar onUpdate={this.onUpdate} />
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <div fullWidth style={{ display: "flex", paddingTop: "30px" }}>
            <SearchControl />
            <ShortcutButtons />
          </div>
          <div fullWidth>
            <ProductsTable />
          </div>
          <div fullWidth />
          <div fullWidth style={{ display: "flex", paddingTop: "10px" }}>
            <ControlButtons />
            <TotalsDisplay />
          </div>
        </div>
      );
    }
}

I had this before, you're parent is remounting on change. you need to make sure you don't rerender a parent component. — Joe Lloyd, Feb 14 '20 at 16:29
To test this add a console.log on your `componentDidMount`this should show the component remounting each time — Joe Lloyd, Feb 14 '20 at 16:30
Try passing the value prop as the current value being stored in the state. — Siraj Alam, Feb 14 '20 at 16:32

score 1 · Answer 1 · answered Feb 14 '20 at 16:42

I found the solution. The problem was that SearchControl component was an arrow function, which implies that it was a brand new function each rendering and, hence, a brand new component each rendering.

I changed SearchControl component declaration to a regular function, so each rendering would refer to the same function and, hence, to the same component:

constructor(props) {
    super(props);

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

SearchControl() {
      return (
        <div className="col-6">
          <TextField
            className="col-11"
            id={this.state.code}
            defaultValue={this.state.code}
            label={"Modelo o Número de Serie"}
            variant="outlined"
            onChange={this.handleChange.bind(this)}
          />
          <IconButton
            ariaLabel="Buscar"
            className="col-1"
            onClick={this.handleSearchProductClick}
          >
            <SearchIcon />
          </IconButton>
        </div>
      );
    }

render() {
   if (!this.state.messageShown) {
      return (
        <div>
          <div style={{ display: "flex" }}>
            <NavBar onUpdate={this.onUpdate} />
          </div>
        </div>
      );
    } else {
      return (
        <div>
          <div fullWidth style={{ display: "flex", paddingTop: "30px" }}>
            <this.SearchControl />
            <ShortcutButtons />
          </div>
          <div fullWidth>
            <ProductsTable />
          </div>
          <div fullWidth />
          <div fullWidth style={{ display: "flex", paddingTop: "10px" }}>
            <ControlButtons />
            <TotalsDisplay />
          </div>
        </div>
      );
    }
  }

Here is a related answer (different symptoms, but similar root cause): https://stackoverflow.com/questions/60210288/popover-menu-renders-in-different-place-than-the-anchor-element/60211641#60211641. — Ryan Cogswell, Feb 14 '20 at 17:01

React Material-UI TextField looses focus with every key

1 Answers1