plotly / dash-bio

Open-source bioinformatics components for Dash
https://dash-gallery.plotly.host/Portal/?search=Bioinformatics
MIT License
529 stars 194 forks source link

Nonstandard Atom Window Text Input Element Unfocusable #766

Open andre996 opened 1 year ago

andre996 commented 1 year ago

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 Issue

Python version: [e.g., 3.7.2] 3.9.0

andre996 commented 1 year ago

an workaround is to use ddk.modal