Locally store values entered in draft for line item

[coderbyheart]

The LineItemForm needs a way to preserve partially entered data, so if the user navigates to another line item, their input is not lost.

I tried adding storing of data to the code myself, but failed and creating endless loops with react-hook-form. This seems to be a common issue, and I couldn't figure out, how to do it.

See this private Notion card:

Clicking ‘Add Item’ before saving Line Item loses data in item.

[RabeaGleissner]

I had some thoughts about this while looking through the code today.

I can see why it's annoying for a user to lose the data that they carefully typed into the form when they click on a different line item. If we were to save their state (for example in local storage, like @coderbyheart is suggesting), that would work well for new, unsubmitted items. But what about submitted forms that are being edited? We'd need to indicate in the UI which changes are actually submitted and which ones are just "remembered" by the browser. That might become a bit confusing to the user and also difficult to implement.

If the problem we're trying to solve is that changes are lost when clicking on a different line item, then I can think of a few other approaches:

• ask the user if they want to save or cancel when they click on a different line item and the current form is dirty
• submit the current form on blur (editing or deleting the form is easy, so no harm in saving the data, I think)
• disable clicking on other items while the form has unsubmitted changes

What do you think?

Screenshot for ease of understanding what these line items are we're talking about!

[coderbyheart]

I think warn on dirty form is the best option. We can't save partial forms server side, because they are invalid. Blocking other UI elements feels very intrusive and is not a common pattern (we would need to move the form to a modal or other form of UI element that ONLY has the form).