При рендере эл-та нет поэтому ref дает ссылку на null,
<Stack
onDoubleClick={() => handleSetIsInput('title')}
direction="row"
sx={{ width: '100%' }}
>
{isInput ? (
<StyledFieldFormMin
ref={titleRef}
version="calculation"
name="title"
placeholder={
formik.isValid ? 'Укажите название работ' : 'Поле обязательно к заполнению'
}
sx={{
'& .MuiFilledInput-input': {
'&.MuiInputBase-input': {
'&.MuiInputBase-input': {
textAlign: 'left',
},
},
},
}}
/>
) : (
<StyledTypographyRow sx={{ marginLeft: '12px' }}>{title}</StyledTypographyRow>
)}
</Stack>
Необходимо добавить задержку
const handleSetIsInput = (nameInput: string) => {
console.log('handleSetIsInput: ');
setIsInput(true);
setTimeout(() => {
if (titleRef.current) {
if (titleRef.current.querySelector('input')?.name === nameInput)
titleRef.current.querySelector('input')?.focus();
}
if (unitRef.current) {
if (unitRef.current.querySelector('input')?.name === nameInput)
unitRef.current.querySelector('input')?.focus();
}
if (quantityRef.current) {
if (quantityRef.current.querySelector('input')?.name === nameInput)
quantityRef.current.querySelector('input')?.focus();
}
if (unitPriceRef.current) {
if (unitPriceRef.current.querySelector('input')?.name === nameInput)
unitPriceRef.current.querySelector('input')?.focus();
}
}, 1);
};