Mui compatibility

[tomekxoxo]

I am trying to pass Input mask into Autocomplete imported from MUI. tested on 2. and 3. versions of the react-input-mask library.

<Autocomplete disablePortal id="combo-box-demo" options={[ { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, ]} sx={{ width: 300 }} renderInput={({ ...props }) => ( <InputMask mask="9999 / § 999 / 9" alwaysShowMask> {() => ( <TextField {...props} sx={{ flex: '0 0 160px', width: '360px' }} size="small" /> )} </InputMask> )} />

I Get error

react-input-mask: the following props should be passed to the react-input-mask's component and should not be altered in children's function: disabled.

If i alter the code

<Autocomplete disablePortal id="combo-box-demo" options={[ { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, ]} sx={{ width: 300 }} renderInput={({ disabled, ...props }) => ( <InputMask mask="9999 / § 999 / 9" alwaysShowMask disabled={disabled}> {() => ( <TextField {...props} sx={{ flex: '0 0 160px', width: '360px' }} size="small" /> )} </InputMask> )} />

I get another 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.