Adding an action to an overlay

Im building a travel booking site. On the homepage, there is a search bar with location, check in/out dates and guests. When you click on location a search city overlay pops up and you can choose your city, for dates a date picker overlay pops up to select dates etc.

When the overlay closes I want the data selected in the overlays to update in the search bar

Now, I know how to close the overlay, and I know how to navigate to the next page, but I can’t get the two interactions to play back-to-back and update the search bar. Any help is appreciated!

Hi there,

Thanks for reaching out! It looks you’re trying to memorize the state. If you are using interactive components, it might be achievable. Could you try to take a look:

If the issue persists, could you share your file link so we can try to take a closer look?


@y_toku yes memorise the state is exactly what I want. But Im not using interactive components. I am a student and was advised to rather duplicate the screen and navigate to the completed fields screen after the over lay closes but this does not seem to work. Please have a look and let me know what would be the best approach. I think using interactive components would be best but I have no idea where to start. Ideally I want the prototype to when you select Barcelona it replaces location, check in will be updated to 1 feb 2024 and check out 4 feb 2024 and add guests will update to 2 adults, 1 room. Thanks!

It’s slightly challenging to provide a complete suggestion in this context, but I recommend that you start experimenting with interactive components and some variants by using this guide:

Afterwards, you should be able to re-establish the connections between variants to manage different states, which should help you achieve your desired outcome. Could you try that out?

I inadvertently accessed the link from my personal account. Could you please delete my account?