It's puzzling why the required field isn't functioning as expected for dbc.Select, but fear not, there's a workaround available to make it work.
You can implement a callback that gets triggered either when a value is selected from the dropdown menu or by utilizing dcc.Interval to check if dropdown.value is None. Another option is to include an empty choice in the dropdown and expand the check to
dropdown.value is None or dropdown.value == ""
in case the user chooses it. If the condition is met, then set the required attribute to true and style it with some CSS for the :required pseudo class to highlight it (e.g.
#SOME_INPUT:required {border: 1px solid red;})
.
You can use the following template as a reference:
select = dbc.Select(
id="dropdown-required",
required=True,
options=[
{'label': '', 'value': ''},
{'label': 'Heated', 'value': 'Heated'},
{'label': 'Ambient', 'value': 'Ambient'},
{'label': 'N/A', 'value': 'N/A'}],
)
app.layout = html.Div([select])
@app.callback(
Output("dropdown-required", "required"),
Input("dropdown-required", "value")
)
def set_dropdown_required(value):
res = (
True if value is None or value == ""
else False
)
return res
and apply some CSS styling in assets/style.css:
#dropdown-required:required {
border: 1px solid red;
}