How to reset modal after close?

I am using dash bootstrap modal that is a form that accepts input and adds it to the datatable. When I input data and close the modal, the data is still saved and persist. I am not using persistence attribute, however, the data still doesn’t clear.

When I reopen the modal, it automatically adds new information previously stored. Is there a way to clear all the values and reset the modal when the modal is closed?

For reference: Modal - dbc docs

# Add new property modal



           dbc.Button("ADD", color="primary", id="add", className="mr-1"),
                                  

            dbc.Modal(
                [
                      dbc.ModalHeader("Add new information", style={"color":"white"}),
                      dbc.ModalBody(
                          [

                              dbc.InputGroup(
                                  [
                                    
                                      dcc.Input(id="Street_Address"),


                                      dcc.Input(id="City"),


                                      dbc.Input(id="zipcode"),

                                  ],

                                  
                              ),

                            # Close ModalBody
                            ]),

                            dbc.ModalFooter(
                                  [
                                      dbc.Button("SAVE", color="primary", id="save", className="mr-1"),
                                  ]
                            ),
                    # Close Modal
                    ],
                    id="modal-2",
             ),


# Add information
@app.callback(Output("modal-2", "is_open"),
             [
                  Input("add", "n_clicks"),
                  Input("save", "n_clicks")
             ],

             [
                  State("Address", "value"),
                  State("City","value"),
                  State("zipcode","value"),
                  State("modal-2", "is_open")
             ],
             )
def add_prop(add_btn, save_btn, address, city, zipcode, is_open):

    if button_id == "add_btn":

        return not is_open

    elif button_id == "save_btn":

        return not is_open

You could clear the value of the inputs when the modal is closed. Here’s an example:

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Button("Open modal", id="open"),
        dbc.Modal(
            [
                dbc.ModalHeader("Enter some information"),
                dbc.ModalBody(
                    dbc.FormGroup([dbc.Label("Text"), dbc.Input(id="input")])
                ),
                dbc.ModalFooter(dbc.Button("Close", id="close")),
            ],
            id="modal",
        ),
    ],
    className="p-5",
)


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


@app.callback(Output("input", "value"), Input("modal", "is_open"))
def clear_input(n):
    return ""


if __name__ == "__main__":
    app.run_server(debug=True)

1 Like

My inputs in the callback are State vs Inputs. Updated the question with callback.