Auto jump to next. input - how to do it?

Question

React

Hello!

There is a form of three inputs (dd.mm.yy)

Please tell me how to make an auto-transition to the next. input without pressing TAB..that is, the person entered two digits, and the focus shifted to the next input..

Here is the code of my form:

<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>

I'm trying to do something like that - only I can't fasten the focus itself ((...

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

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