Habitica: Prevent accidentally closing tasks in edit mode

[lemoness]

When tasks are open in edit mode, you shouldn't be able to click out of them and lose changes. Instead, it should trigger the following prompt if they typed anything in the task while it was in edit mode:

"Would you like to stop editing? Any changes made will not be saved."

Note that this prompt shouldn't come up if they didn't enter any text or make any changes.

[paglias]

We can also prevent the modal from closing at all by clicking outside of it or by pressing ESC if we want

[Alys]

I'd like to keep being able to use ESC to close the modal - it's a useful for keyboard control of the website.

I like the idea of the prompt to confirm you want to leave.

[Alys]

I've deleted some old comments about a potential fix that's no longer relevant because the site's code has changed.

Recently, a similar bug was fixed in the Challenge creation/edit screen and it was a very easy fix so I'm marking this as a good first issue. https://github.com/HabitRPG/habitica/pull/11409
:no-close-on-backdrop="true" looks like it's what we need. The task edit modal already has no-close-on-backdrop turned on when the tag selection screen is open (code below) but I think it should be on all the time.
https://github.com/HabitRPG/habitica/blob/99599953f55766fb447707594fe1c66a78d9e89d/website/client/src/components/tasks/taskModal.vue#L5

[Alys]

Although I notice that the issue is actually for adding a prompt. I don't know if that needs a specific design? @Tressley

My feeling is it would be good to do a quick fix now to prevent the task edit modal from closing at all when you click outside it, and then if a prompt is desired, it could be added later if design work is needed for it.

[Tressley]

@Alys -- I agree. For now I think we should just prevent the user from clicking outside of the modal and losing focus. The only way to close the modal should be "Cancel" or "Save."

[MagicMilly]

@alexthomson1, @laurel-thomson, and I (new Habiticans! 🎉) are going to get together and work on this. Thank you for the good first issue tag!

[Alys]

@MagicMilly @alexthomson1 @laurel-thomson Thanks! I've marked this as in progress for you. Post here if you have questions!

[MagicMilly]

Update: @alexthomson1 and @laurel-thomson have spun up local copies on their machines (Linux and Windows). Still working on mine (MacOS). But we are making progress! ⭐️