Moving to next form field when full Plotly-Dash Python App

I’m trying to move the focus to the next input field when they reach their max length.
(I’ve heard this called ‘autotabbing’ elsewhere on various stackoverflow pages.)

I’m using dash-bootstrap-components (dbc), but I assume that will not really change the answer vs dcc

The input fields are generated with:

import dash
from dash import dcc, html, dash_table, Input, Output, State, MATCH, ALL
import dash_bootstrap_components as dbc
from app.data_operations import *

app = dash.Dash()

app.layout = html.Div(

    dbc.Row(
        children=[
            dbc.Col(dbc.Input(id={'identifier': 'form', 'element_id': i}, placeholder='A',
                              type='text', size="lg", maxlength=1, value='')) for i in range(5)
        ],
        justify='between',
    ),
)

So far I’ve tried:

  • adding some random js scripts I found on the internet
  • a fruitless attempt at using a jQuery package before reading that jQuery doesn’t play nicely with Dash’s React.

Is there a Dash / Python solution here?

Or some kind of external script I can add here?

(I’m a real javascript novice, so don’t really know how I’d go about writing the functions for that)