App building : Multi-select change event triggers multiple times

Having API call on multi select change event.
Observed multiple calls to API on change event of multi select if multiple items are selected.

Just to update, similarly if we append text in input in text box, It doesnt call API multiple times.

However with multiselect observed multiple API calls with parameters as same value as selected items.

Hi @Arvind,

That is odd, if the event trigger is a change event then it should fire once per click.

Maybe you have another event that is triggering multiple runs. If you go into the State tab and then go to the query, you can see in the "controlled by" section what components/queries have control in triggering the query.

Can you share a screen recording of the behavior? Here is a vid of me testing out the expected behavior.

hi @Jack_T Not sure I got you correct, but we are hitting API, if we hit API per change event, then on selecting multiple options will result into multiple API calls will ended into race condition.

Hi @Arvind, what method are you using to select multiple options at the same time?

Are you doing this programmatically?

If a user has to click on an option to select it, that should trigger the API hit, then they must click another option to trigger a second API hit.

If they only should be triggering one option click and one API hit, you may want to use a Select instead of a Multiselect component.

If you can share the console log of the queries being triggered on the clicks of your multiselect that would help me better understand if there is a bug that is causing more than one query per click!

@Jack_T thanks for quick reply.
No, we want multiple options to be selected, which will become input parameters to API. However each time we select new item change event get triggered causing multiple API hits. and as we can not control API state, the end result is kind of race condition based on each API calls response time.
However we fixed that with blur event.
But still there is one issue, when we directly deletes a option using small x button at top right of each option, the blur event of multi select input not getting triggered. causing no API call and no expected result on UI.

1 Like

Ahhhh ok I see.

Yes the queries will track when variables within them change and if the run behavior is set to automatic it will cause them to run on single input changes.

Another option would be to change the run behavior from 'automatic' to 'manual' so that a specific event would be needed to trigger the query to run, such as button to submit, etc.

That is an interesting work around to use blur, but I think the better option would be changing the Run Behavior since I am not sure how to get around that issue with hitting the x on multi select input to trigger a blur.