Prevent Accidental Data Loss in OffCanvas

[Jan-Eimertenbrink]

Description

With our new schema in FlowNext, we often move creation and editing processes into a modal or off-canvas view. As a result, these often contain larger forms. In the case of an off-canvas view, a large transparent background area is created, which currently closes the off-canvas when clicked.

While this behavior is generally intended, it can be frustrating for users if they are in the middle of a longer creation or editing process and accidentally click on the background—losing their progress. To prevent this in the future, we want to introduce a confirmation modal as optin.

We are taking inspiration from other design systems, such as Primer (GitHub), which also offers an optional confirmation modal in its styleguide. This modal will inform users that they are about to lose unsaved data.

Important: This modal should only be used in exceptional cases, as displaying it too frequently could feel intrusive and annoying for users. A useful addition could be a checkbox or button with the option “Don’t show this again.”

Example Picture

[twiesing]

We should talk about this again in peace. We had the feature in the past and it was removed on purpose.