I use NumericFormat component (react-number-format)) with mui TextField. I want stop changing value if value.length > 20 but value changed in input when I stop changing in onChange callback (and not changed in my state). My code
<FormControl className='idea-edit-form__field' fullWidth>
<NumericFormat
fullWidth
label='Сумма экономического эффекта'
placeholder='Укажите общую сумму предполагаемого экономического эффекта'
id='economicEffectSum'
value={formFields.economicEffectSum}
customInput={TextField}
thousandSeparator={' '}
onChange={(event)=>{
if (event?.target?.value?.length <= 20) onChangeInput(event)
else setEconomicSumError('Максимальное
количество символов - 20');
event.stopPropagation();
event.preventDefault();}}
onValueChange={() => {}}
InputLabelProps={{ shrink: true }}
InputProps={{
endAdornment: <InputAdornment position='end'>руб.</InputAdornment>,
inputProps: { min: 0, max: 20 },
}}
error={!!economicSumError?.length}
helperText={!!economicSumError?.length && economicSumError}
/>
</FormControl>
I try use inputValue, but it not work.
If I use const value and empty callback function (()=>{}) for onChange, value in input changed anyway.
How can I stop it?