Monorepo for Tangled tangled.org

proposal: issues (ux): if there's already text in issue form (title/body), clicking cancel should show confirmation dialog whether to discard #381

open opened by samanthanguyen.me

I personally encountered this issue a few times where I accidentally misclicked by clicking cancel instead of pressing the submit button (create issue).

proposal + implementation#

Show a confirmation dialog to make sure whether user wants to stop creating an issue. Some other git forges already implement this behavior, e.g GitHub and GitLab. This would make Tangled's behavior more consistent

  • Use the same dialog UI fragment in other places, which would have a "Discard changes?" title, short body text, + two buttons: "keep editing" and "discard changes"
samanthanguyen.me (author) edited

Its currently a bit late for me right now but want to mention id be happy to submit a PR for this, i can do that this week

oppi.li

when merging a pull request, we use hx-confirm which produces a native dialog, could be good to have a similar thing in the implementation here, as opposed to something custom.

samanthanguyen.me (author) edited

Thanks for mentioning! I remember seeing a native dialog show up. It actually brought up some thoughts about this. I feel like there's a subtle but important UX difference between this kind of prompt and the PR prompt: 1.) a confirmation prompt to cancel an action versus 2.) a confirmation prompt to continue with a non-canceling action.

I think there are pros and cons with using window.prompt(). Obviously some of the pros include accessibility built-in and UX features built in (click-outside to close, x button to close, pressing esc to close etc). The main problem is that the button labels can't be customized, they always say "Cancel" and "OK".

If I'm already trying to perform a "negative" action, the buttons become easily interpreted as double-negatives. Supposedly, pressing Cancel should mean stop creating an issue, and pressing OK should mean keep editing the issue. The actual action would be the opposite.

Some possible ways with pros/cons:

  1. Keep using a native prompt to keep consistency with PR merge prompts. Make the dialog text more descriptive: "Are you sure you want to cancel? Press OK to cancel, press Cancel to keep editing." Arguably, this would cause the user to take a bit more time to read and comprehend, since it's confusing.
  2. Use the browser's native Popover API with our custom dialog UI via the HTML popover attributes and whatnot, which is already seen in a few other places. Replace the PR prompt with a custom dialog. Then, use the explicit labels "Keep editing" and "Discard changes". The concerns of accessibility mostly go away with this if we use the same dialog fragment already used. I think the cons would be some extra maintenance, but I think reusing the same UI would mostly mitigate this.
oppi.li

i think i agree. it helps to think of verbs used in terms of hx-confirm, and also helps to avoid the verb cancel:

This action will discard the issue. Are you sure you want to discard your issue? 
[Cancel] [Ok]

that being said, it is possible to use custom hx-confirm dialog elements: https://htmx.org/examples/confirm/, so that would also work alright. in any solution, i'd want consistency among all the hx-confirms across the site!

samanthanguyen.me (author)

I actually didn't know the attribute allowed custom ones, very nice (I just realized I hadn't fully read the link you sent earlier which mentioned that, oops 馃) I also think that wording is much better and good balance :)

Would submit a PR right now even though it's simple because I accidentally messed up my local manual setup and still need to learn the Nix way, will send in a day or two.

sign up or login to add to the discussion
Labels

None yet.

area

None yet.

assignee

None yet.

Participants 2
AT URI
at://did:plc:smd2mvg2dao4rqnnz6qexdov/sh.tangled.repo.issue/3mct2hxv4tf22