How to populate one dropdwon upon selection of value in another dropdown?

[tvsathish]

Hi,

I have a select dropdown that must be populated on the selection of another dropdown. I use FormFieldSelect, how to detect the change of value and populate the other dropdown accordingly?

               c.Form(form_fields=[
                        FormFieldSelect(
                            name=f"Component",
                            title="Component",
                            options=str_list_to_select_options_list('component', Component.fetch_values()),
                            required=True
                        ),
                        FormFieldSelect(
                            name=f"SubComponent",
                            title="SubComponent",
                            options=list_of_subcomponents(selected_component),
                            required=True
                        ),
                    ],
                    method="GET",
                    submit_url="."
                ),

How should we populate a text area, at the bottom of the page (but is not part of the form) with the results of the Submit call?

Thanks and regards,

Paddy

[sydney-runkle]

@tvsathish,

Great question! I'll tinker a bit with this and see if I can come up with a solution :).

[sumanth-manchala]

@sydney-runkle, were you able to come up with a solution? Thanks!

[schatimo]

I would propose that FormFieldSelect (and similarly for FormFieldSelectSearch) needs an additional field, e.g., set_initial_value, which is a dict with the URL of the endpoint that sets the initial value of one field based on the selection of another field's value and the query parameters, i.e., the names of the other fields affecting the field's value.

For instance, assume we have a form model with two fields x and y where the value of x determines the value of y (expressed via the additional field set_initial_value).

class SelectForm(BaseModel):
    x: ToolEnum
    y: ToolEnum = Field(json_schema_extra={'set_initial_value': {'url': '/api/forms/set_initial_value_y', 'query': {'x': None}}})

The logic that when x changes, both triggering /api/forms/set_initial_value_y?x=new_value_for_x (returning a str, or a SelectOption if y is of type FormFieldSelectSearch) and subsequently updating the initial value for field y happen in the function

FastUI/src/npm-fastui/src/components/form.tsx

Line 96 in e8b12f5

const onChange = useCallback(() => {

Any views on this proposal? Happy to make a PR.