Автопереход на след. инпут — как сделать?

Question

[Александр Осадчий]

Здравствуйте!

Есть форма из трех инпутов (дд.мм.гг)

Подскажите пожалуйста, как сделать автопереход на след. инпут без нажатия TAB..то есть, человек ввел две цифры, и фокус сместился на следующий инпут..

Вот код моей формы:

<Grid container alignItems="flex-end" spacing={3} wrap="nowrap">
        <Grid item>
          <Text color="#656C91">{t`Day`}</Text>
          <TextMaskField
            name={`${name}.day`}
            mask={[/\d/, /\d/]}
            autoComplete="off"
            showHelper={false}
            maxLength="2"
            onKeyUp={focusChange}
            placeholder="XX"
          />
        </Grid>
        <Grid item>
          <span className={classes.spacer}>{'/'}</span>
        </Grid>
        <Grid item>
          <Text color="#656C91">{t`Month`}</Text>
          <TextMaskField
            name={`${name}.month`}
            mask={[/\d/, /\d/]}
            autoComplete="off"
            showHelper={false}
            maxLength="2"
            innerRef={firstNameRef}
            // onKeyUp={focusChange}
            placeholder="XX"
          />
        </Grid>
        <Grid item>
          <span className={classes.spacer}>{'/'}</span>
        </Grid>
        <Grid item>
          <Text color="#656C91">{t`Year`}</Text>
          <TextMaskField
            name={`${name}.year`}
            mask={[/\d/, /\d/, /\d/, /\d/]}
            autoComplete="off"
            showHelper={false}
            placeholder="XXXX"
          />
        </Grid>
      </Grid>

Пытаюсь что-то такое сделать - только сам фокус не могу прикрутить((...

const focusChange = () => {
    if (field.value.day.length >= 2) {
      // field.value.nextElementSibling.focus();
      firstNameRef.focus();
      // eslint-disable-next-line no-console
      console.log('YEES');
    }
    // console.log(field.value.day.length, 'YEES');
  };

Answer 1

[n1ksON]

firstNameRef.current.focus();
https://codesandbox.io/s/vibrant-morning-g27uy

Comments

[Александр Осадчий]

Так-то да...но в моем случае - нет прямых инпутов((

[n1ksON]

Александр Осадчий, тогда через document.querySelector('selector').focus()

[Александр Осадчий]

n1ksON, а можно ли сделать
document.querySelector('selector').focus()
по атрибуту name? <input name="birthay.day" .. />

[n1ksON]

Александр Осадчий,

document.querySelector('input[name="birthay.day"]').focus()