Использую маску
https://www.npmjs.com/package/react-imask совместно с react-hook-form
Если начать удалять символы с середины инпута, то вылазит ошибка плагина маски
const { ref: phoneMaskRef } = useIMask({
lazy: false,
mask: [
{
mask: '+{7}(#00)-000-00-00', // +79999999999
startsWith: '+',
lazy: false,
definitions: {
'#': /[012345679]/
},
},
{
mask: '+{7}(#00)-000-00-00', // 89999999999
startsWith: '8',
lazy: false,
definitions: {
'#': /[012345679]/
},
}
],
dispatch: (appended, dynamicMasked) => {
const number = (dynamicMasked.value + appended).replace(/\D/g, '')
if (number.length > 10) {
return dynamicMasked.compiledMasks[1]
}
return dynamicMasked.compiledMasks[0]
},
},
<Controller
name="phone"
control={control}
render={({ field: { onBlur, onChange, value } }) => (
<Input
onBlur={onBlur}
onChange={onChange}
value={value}
type="tel"
label="Телефон"
appearance="filled"
ref={phoneMaskRef}
size="m"
block
error={errors.phone?.message}
/>
)}
/>