diff --git a/packages/mui-material-next/src/FormControl/FormControl.test.js b/packages/mui-material-next/src/FormControl/FormControl.test.js index e1c44e2c91ea3d..8994e04200d620 100644 --- a/packages/mui-material-next/src/FormControl/FormControl.test.js +++ b/packages/mui-material-next/src/FormControl/FormControl.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { describeConformance, act, createRenderer } from 'test/utils'; +import { describeConformance, act, createRenderer, fireEvent } from 'test/utils'; import FormControl, { formControlClasses as classes } from '@mui/material-next/FormControl'; // TODO: replace with material-next/OutlinedInput import InputBase from '@mui/material-next/InputBase'; @@ -137,6 +137,65 @@ describe('', () => { }); }); + describe('registering input', () => { + it("should warn if more than one input is rendered regardless how it's nested", () => { + expect(() => { + render( + + +
+ {/* should work regardless how it's nested */} + +
+
, + ); + }).toErrorDev([ + 'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.', + // React 18 Strict Effects run mount effects twice + React.version.startsWith('18') && + 'MUI: There are multiple `InputBase` components inside a FormControl.\nThis creates visual inconsistencies, only use one `InputBase`.', + ]); + }); + + it('should not warn if only one input is rendered', () => { + expect(() => { + render( + + + , + ); + }).not.toErrorDev(); + }); + + it('should not warn when toggling between inputs', () => { + // this will ensure that deregistering was called during unmount + function ToggleFormInputs() { + const [flag, setFlag] = React.useState(true); + + return ( + + {flag ? ( + + ) : ( + // TODO: use material-next/Select + + )} + + + ); + } + + const { getByText } = render(); + expect(() => { + fireEvent.click(getByText('toggle')); + }).not.toErrorDev(); + }); + }); + // TODO: needs Outlined|FilledInput + FormControl integrated // eslint-disable-next-line mocha/no-skipped-tests describe.skip('input', () => { diff --git a/packages/mui-material-next/src/InputBase/InputBase.tsx b/packages/mui-material-next/src/InputBase/InputBase.tsx index 920a8904a5e905..6fb80f25ea2065 100644 --- a/packages/mui-material-next/src/InputBase/InputBase.tsx +++ b/packages/mui-material-next/src/InputBase/InputBase.tsx @@ -509,7 +509,7 @@ const InputBase = React.forwardRef(function InputBase< {endAdornment} {renderSuffix ? renderSuffix({ - // TODO: make sure ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled'] are all passed to renderSuffix + // TODO: make sure ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled'] are all passed to renderSuffix when integrating OutlinedInput ...muiFormControl, startAdornment, })