How do I get the value on current component implementing an event handler

Queries and Resources
1

  • Goal: I have two multiselects in a form, one for countries and another for partners, a partner reside in x country. What I am trying to do, is that when the value of the countries multiselect changes and a country is selected, I want to pre-select all partners the reside in the selected country while also keeping whatever partner has already been selected.

  • Steps: So I added an event handler on change in the countries multiselect, but the problem has been that in the code of the handler, I don't know how to get the value os the latest selected country in the countries multiselect. I can select the value of every other component, but not the one I am adding the event handler to. I believe this is a simple problem to solve and that the details I have provided are enough, but let me know if you guys need anything else. Thank you already!

  • Details:

  • Screenshots:

  • App json export:

1 Like
2

Hello @Paulo_Cesar_Alves_da_Silva_Junior! Welcome to the forums.

I think you need to run a script like this in the event handler:

let countryPartners = partners.data.filter(partner => 
  partner.country === select5.value);

multiselect2.setValue(multiselect2.value.concat(
  countryPartners.map(filtered => 
    {
      return filtered.name
    })
))

Here select5 is the Country selection and multiselect2 is the Partner selection(s).

I just used simple data like this for the partners.data as a JS Query:

return [
  {"name": "Partner 1", "country": "US"},
  {"name": "Partner 2", "country": "Canada"},
  {"name": "Partner 3", "country": "Peru"},
  {"name": "Partner 4", "country": "US"},
  {"name": "Partner 5", "country": "Italy"},
  {"name": "Partner 6", "country": "UK"},
  {"name": "Partner 7", "country": "UK"},
  {"name": "Partner 8", "country": "France"},
  {"name": "Partner 9", "country": "Germany"},
  {"name": "Partner 10", "country": "France"},
  {"name": "Partner 11", "country": "Germany"},
]

2652019E-67E6-496B-88FF-C5B2E4875760

3

Thanks for the quick response!
I am having a different problem now, that prevents me from writing code in the handler.

Captura de Tela 2024-07-18 às 09.28.58
Captura de Tela 2024-07-18 às 09.28.581264×1528 115 KB

4

Does this persist even if you refresh the app or leave the site and come back with a cleared cache?

5

Yes, I tried it the whole day and this error has happened every time. What can be done?

6

@Tess @Paulo not sure if this is App related or a query thing.

1 Like
7

Oh no @pyrrho, we broke it! :frowning_with_open_mouth:

Just kidding, your logic looks great and it should have worked like a charm!

From looking at the error, there might be something else setting the value of the same component. Basically, something makes a change on the value, then this runs and makes a change on the value, triggering the former event that makes change on the value, and so on (at least, this is what I believe is going on). This would explain the "Maximum call stack size exceeded" error.

I would check any "Success" event handlers on your queries, or any JS queries using setValue, it's easy to miss those when making changes. if there are none, remove all event handlers interacting with this component and add them one by one.

We are also happy to take a look at it during Office Hours, where we are able to provide live support. Bugs like this one are usually easier to debug live.