How can I move automatically to next input after writing 4 digit in a date input year value

Question

right now if i type in date input year value the year value is still taking input after typing 4 digit i want to move focus automatically to next input after year value is typed in 4 digit and not accept values more then 4 digit

<Form.Control type='date' max='9999-12-31' max-length='8' // pattern='[0-3][0-9].[01][0-9].[0-9]{4}'     size='sm' value={initialValues.birthDate} onChange={(e: any) => {setInitialValues({ ...initialValues, birthDate: e.target.value })}}/>

 
input field year lenth is max 4 but still when user is pressing 5th value then this will delete the value of index 0 ind repalce with index value 1

Answer 1

// the pseudo code be like

dateInput.addEventListener('change', (ev) => {
  let l = ev.target.value.length;
  if(l >= 4) {
    getNextElement().focus();
  }
})