Modal popup disappears on keystroke

Dash Python
1

In my dash application, I have a modal popup defined. I referenced the example in: Modal - dbc docs

The modal popup disappears upon a keystroke in any of the text fields. I can’t figure out what’s going on. Is there a property I can set or modify my code to not have it disappear?

Modal Popup

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

                              dbc.InputGroup(
                                  [

                                      dbc.Label("Tenant:  "), 
                                      dcc.Input(id="Tenant"), 


                                      dbc.Label("Industry:  "),
                                      dcc.Input(id="Industry"),


                                      dbc.Label("Address:  "),
                                      dcc.Input(id="Street_Address"),


                                      dbc.Label("City: "),
                                      dcc.Input(id="City"),


                                      dbc.Label("Zip: "),
                                      dbc.Input(id="Zip"),

                                  ],

                                  
                              ),

                              
                              .....
                              .....


                              # property type
                              dbc.InputGroup(
                                  [

                                     dbc.Label("Property type", style={"color":"white", "margin-right":"4px"}),
                                     dbc.RadioItems(
                                                    id="prop-type-2",
                                                    persistence=True,
                                                    persistence_type="memory",
                                                    options=[
                                                      {"label": "Office", "value": "Office"},
                                                      {"label": "Retail", "value": "Retail"},
                                                      {"label": "Industrial", "value": "Industrial"},
                                                      {"label": "Flex", "value": "Flex"},
                                                      ],
                                                      value=1,
                                                      style={"margin-left":"8px"}
                                     ),

                               ],
                             ),

                              dbc.InputGroup(
                                  [

                                      dbc.Label("Lease type: "),
                                      dcc.Dropdown(

                                              id="lease-type-2",
                                              persistence=True,
                                              persistence_type="memory",
                                              options=[

                                                  {"label": "Gross or Full Service", "value": "Gross or Full Service"},
                                                  {"label": "Modified Gross", "value": "Modified Gross"},
                                                  {"label": "Triple Net Lease", "value": "NNN"}
                                                  #{"label": "Flex", "value": "Flex"},
                                                  #{"label": "Sublease", "value": "Sublease"}

                                              ],
                                              placeholder="Select",
                                      ),

                                  ],
                                  
                              ),



                              dbc.InputGroup(
                                  [

                                      dbc.Label("Class: "),
                                      dcc.Dropdown(

                                              id="prop-class",
                                              persistence=True,
                                              persistence_type="memory",
                                              options=[

                                                  {"label": "A", "value": "A"},
                                                  {"label": "B/C", "value": "BC"}

                                              ],
                                              placeholder="Bldg. class",
                                      ),

                                      dbc.Label("Floor: "),
                                      


                            # Close ModalBody
                            ]),

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


# Add property and lease information


@app.callback(Output("modal-2", "is_open"),
             [
              Input("Tenant", "value"),
              Input("Industry", "value"),
              Input("Address", "value"),
              Input("add-prop-btn", "n_clicks"),
              Input("save", "n_clicks")
             ],
             [State("modal-2", "is_open")],
             )
def add_prop(tenant, industry, address, btn_click, save, is_open):

    if btn_click:

        return not open

    elif save:

        return open
2

I think the problem is with your callback, it looks like the callback that controls whether the modal is open or not is triggered by typing in the input box. Perhaps you could use the inputs as State to the callback rather than Input? Alternatively maybe you could have two different callbacks, one for opening / closing the modal and one for processing the information input inside the modal.

3

Changing inputs to state solved the problem for me.

1 Like