Checklist automatically unchecks

Dash Python
1

My checkbox is automatically unchecking, why?

com-video-to-gif

When a button is clicked, I return an HTML component called cards, which contains a checklist.

card = dbc.Card([
	dbc.CardHeader('Check List'),
	dbc.CardBody(
			dcc.Checklist(
				options=[
					{'label': 'Gas On', 'value': 'NYC'},
					{'label': 'Enough gas left', 'value': 'enough_gas_left'},
					{'label': 'Correct gas flow', 'value': 'correct_gas_flow'},
					{'label': 'Correct gas type', 'value': 'correct_gas_type'},
					{'label': 'Gas Cap clean', 'value': 'gas_cal_clea'},
					
					{'label': 'Correct wire', 'value': 'correct_wire'},
					{'label': 'Correct wire wheels', 'value': 'correct_wire_wheels'},
					{'label': 'Enough wire left', 'value': 'enough_material_left'},
					{'label': 'Wire straighter correctly adjusted', 'value': 'wire_straighter_correctly_adjusted'},
					{'label': 'Wire roller at torch correctly adjusted', 'value': 'wire_roller_at_torch_correctly_adjusted'},
					{'label': 'Correct diameter roller at torch', 'value': 'correct_diameter_roller_at_torch'},
					{'label': 'Correct tip diameter', 'value': 'correct_tip_diameter'},
					{'label': 'Tip tightened', 'value': 'tip_tightened'},
					
					{'label': 'Filtration On', 'value': 'filtration_on'},
					{'label': 'Filters clean', 'value': 'filers_clean'},
					
					{'label': 'Compressor On', 'value': 'compressor_on'},
					{'label': 'Compressor clean', 'value': 'compressor clean'},
					
					{'label': 'Base Plate clamped correctly', 'value': 'base_plate_clamped'},
				],
				values=[],
				id='check_list_before_starting',
				
			)
	)
], style={'width': '1000px'}, className="mx-auto")
1 Like
2

Just came to Dash forum for the same reason.
In my case, I’m using a dcc.Interval component.

My guess is that each time a callback, having the dcc.components as Input, is fired my layout is set back to initial state, even if it automatically reach a preventUpdate… here is a reproductible exemple:

import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

server = app.server

app.layout = html.Div([

    dcc.Dropdown(
        options=[
            {'label': 'choice 1', 'value': 'choice1'},
            {'label': 'choice 2', 'value': 'choice2'}
        ],
        style={'height': '40px',
               'width': '280px'}
    ),

    dcc.Interval(id='interval', interval=3 * 1000, n_intervals=0),

    html.Button('run', id='button1'),

    html.Div(id='yala_container')

])


@app.callback(Output('yala_container', 'children'),
              [Input('button1', 'n_clicks'),
               Input('interval', 'n_intervals')])
def call_launch_logs(n_clicks, n_intervals):

    if n_clicks is None:
        raise PreventUpdate
    return html.Div('yala')


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

and here is a record of what’s going on…

dcc_interval_collapse
dcc_interval_collapse.gif877Ă—314 23.9 KB

here are the version of my packages:
dash==0.37.0
dash-core-components==0.43.1
dash-html-components==0.13.5
dash-renderer==0.18.0
dash-table==3.4.0

3

I just figured out how to get it to work. I wrote a callback to the checkbox, however you need to supply an output in the callback. So, I created a hmtl component where I store the result.

@app.callback(Output('checklist_output', 'children'), [Input("check_list_before_starting", "value")])
def on_form_change(test):
	print('test')
	return test

after adding this, it worked. Seems a bit weird that you need to do this.

4

You could make the checking a State of a callback rather than an Input, then it wouldn’t fire straight away. Then maybe use a button to trigger the completion of the form.

1 Like