Prop_id='.' and Value=None in dash.callback_context.triggered even after button is clicked

Dash Python
1

Following is the code snippet and callback is getting triggered but the prop_id and value are coming ‘.’ and None respectively after button click in dash.callback_context.triggered. The objective is to get the button value i.e. button text on click and set it to the input tag value with the menu-option-value id in the callback.

Kindly help me out.
Thanks!

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

app = dash.Dash(__name__)

app.layout = html.Div(className='main-body',children=[
                html.Div(className='menu', children=[
                    html.Ul(children=[
                        html.Li(className='menu-option', children=[
                            html.A(className='menu-option-btn', href='#', children=[
                                html.Img(src='./assets/icons/chart-area.svg', className='menu-icon'),
                                ' Compute  ',
                                html.Img(src='./assets/icons/caret-down.svg', className='caret-icon'),
                            ]),
                            html.Div(children=[
                                html.Ul(className='dropdown-menu', children=[
                                    html.Li(className='menu-items', children=[
                                            html.Button('Memory & Wait Time Stat', id='list-value', n_clicks=0)
                                    ])
                                ])
                            ])
                        ])
                    ])
                ]),
                dcc.Input(id='menu-option-value', value='Memory & Wait Time Stat'),
            ])

#Callback for getting the button value and id:
@app.callback(Output('menu-option-value', 'value'),
              [Input('list-value', 'n_clicks')]
)
def list_item_value(updated_value):
    ctx = dash.callback_context.triggered
    print(ctx)
    print(updated_value)
    raise dash.exceptions.PreventUpdate


#Output:
[{'prop_id': '.', 'value': None}]
0
2

Hi @Ahriman01

The Output you are showing is the expected when you first run the app, as Dash execute all the callbacks.

Do you have the same Output each time you click the button ? :thinking:

3

Hi @Eduardo,

See when the app loads for the first time, it shows us the output displayed above but when I try to click the button then it shows us nothing as if the button wasn’t click. I mean nothing displays when the button is clicked.

Can you tell me what could be the issue?

4

Hey @Ahriman01
This is an odd MWE, and I’m not sure what the objective is, but I think the problem is that you don’t have a return statement in your callback. If you don’t want to update the Output, if you change:

raise dash.exceptions.PreventUpdate

to this:

return dash.no_update

then you will see updates when you click the button

output:

[{'prop_id': 'list-value.n_clicks', 'value': 1}]
1
5

Hi @AnnMarieW,

Actually the problem is with the CSS script. I tried to execute it without the CSS and it was working fine like propid is coming as ID.n_clicks and value as the n_click value. But when I applied the CSS then it is causing this issue.

I’m sharing the CSS with you and kindly help me out with the CSS. I would be greatful.
Thanks!

*{
    margin:0;
    padding: 0;
}
body{
    margin: 0;
    padding:0;
}
.main-body{
    box-sizing: border-box;
}
.menu{
    display:inline-block;
    margin-top:0.8rem;
}
.menu-option{
    display:inline;
    position:relative;
}
.menu ul{
    list-style: none;
}
.menu-option div{  
    display:none;
    position:absolute;
    top:150%;
    z-index:1000;
    background-color:#e6e6e6;
    width:max-content;
    border:1px solid rgba(0, 0, 0, 0.4);
}
.menu-option-btn:focus ~ div{
    display:block;
}
.dropdown-menu{
    display: contents !important;
    border-radius: 4px;
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}
.menu-option ul li{
    border-bottom:1px solid rgba(0, 0, 0, 0.3);
    color:black;
    padding:0.3rem;
}
.menu-option-btn{
    text-decoration:none;
    color:white;
    font-size:1rem;
}
.menu-option-btn:hover{
    color:white;
    text-decoration:none;
}
.menu-option div li:nth-child(4n+1):nth-last-child(-n+4),
  .menu-option div li:nth-child(4n+1):nth-last-child(-n+4) ~ li {
    border:none;
}

#list-value{
    background-color: transparent;
    border:none;
    width:100%;
    cursor:pointer;
}

#menu-option-value{
    display:none;
}

Kindly see what could be change.