dbc.Form component causes unwanted page refresh #384
Description
- dash version:
1.12.0 - dash-bootstrap-components version:
0.10.0 - components affected by bug: dbc.Form, dbc.Input
What is happening?
Interaction with certain components within a dbc.Form cause the page to refresh. In the example below, a refresh is triggered by pressing Enter while the dbc.Input is selected. Seems to be browser independent (I tried Chrome, Firefox, and Safari). Replacing the dbc.Input with dcc.Input does not change the behavior.
What should be happening?
Pressing enter in the dbc.Input should trigger the callback, not force a form submission / page refresh. The docs seem to suggest that the Form component can be used for layout purposes without causing html form submission:
When building Dash apps we rarely make use of HTML forms, instead attaching callbacks to input components. However, Bootstrap's form components can still be a powerful way to control the layout of a collection of input components. We demonstrate a number of layout options below.
Minimal working example:
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import dash
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dbc.Form([
dbc.FormGroup([
dbc.Label('test input'),
dbc.Input(id='test_input', type='text', debounce=True)
])
]),
html.Div(id='output')
])
@app.callback(
Output('output', 'children'),
[Input('test_input', 'value')]
)
def display_input(val):
return f'input = {val}'
app.run_server(debug=True)