Clear Value of multi select not working

Hi,

I have a multiselect component that I try to clear when a buton is pressed.
The value seems to be cleared but the visual is not updated.
"multiselectInv" is my multiselect component.
As of right now it is populated by my query "filterinventorymultiple"
as you can see in the example TEST etienne is selected
image
When I submit, it trigers another query that uppon success it triggers "filterinventorymultiple" and clears all fields
image

But it doesn't update the multi select and shows the ID of the previous selection
image

It resets only if I reload the entire app...

Regards,

Hello @brocantcode!

Interesting issue, could you give me more details on the "filterinventorymultiple" query that you are using to clear out the multi-select component?

There should be a couple options for us to modify the query to fully clear out the selected state of the multi-select component, without needing a full page hard refresh.

Also to clarify, from the last image, all fields are cleared out BUT the ID is the only one remaining, correct?

If you are not already, make sure you are running the methods

multiselect.clearValue() or multiselect.resetValue()!

Hi,

The querry doesn't clear the components it's upon sucess that i sued the clear value
image

The querry is the one populating the multiselect.

I tired creating a JS querry using multiselectInv.clearValue() but it does not clear the multiselect when I run it

Regards,

So the first step is I select items in the multiselect.
Then I run aquerry to update he inventory and upon success it tries to clear every select / multiselect.

No mather what I try the multi select won't clear.
But the other select I use to filter the multiselect does clears and that's why i see the ID'S of the previous selection

not sure if i'm making sense :sweat_smile:

Hmm very interesting, are you able to view the component's state to see if the ID data is still being held in 'multiselectInv'?

Can you check the app logs to see that the query is running and see if there's any other queries running after the clearing query that might be re-populating the data...

You did mention that it clears after a hard refresh so I would imagine the data is being removed but the UI isn't reflecting the state change :thinking:

It looks like you set up the on success correctly. I did notice that at the top it has 'Edit success handler'.

Are you using a different query to clear the "other select I use to filter the multiselect"?

I am somewhat confused why the ID in 'multiselectInv' isn't clearing but maybe the clearing is not happening in the right order, or we might have to find a work around to get the component/page to refresh. Also consider joining our office hours so we can play around and try to live debug.

I'm also having this same issue. The multiselect is feed by a query that gets the list of transactions with status = 0 and their ID, upon submit by a button it updates the transactions to status = 1, clears the multiselect and runs the get transactions query.

2 things are happening at this stage:

  1. The multiselect is showing me the ID of the trx I already updated and that are not returning on my query. And I can't seem to find where they are being picked up from the multiselect's state.

  1. If I select a new item from the list, now value shows all the previous items selected when I'm only selecting 1 (or however many)

I've tried doing multiselect1.clearValue() and multiselect1.resetValue() and the result is the same.

Any help is greatly appreciated!

Hi,

I used a checkboxGroup component to replace the Multiselect since it has multiple bug. (another bug i had) Multiselect / Select all / not updating visually the multiselect

Now I'm able to call checkboxGroup.clearvalue() and it works fine !

@brocantcode Great to hear that you were able to find a work around!

@Jose_Cifuentes What version of Retool are you using? Are you self hosted or on the cloud?

I just tried to reproduce the bug, if I select items and click a button with the the Action ->control component -> clear value (on multi-select) it removes the selected items from the visual display and the state.

If you could let me know what version you are on and record a video of the behavior I can look to reproduce the bug and file a report!

@Jose_Cifuentes If I understood properly, the steps to see the bug you are having are:

  1. Select items in check box
  2. Run a SQL query that uses the data from the selected items
  3. Are you running on success of that query trigger (ie button press) an Event Handler to clear the component?
  4. Selecting new items from the list re-adds in the previous three selections (which should have been cleared by you calling multiselect1.clearValue() and multiselect1.resetValue() )

Are you calling those two methods on query run or on the button click that runs the query?

Hi @Jack_T Thanks for your response. Please find my answers below:

I'm using Retool version 3.74.0 on the cloud.

  1. correct
  2. correct
  3. correct, on Success of the query trigger I'm running the event handler to multiselect1.clearValue() and multiselect1.resetValue()
    image
  4. correct.

Video link

Appreciate the help! I'm already trying the checkboxGroup as suggested by @brocantcode so also thanks for that!

Thank you for the video! That was a great demonstration to help us understand the bug :raised_hands:

I noticed that in the bottom right, where it displays success messages for queries that run, there was some interesting behavior.

InsertSaldoTM runs ->multi-select is cleared

then, getSaldoTM runs successfully, and the IDs 51 and 58 appear again....

Is the getSaldoTM suppose to run after insert? It seems like that query is somehow causing the UI to show IDs when it should not.

After you selected the additional option at the end, the state refreshed and is was showing ID 51 and 58 in the state. So I believe that the getSaldoTM query is either running when it should not or having an additional effect of taking the results of the previous query and adding them back in again to the select component :thinking:

So the bug is either from the 'get' running when it isn't suppose to, but the query is working as intended.....or the get query doing something you did not tell it to do. Let me know if that query has any other on Success events that might be running behind the scenes :man_detective:

I'm seeing the a similar bug with the select component in Retool Cloud v3.76.0. The issue seems to be occurring only when I'm calling clearValue or resetValue from a success handler of a separate query within the project. The query I'm running this call from is the only query in the project.

I'm getting some funky behaviour from this too - after I run my query, the UI still shows the information in the selector, but it appears as though the information displayed in the UI is not actually being used for evaluation.

See image below where if I hover my app tooltip tells me that there is a value in my select, however the context window below the is_disabled field tells me the value ion my select is null:

image

Interestingly, a workaround that worked for me was: Instead of calling Reset Value through the GUI window where you can configure success actions (Control component > Reset Value), instead triggering a JS Query where I call mySelector.resetValue() as my success action.

In other words, this doesn't work:

image

But this does:

image

image

1 Like

@Harry_Secrett I love the work around!

I would hope that both options would work for clearing, so I will pass that along to our eng team.

For the UI display, that is very confusing that it shows a string value but below has null -> false. I was thinking the UI might just be lagging behind the reset function running.

In the case of you screen shot, had you selected a value, run the clear component query and then inspected the component?

@Jack_T that's pretty much right, yes - I selected a value, ran the reset component query, and then inspected the component.

I see, thank you for the details.

Is that the same query as the 'resetValues' query you show in your final screenshot that you said was working to clear?

That boolean parsing bug is very odd :thinking: