Binding dropdown menu selection in a repeated component

Hi there,
I’m building an application in which at some point I need to place a dropdown menu inside a repeated component.
The external component is repeated with a data variable (A), and the dropdown menu options are populated with data from another data variable (B).
The problem I’m having is that the binding between the selected option in the dropdown menu and an external variable seem to not work. In particular, when I bind the dropdown menu selected option to a variable and then test the selection, the binded variable doesn’t update its value when an option it’s selected.

Just to make the situation as clear as possible, at the beginning I couldnt make the dropdown menus options populate, but after I put some delay before the data variable A gathering, the dropdown menu options started to appear with the data from variable B. (you can find the descrption of the problem I had before here: Repeating a dropdown Field). I don’t know if the problems are related.

Can anyone help me understand what’s going on?

Hi! I answered also onto your other post, but in general having inputs/dropdowns in repeats while in 1.X is a lot of work, and something that we struggle ourselves with. I would recommend changing the app design, or waiting for our 2.X client, which should work better for these complex nested binding cases.

If you insist, working around this would mean setting the selection value to a page variable, and from the change of the selection updating the data variable, or populating on save from the page variable, or something similar.

Hi there,
I actually get it to work. Probaly it’s not the simplest way ever, but neither too complicated :slight_smile:

I modified the repeated dropdpwn menu into a container, so that I could access the inner component event.
I didn’t bind the selected value to any variable from the menu on the right, but I used the OnChenage event triggered by selecting an option from the dropdown as a trigger for the “set page variable” flow function and used the output from the ciomponent OnChange node (outputs[“Component onChange”].event.value) to set the new value.
In my case the variable I used is a list of objects were I tracked the link between the data variable populating the repeaed list with the selection of the dropdown menu.

Hope this will be helpfull!

1 Like