Material-ui: Select inside InputAdornment causes crash with material-ui/core 3.9.1 (works with 3.9.0)

[mtidei]

We use a Select as InputAdornment to let users choose a unit. It worked fine until material-ui/core 3.9.0, but now crashes the whole application.

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

Expected Behavior 🤔

Current Behavior 😯

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM77 0.chunk.js:110042)
    at scheduleWork (VM77 0.chunk.js:129702)
    at Object.enqueueSetState (VM77 0.chunk.js:122921)
    at FormControl.push../node_modules/react/cjs/react.development.js.Component.setState (VM77 0.chunk.js:139977)
    at Object.FormControl._this.handleClean [as onEmpty] (VM77 0.chunk.js:9830)
    at InputBase.checkDirty (VM77 0.chunk.js:14100)
    at InputBase.componentDidUpdate (VM77 0.chunk.js:14078)
    at commitLifeCycles (VM77 0.chunk.js:126998)
    at commitAllLifeCycles (VM77 0.chunk.js:128497)
    at HTMLUnknownElement.callCallback (VM77 0.chunk.js:110132)
    at Object.invokeGuardedCallbackDev (VM77 0.chunk.js:110181)
    at invokeGuardedCallback (VM77 0.chunk.js:110235)
    at commitRoot (VM77 0.chunk.js:128702)
    at completeRoot (VM77 0.chunk.js:130232)
    at performWorkOnRoot (VM77 0.chunk.js:130155)
    at performWork (VM77 0.chunk.js:130060)
    at performSyncWork (VM77 0.chunk.js:130034)
    at interactiveUpdates$1 (VM77 0.chunk.js:130322)
    at interactiveUpdates (VM77 0.chunk.js:112252)
    at dispatchInteractiveEvent (VM77 0.chunk.js:115068)
VM77 0.chunk.js:133526 

The above error occurred in the <InputBase> component:
    in InputBase (created by Context.Consumer)
    in WithFormControlContext(InputBase) (created by WithStyles(WithFormControlContext(InputBase)))
    in WithStyles(WithFormControlContext(InputBase)) (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by TextField)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (at ObjectField.js:202)
    in ObjectField (created by WithStyles(ObjectField))
    in WithStyles(ObjectField) (at ObjectFieldSet.js:38)
    in div (at ObjectFieldSet.js:28)
    in div (at ObjectFieldSet.js:27)
    in ObjectFieldSet (created by WithStyles(ObjectFieldSet))
    in WithStyles(ObjectFieldSet) (at ObjectEditPanel.js:91)
    in div (at ObjectEditPanel.js:90)
    in div (created by Typography)
    in Typography (created by WithStyles(Typography))
    in WithStyles(Typography) (at ObjectEditPanel.js:74)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (at ObjectEditPanel.js:66)
    in div (at ObjectEditPanel.js:65)
    in ObjectEditPanel (created by WithStyles(ObjectEditPanel))
    in WithStyles(ObjectEditPanel) (created by Connect(WithStyles(ObjectEditPanel)))
    in Connect(WithStyles(ObjectEditPanel)) (at ObjectEditPage.js:32)
    in div (at ObjectEditPage.js:30)
    in ObjectEditPage (created by Connect(ObjectEditPage))
    in Connect(ObjectEditPage) (at MainView.js:61)
    in div (at MainView.js:44)
    in div (at MainView.js:40)
    in div (at MainView.js:38)
    in MainView (created by Connect(MainView))
    in Connect(MainView) (at App.js:180)
    in div (at App.js:179)
    in div (at App.js:178)
    in Provider (at App.js:177)
    in MuiPickersUtilsProvider (at App.js:176)
    in MuiThemeProviderOld (at App.js:175)
    in App (at src/index.js:16)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
VM77 0.chunk.js:110042 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (VM77 0.chunk.js:110042)
    at scheduleWork (VM77 0.chunk.js:129702)
    at Object.enqueueSetState (VM77 0.chunk.js:122921)
    at FormControl.push../node_modules/react/cjs/react.development.js.Component.setState (VM77 0.chunk.js:139977)
    at Object.FormControl._this.handleClean [as onEmpty] (VM77 0.chunk.js:9830)
    at InputBase.checkDirty (VM77 0.chunk.js:14100)
    at InputBase.componentDidUpdate (VM77 0.chunk.js:14078)
    at commitLifeCycles (VM77 0.chunk.js:126998)
    at commitAllLifeCycles (VM77 0.chunk.js:128497)
    at HTMLUnknownElement.callCallback (VM77 0.chunk.js:110132)
    at Object.invokeGuardedCallbackDev (VM77 0.chunk.js:110181)
    at invokeGuardedCallback (VM77 0.chunk.js:110235)
    at commitRoot (VM77 0.chunk.js:128702)
    at completeRoot (VM77 0.chunk.js:130232)
    at performWorkOnRoot (VM77 0.chunk.js:130155)
    at performWork (VM77 0.chunk.js:130060)
    at performSyncWork (VM77 0.chunk.js:130034)
    at interactiveUpdates$1 (VM77 0.chunk.js:130322)
    at interactiveUpdates (VM77 0.chunk.js:112252)
    at dispatchInteractiveEvent (VM77 0.chunk.js:115068)

Steps to Reproduce 🕹

Unfortunately, we cannot reproduce this Exception using codesandbox.

This is basically the code for our TextField.
The crash occurs only if a value is given for the Select Element.

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

    const inputProps = {};
    inputProps.endAdornment = this.createEndAdornment();

    return (
      <MuiThemeProvider theme={theme}>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <Provider store={store}>
            <div className={classes.root}>
              <TextField value="123" InputProps={inputProps} />
            </div>
          </Provider>
        </MuiPickersUtilsProvider>
      </MuiThemeProvider>
    );
  }

  createEndAdornment = () => {
    return (
    <InputAdornment position="end">
      <Select value="kg">
        <MenuItem key="kg" value="kg">
          kg
        </MenuItem>
        <MenuItem key="gram" value="gram">
          gram
        </MenuItem>
      </Select>
    </InputAdornment>
    );
  };

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.1 |
| React | v16.7.0 |
| Browser | Chrome and Firefox |

package.json

"dependencies": {
    "@date-io/date-fns": "^1.0.2",
    "@material-ui/core": "^3.9.0",
    "@material-ui/icons": "^3.0.2",
    "ajv": "^6.7.0",
    "autosuggest-highlight": "^3.1.1",
    "core-js": "^2.6.3",
    "date-fns": "^2.0.0-alpha.27",
    "fetch-mock": "^7.3.0",
    "file-saver": "^2.0.0",
    "lodash": "^4.17.11",
    "material-ui-pickers": "^2.1.2",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-autosuggest": "^9.4.3",
    "react-dom": "^16.7.0",
    "react-dropzone": "^6.2.4",
    "react-markdown": "^4.0.6",
    "react-redux": "^5.1.1",
    "react-scripts": "^.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "socket.io-client": "^2.2.0"
  }

[oliviertassinari]

@joshwooding People are full of imagination 🔮. The prediction comes true. Now it's great. We have a reproduction.

@mtidei Thank you for the report. The fix is simple. We just need to make
https://github.com/mui-org/material-ui/blob/4422ce889293268cf7aaa8b1f5e63d465501a05f/packages/material-ui/src/InputBase/InputBase.js#L407
wrap all the children, the adornment included.
Is it clear enough? Do you want to submit a pull-request? :)

[mtidei]

@oliviertassinari

Is it clear enough? Do you want to submit a pull-request? :)

done :)

[joshwooding]

I'm struggling to re-create this 😖
Demo: https://14zqjkp0lj.codesandbox.io/
Code: https://codesandbox.io/s/14zqjkp0lj

[oliviertassinari]

@mtidei We are struggling to reproduce the issue. Do you think that you could edit @joshwooding codesandbox to make it break? It would help us write a test to prevent future regressions. Thank you.

[mtidei]

Thank you for your efforts and please excuse the failing test in my pull request. I'll be back in office on monday and check the codesandbox.

[mtidei]

I could reproduce the error in this codesandbox: https://codesandbox.io/s/yj9ox2o641

The error message is missing some details available when compiling locally (see above), but I am pretty sure we are hitting the same problem here.

The error disappears by changing ONE of the following details:

• in Package.json change "@material-ui/core": "3.9.1" to "3.9.0"
• in ObjectField.json comment out line 152: value={this.props.suffix}
• in index.js add a value to the in line 22: (Causes the TextField to have an initial value)

In other words, the error occurs in 3.9.1 if the Select inside the InputAdornment has a value and the TextField the InputAdornment belongs to is empty.

[oliviertassinari]

@mtidei Thank you for the reproduction! This should be enough to write a regression test. Hopefully, we can release the fix.

• in Package.json change "@material-ui/core": "3.9.1" to "3.9.0"

Yes, the logic was changed in #14023.