Two 'connected' searchbox Clear Values Issue

I have a page with two searchBox elements. For the purposes of getting responsive correct, the design required two separate searchBox elements (searchBox1 and searchBox2).

Because there is an expectation that a user will manually change the width of their browser window when using the app it was necessary to ‘connect’ the values of the searchBox elements by setting the default value to eachother’s value

Screen Shot 2021-10-20 at 3.54.38 PM
Screen Shot 2021-10-20 at 3.54.31 PM

What happens when running the app there is an error due to a ‘circular reference’

Screen Shot 2021-10-20 at 3.55.11 PM

This doesn’t cause the function to fail however as the searchBox values do reference the other properly and one is changed the other changes accordingly so when the user changes the browser width and one or the other searchBox elements are visible they have the same values.

However, my issue is that it seems like Bubble due to the ‘circular reference’ error is unable to use the workflow action to ‘Reset Data’ on the groups that contain the searchBox elements, so I am unable to clear the values of the searchBox elements.

The workflow action for ‘reset inputs’ is worthless in my opinion as it doesn’t allow us to select the input we want to reset and so I always reset input values by resetting the data of the group they are contained within.

Is there any other way to reset the values to clear them? I’m sure it wold likely not be a solution in basic Bubble but might require some sort of Javascript.

Hi @boston85719 :raised_hand:

You can try to do it thru a condition in your workflow. When the Current page width < 400, change the value of a custom state and reset your SearchBox.

And in your SearchBox, the inicial content will be this particular custom state.

It should work!

Thanks I’ll give the custom state a try