dash-bio
dash-bio copied to clipboard
Nonstandard Atom Window Text Input Element Unfocusable
Describe the bug When creating a modal that contains a dash-bio window, the input box inside of the Nonstandard Atom doesn't focus.
To Reproduce Steps to reproduce the behavior: Click the X on the left toolbar and try to insert the text
import dash_bootstrap_components as dbc
import dash_bio as dashbio
import dash_design_kit as ddk
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dbc.Button("Open modal", id="open", n_clicks=0),
dbc.Modal(
[
dbc.ModalHeader(dbc.ModalTitle("Header")),
dbc.ModalBody(dashbio.Jsme()),
dbc.ModalFooter(
dbc.Button(
"Close", id="close", className="ms-auto", n_clicks=0
)
),
],
id="modal",
is_open=False,
),
]
)
@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
if __name__ == '__main__':
app.run()
Screenshots
Python version: [e.g., 3.7.2] 3.9.0
an workaround is to use ddk.modal