✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Two Linked Inputs

I’m trying to link two inputs together, but can’t figure out a way to do it without getting a circular dependency. In the following example, I’d like to link the ‘minutes-input’ and ‘hours-input’ field together. For example, if the user sets the value of ‘minutes-input’ to 180, I’d like the value of ‘hours-input’ to become 3.

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        dbc.FormGroup([
            dbc.Label("Minutes"),
            dbc.Input(type="number", id="minutes-input")
        ]),
    ]),
    html.Div([
        dbc.FormGroup([
            dbc.Label("Hours"),
            dbc.Input(type="number", id="hours-input")
        ]),
    ])
])

if __name__ == '__main__':
    app.run_server(debug = True)

I use the callbacks

@app.callback(Output('minutes-input', 'value'),
    Input('hours-input', 'value'))
def update_minutes(hours):
    return hours*60

@app.callback(Output('hours-input', 'value'),
    Input('minutes-input', 'value'))
def update_hours(minutes):
    return hours/60

and this results in a circular dependency. Is there a design pattern that’s used for linked elements like this? Or is there a possible workaround I could use?

Thanks for the help