Button target is not respected

[debjan]

• dash version: 2.0
• dash-bootstrap-components version: 1.0

Button with target does not seem to be respected, i.e.:

dbc.Button(
    # ...
    target='_blank',
    # ...
)

[tcbegley]

Thanks for raising this @debjan, have reproduced the issue so will look into it and try to make a fix.

In the meantime you can use a html.A and add Bootstrap classes to it.

import dash_bootstrap_components as dbc
from dash import Dash, html

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

app.layout = dbc.Container(
    html.A(
        "Click here",
        target="_blank",
        href="/test",
        className="btn btn-primary",
    ),
    class_name="p-5",
)

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

[tcbegley]

This has been resolved in the latest version of dash-bootstrap-components

pip install -U dash-bootstrap-components

[picousse]

Is this solved?
I just updated to dash-bootstrap-components == 1.1.0
And it doesn't work.

It does work for external link, but it doesn't for internal links:

                dbc.Col(
                    dbc.ButtonGroup([
                        create_button_with_icon(
                            color="secondary",
                            icon_class="bi-cloud",
                            text="SalesForce",
                            href="https://igoogle.com",
                            target="_blank"
                        )
                    ])
                ),
                dbc.Col(
                    dbc.ButtonGroup([
                        create_button_with_icon(
                            color=reachout_color,
                            icon_class="bi bi-megaphone-fill",
                            text=reachout_text,
                            href=f"/test?request_id={request_id}",
                            target="_blank")
                    ]), style={"textAlign": "left"}
                ),

[tcbegley]

Hi @picousse

It does work for external link, but it doesn't for internal links:

An internal link is one which intercepts the default browser behaviour of following a link and updates the address bar while staying on the same page and notifying Dash of the change. As a result, it doesn't make sense to have an internal link that opens in a new tab, as the page must be loaded from scratch as it would be for an external link. As a result, the target prop will only have an effect if the Button is being used as an external link.

This is documented in the docstring for target, but if you have suggestions for how we could make this behaviour clearer to users I'm certainly interested to hear it.