Почему когда появляется скрытый Input текст выделяется и приходится еще раз кликать в поле Input?

Question

[Edy_vse]

При двойном клике на нужное мне поле появляется input с содержимым и мне нужно чтоб курсор также уже был внутри input. Но получается так что при появлении input текст становится выделенным и курсора там нет, приходится подводить мышкой и повторно кликать. Кто может подсказать как поступить. По не известной мне причине ref не дает этот эл-нт.

Comments

[Дамир Шаниязов]

Было бы неплохо увидеть код, но попробуй использовать focus

Answer 1

[Edy_vse]

При рендере эл-та нет поэтому 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);
  };