Input clears when API is ran

When a user clicks the “Decode VIN” button, I have an API set to run which populates the other relevant fields based on the VIN#. The issue I run into is that the VIN# input is cleared when this button is clicked. I want to keep the VIN displayed in this field so that it is added to the database when the “Next” button is selected. Here is my current setup:

I’m a novice learning Bubble, so probably someone else will give a better answer (and there might be errors with mine), but have you considered auto-binding the Enter VIN input element to the VIN for that user in the database? That way, as soon as the user clicks away from the Enter VIN element (whether they click the Decode VIN button or temporarily click away from the app), the VIN is stored in the db. The Decode VIN button’s workflow would grab the VIN from the db and use that as the API’s input. If they type half the VIN, click away from the page and come back, what they’ve typed so far is still in the input field and they can edit it until they think it’s correct before clicking Decode VIN. What they’ve typed already will even still be there if they have to reload the page for some reason.

A second option is to temporarily store the VIN in a custom state, auto-bind the input field to that, and it should still have the VIN value stored after the API is run. (Test it to be sure if I’m right or wrong!) You can then add it to the database when Next is clicked. The advantage to using a custom state is that the user doesn’t have to log in first. A disadvantage is that whatever has been typed is lost if the page is reloaded in the browser for some reason. It may or may not still be there if they click away from the app and come back. Be aware that custom states are stored in the user’s browser but the database (the first option I suggested) is stored on Bubble’s server.