✊🏿 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!

Issue with dash Loading components (dcc.Loading)

When I use dcc.Loading instead of html.Div dash throws the following exception:

An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like:…

EDIT: I observe the issue only when I choose an option from the dropdown menu and then clear selection by clicking on the x in the drop-down.

A minimal not-working is below:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_table
import pandas as pd

external_stylesheets = [
                        'https://codepen.io/chriddyp/pen/bWLwgP.css',
                        ]

app = dash.Dash(__name__,
                external_stylesheets=external_stylesheets, 
                suppress_callback_exceptions=False)
app.title='Explorer'
app.layout = html.Div([
        html.Div([
            dcc.Dropdown(id='dropdown-database',
                         options=[{'label': db, 'value': db} for db in ["Option1", "Option2"]]
            ),
        ]),
        html.Div([
                dcc.Loading([
                    html.Div([],id='display-area')
                ])
        ])
])


df_dummy=pd.DataFrame([{'sample_column':'sample_value'}])

dummy_table = dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df_dummy.columns],
data=df_dummy.to_dict('records'),
)

@app.callback(
    Output('display-area', 'children'),
    [Input('dropdown-database', 'value')]
)

def get_display_area(ddown_item):
    if not ddown_item:
        return [dummy_table]
        #return html.Div("Select an option!")
    else:
        tables_list_content = (
            html.Div(
                [
                    html.P("Title"),
                    dummy_table
                ],
            ),
        )
        tabs = dcc.Tabs(
            [
                dcc.Tab(tables_list_content, label="Tables List"),
            ],
        )        
        return [tabs]
app.run_server(debug=True)

Hi @jaser
is it because you entered an empty list instead of children=[ ] inside the div?

html.Div(id='display-area', children=[])

@adamschroeder thanks for the suggestion that did not resolve it.
I edited the original post stating that the exception is shown only when I choose an option from the drop-down and then unselect the option (by clicking on x) in the drop-down menu.

@jaser
I’m not getting any error message. When I choose option1 or option2 I get ‘tables list’, and when I clear the dropdown, the div is hidden. I don’t get an error. I’m using Dash 1.16.0 and Plotly 4.10

Thanks @adamschroeder for testing the code. I am almost certain that the code worked for me previously.
Now, installing dash 1.6.0 (from 1.6.2) did not help me either.
Here are my current dash packages:

package                    |            build
---------------------------|-----------------
dash-1.6.0                 |             py_0          56 KB  conda-forge
dash-bootstrap-components-0.8.2|           py38_0         110 KB  conda-forge
dash-core-components-1.5.0 |             py_0         4.2 MB  conda-forge
dash-renderer-1.2.0        |             py_0         923 KB  conda-forge
dash-table-4.5.0           |             py_0         1.5 MB  conda-forge

Try Dash 1.16.0
does that help?

Nope, it did not.
Below is a visual of what happens. Note that after clearing the drop-down the error appears and the dash tab components are not cleared.

Can you please share the exact code you’re using so I can try to replicate again.

@adamschroeder
the video/GIF is from the code that I shared on my first post. Selecting and deselecting an option should produce that error.

For me it works. Not sure what’s wrong. I don’t get an error with your code

Thanks @adamschroeder. The issue was with dash-renderer. Upgrading to dash-renderer==1.8.2 resolved my issue.