Input value not updating on API fetch
I have an input element where the value attribute is data from an API call to the database . When the page loads , the data is fetched and the value of the input is set - all good . I have a change event that updates the database record with the changed value and on success or error , it will re -fetch the records . When re -fetching the records , on error , the value of the input is not updated . To test , I stored the API data in a variable which is set when fetch is called and that data is updating , so it would suggest that 'On error ' in the API call is picking up the fact there is an error , however I cannot figure out why the value is not updating . Any clues as to what I 'm missing ? I have a short Loom uploading , so can share if that helps visualise things when it 's ready . ✅1Still waiting for Loom . . . 🤔 Maybe try moving the fetch outside of the API call and have it part of the event instead . Given that this is triggering based on error or success could be part of the issue here , but given that you are doing it regardless of if you are successful or not could help , it 's just the timing is the only issue . . . hmmm I 'm in my phone at the moment , so not 100 % sure 😬 Thanks for the input , gents . At work now but pondering what you mentioned , it got me thinking about how forms would usually work i .e . if you submit something that 's not right an error is returned and the form is not submitted . Maybe I just need an error to be displayed upon error from the API to say that the field cannot be empty instead . Or maybe just prevent update if it 's empty and show an error client -side and leave the db constraint as a fallback , which is normally the best way to ensure that data is valid and cannot be accidentally changed incorrectly if something in the UI client -side doesn 't validate it properly . Cracked it thanks to your advice , @Max . I ended up setting the data array variable to map a new object , then a conditional to find and set the object updated and keep the rest i .e . the array is the same but with the value of one item updated . This means that on change the value is updated to whatever it is e .g . new value or empty string , which then updates on fetch . Just need to set some error logic for empty strings so that the user knows why it has changed back to the original . 💪2- 👍1
Yes Max is right This is a known issue , but due to the way toddle works , it is really hard to fix . We have has some internal conversations about moving to the new javascript signals ( https://github.com/tc39/proposal-signals ) which I believe would fix it , but it is not a simple change . @Andreas Møller
Yes Max is right This is a known issue , but due to the way toddle works , it is really hard to fix . We have has some internal conversations about moving to the new javascript signals ( https://github.com/tc39/proposal-signals ) which I believe would fix it , but it is not a simple change .
.jpeg/public)