Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Changing `open` property of `html.Details` in a call back

I have a html.Details object in my layout. Depending on the actions I want to automatically open or close this group. When I put it in a callback output, I get an error saying that the open property is not valid. Does this mean I cannot change this property through a callback?

Invalid argument open passed into Details with ID “test-layout”.
Value provided: “close”

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
Error: Invalid argument open passed into Details with ID “test-layout”.

Value provided: “close”

at propTypeErrorHandler (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1604054361.dev.js:98421:9)

at CheckedComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_8_3m1604054361.dev.js:92763:77)

at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:14938:20)

at updateFunctionComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:17169:22)

at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:18745:18)

at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:182:16)

at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:231:18)

at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:286:33)

at beginWork$1 (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:23338:9)

at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_8_3m1604054361.14.0.js:22292:14)

Hi anish,

The html.Details property ‘open’ can be changed and managed using callback, the problem you are facing is that you are providing ‘close’ instead of True or False

This example works:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__,)
app.layout = html.Div([

html.Div([
        dcc.RadioItems(options=[
            {'label': "Close", 'value': "Close"}, {'label': "Open", 'value': "Open"}
                 ], value=1, id="radio_items"),

        html.Details("This is the children option", id="details"),

         ], style={'margin-left': '5.4%', 'width': '20.4%', 'display': 'inline-block'}),

 ], style={'background-color': 'white'})

@app.callback(
    Output('details', 'open'),
    Input('radio_items', 'value'))
def set_cities_options(selected):
    if selected == "Close":
        return False
    else:
        return True
    
    
if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes

Hey AnnMarieW, thanks for your :heart:

New generation do not recognize others effort :woozy_face: :joy: