Modal toggle not working as desired

Dash Python
1

I am using a modal popup in my dash application. In the layout, I have 2 buttons defined. One
Opens the modal and other one Closes it. I referenced the example in documentation and using a slightly different code to listen to each button: Modal - dbc docs

Upon close of the Modal, I’d like to call a function and run some other lines of code. However, I can’t seem to listen to the button click of close button.

            # Modal buttons - layout code

            dbc.Button("Add", id="open-btn"),
 
            dbc.Button("Close", id="close-btn")


            # Callbacks
          
             # Modal toggle
             @app.callback(Output("modal-2", "is_open"),
             [
                  Input("open-btn", "n_clicks"),
                  Input("close-btn", "n_clicks")
             ],

             [
                  
                  State("Address", "value"),
                  State("City","value"),
                  State("Zip","value"),
                  State("State","value"),
                  State("modal-2", "is_open")
             ],
             )
            def add_prop(open_btn, close_btn, address, city, zip, state, is_open):

                 if open_btn:

                    return not is_open

                ## This code doesn't work 

                if close_btn:

                   print("Call function")
        
                   append_prop(tenant, industry, address, city, zip, state)

                   return is_open

I am trying to figure why the close pop up block of code isn’t work.

2

The problem is with this line:

if open_btn:
    return not is_open

open_btn is the number of times the open button has been clicked, not whether it was the most recently clicked button.

To figure out which button was clicked, you should use dash.callback_context as explained here under the section "Determining which input has fired with dash.callback_context"

3

Interesting. My understanding was that if open_btn was checking for a boolean, true or false value and sets the property.

From the example in documentation, is_open property of modal is modified based on click events:

@app.callback(
    Output("modal", "is_open"),
    [Input("open", "n_clicks"), Input("close", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open
4

Yeah, the reason for that is to check that the button has actually been clicked at least once to stop the modal from toggling unexpectedly when the app starts up