Suggestion: Select

[martinbaste]

I'd like to add a suggestion to support Bootstrap's select in forms.

I wanted to use it in an dbc.InputGroup element but noticed that there is no dbc.Select element.

It is not really urgent as it can be created using html elements with the proper class:

dbc.InputGroup([
    html.Select([html.Option(1)], className="form-control"),
        dbc.InputGroupAddon(
            dbc.Button("Add", id="input-group-button"),
            addon_type="append",
        ),
])

[tcbegley]

Thanks for the suggestion @martinbaste. Happy to look into this. I guess ideally the currently selected value would be available as a prop so it can be used in callbacks? How are you currently retrieving that? Are you using the underlying Flask server to handle the form?

[martinbaste]

hm I hadn't gotten that far actually. But ideally the selected value would be available as a prop for a callback, yes. Any suggestions on capturing this in the meantime?

[tcbegley]

I haven't tried this, but html.Option does have an n_clicks prop, so you might be able to use that to work out which option in the dropdown was selected. If you go down that route I recommend using dash.callback_context, which you can read about here under the "How do I determine which Input has changed?" section.

I should note though that this won't allow you to dynamically change the options in the list, unlike dcc.Dropdown.

[martinbaste]

Thanks @tcbegley. I ended up using a dash-core-components Dropdown and modifying its appearance manually with CSS. I'll leave the CSS here in case anyone else is interested. The dropdown ends up being a little bit shorter than the button, though.

dbc.InputGroup([
    dcc.Dropdown(id="dropdown-id,
                className="dropdown-group"),
    dbc.InputGroupAddon(
        dbc.Button("Add", id="button-id"),
        addon_type="append",
    ),
]),

#dropdown-id {
  flex: 1 1 auto;
}

.dropdown-group {
  height: 100%;
}

.dropdown-group > div {
  border-top-right-radius: 0; #As my button is on the right
  border-bottom-right-radius: 0;
}

[tcbegley]

I added a new Select component in #251 which is available in version 0.7.1 of dash-bootstrap-components. Sorry it took me so long to get around to it. You can see an example on the Input section of the docs.

[acharnoff]

Hi @tcbegley. Thanks for adding support for Select. It appears that Select doesn't support the "name" kwarg and thus is not available as a prop for a callback. Any suggestions for a workaround?

[tcbegley]

Hey @acharnoff

The lack of name is an oversight. It should be easy to expose it an include in the next release which I'm hoping we'll get to in the next few weeks.

Just to help my understand, could you explain a bit about how you intend to use name with your callbacks?

[acharnoff]

Hey. Thanks for the quick reply. Here's a simplified example of what I'm doing. A list of form groups with a few options (in this case one Select and one numerical Input) and then a callback to process that form submission and update some internal state in the application. Let me know if I can provide any more information or clarification.

Form(
        [
            dbc.ModalHeader(f"Header", id="parameters"),
            dbc.ModalBody(
                [
                    dbc.FormGroup(
                        [
                            dbc.Label(f"x.label")
                            dbc.InputGroup(
                                [
                                    dbc.InputGroupAddon("Selection", addon_type="prepend"),
                                    dbc.Select(
                                        id=f"input-select-{x.id}",
                                        name=f"{x.id}:selection",
                                        className="form-control",
                                        value=x.current_select_value,
                                    ),
                                ]
                            ),
                            dbc.InputGroup(
                                [
                                    dbc.InputGroupAddon("multiplier", addon_type="prepend"),
                                    dbc.Input(
                                        id=f"input-value-{x.id}",
                                        name=f"{x.id}:multiplier",
                                        className="form-control",
                                        type="number",
                                        value=x.multiplier,
                                        min=0,
                                        max=10,
                                    ),
                                ],
                                style={"width": "140px", "padding": "3px"},
                            ),
                    for x in parameter_rows
                ],
                className="container",
            ),
            dbc.ModalFooter(
                [
                    Button(
                        "FIRE AWAY",
                        id="close-body-scroll",
                        className="btn btn-primary",
                        type="submit",
                        style={"width": "100px"},
                    )
                ]
            ),
        ],
        id=f"sigma-form",
        action="/api/update_params",
        method="POST",
        target="hidden-frame",
        className="row",
    )

class UpdateParameters(Resource):
    def post(self):

        clean_params = defaultdict(dict)
        
        form_response = request.form.to_dict(). # would like to be able to see selection from "Select" here
        for param, value in form_response.items():
            id, field = param.split(":")
            clean_params[id][field] = float(value.strip())

        logger.info(clean_params)
        app.update_params(clean_params)

api.add_resource(UpdateParameters, "/api/update_params")

[tcbegley]

Hey @acharnoff

The planned release is taking a little longer than I hoped, so I made a pre-release exposing the name prop of Select and other components, as well as exposing the action and method props of dbc.Form. If you'd like to try it you can install with

pip install dash-bootstrap-components==0.10.8rc2

If you do get a chance to take a look, I'm very interested to hear how you get on and whether it fixes your issues.