I am building an application where I want the date selector for queries to persist in the url (if you share the url with the date specified it will load the same query). In trying to do this I configured my URL parameters per the linked documentation:
However with this setup, after you load a page with the date value specified in the URL, if you try and change the date value in the picker it will revert back to the value specified in the URL and won't let you change it. This can be reproduced by creating a dateRange component, mapping the urlparams as shown in the screenshot, setting a value, and then reloading the page and trying to change the value.
I tried a workaround I saw elsewhere on the forum where I only store the values in the URL and then update the values by the url directly in the component (note the "Start date" and "End date" values in the component inspector):
Remove the Connect properties on the page to values stored in URL entry and when a date range is selected, you can store that in localStorage instead if you want the user to come apck and have the values pre-populated in the date range component.
Thank you for your reply. I understand that this would allow persistence locally, but the goal is that a user could send the link to another user and the page would display the same date range. I believe local storage would not work for this use case. I was able to make this work with other components but the dateRange component specifically seems to have weird behavior when using urlparams.
OK so don't use localStorage but I think the problem I noted above remains the same...with regard to the Connect properties on the page to values stored in URL....
This is actually a known bug on Retool's end, I've linked this thread to the internal tracking ticket we have so that we can update here if there's a fix!
In the meantime @jfarm, if you're still looking for a solution here, could you try passing {{ urlparams.hash.startDate }} and {{ urlparams.hash.endDate }} as default values for your component and let us know if that works?
@Kabirdas thank you for the update and looking into this issue. Storing the values directly in the component did not work for me as it created an infinite loop with the URL values, but storing the URL params in a temporary state object and then setting the component default values to that state did work.
