Pressing "Enter" to close a Firefox alert updates n_submit on a focused dbc.Input

[fedarko]

Hi! Thanks for developing this library. I noticed a strange minor issue for the dbc.Input component in Firefox; it is not very important, but I am reporting it since it seems like a bug relative to Dash's dcc.Input component.

Environment

pip list | grep dash output:

dash                      3.2.0
dash-bootstrap-components 2.0.4
dash_cytoscape            1.0.2

Component impacted: dbc.Input

What is happening?

Background

When a JavaScript alert message comes up, the message can be closed by (among other things, e.g. clicking on the OK button) pressing the Enter key.

If a user has focus on a text <input> element and an ordinary JavaScript alert message comes up, then the user retains focus on the <input> after closing the alert message.

Bug

In Firefox: if a user has focus on a text dbc.Input element when the user presses Enter to close an alert message, then this will count as a submission -- it will update n_submit for the dbc.Input. This can lead to slightly jarring behavior, since a user pressing Enter on the alert message probably does not intend to also press Enter on the input.

Interestingly, this only happens (1) when the input is a dbc.Input and (2) in Firefox. This does not happen when the input is a dcc.Input, and it does not happen in Chromium (at least in version 143.0.7499.40).

This issue is minor enough that it can be worked around fairly painlessly (I am no longer using alert messages in favor of just using Bootstrap toasts, so this doesn't impact me), but it is strange that it does not impact the ordinary dcc.Input component. This makes it seem like a DBC issue?

What should be happening?

Ideally, pressing Enter to close the alert should not trigger a submission on any focused input elements.

Code

Here is a minimal working example that reproduces this. If you type something in the input field, this will trigger an alert; on Firefox, pressing Enter to close the alert will also trigger a submission event on the input field, which will update the testOutput div. This does not happen in Chromium, and it does not happen if this component is an ordinary dcc.Input instead.

import dash_bootstrap_components as dbc
from dash import Dash, html, callback, clientside_callback, dcc, Input, Output, State

app = Dash()

app.layout = [
    # If you use a dcc.Input instead, then pressing Enter on the alert message
    # does not trigger a "submit" event
    dbc.Input(
        type="text",
        id="testInput",
    ),
    html.Div(id="testOutput"),
]

clientside_callback(
    """
    function(val) {
        alert(
            "If you press Enter to close me, then that will count as a " +
            "'submit' event on the input (but only in Firefox?)"
        );
    }
    """,
    Input("testInput", "value"),
    prevent_initial_call=True,
)

@callback(
    Output("testOutput", "children"),
    State("testInput", "value"),
    Input("testInput", "n_submit"),
    prevent_initial_call=True,
)
def handle_enter_pressed(val, n_submit):
    return val


if __name__ == '__main__':
    app.run(debug=True)

Screen captures of the above example

In both of these recordings, I type in something in the input field. This triggers an alert message, which I then close by pressing Enter. Whether this updates n_submit depends on if the input field is a dbc.Input or a dcc.Input.

Using dbc.Input	Using dcc.Input