Display confirmation popup whenever trying to submit a issue/comment in GitHub that's too short, and maybe every time #3911

We can’t block submissions because that would annoy people. We have some warnings like “pr from master” but they’re just warnings. If you press Enter it’s too late to display a warning without also blocking the submissions.

@fregante Can we not block the submit event, and if the user responds yes, just synthesize it again?

So you’re suggesting we ask for confirmation if the body is too short? Given that confirm() is synchronous we’d just need if !confirm(), then event.preventDefault()

Would it be possible, instead of using the confirm() synchronous modal, to follow a more subtle approach: bubble popup ? (see how they look like here )

What I have in mind is:

• RG to disable in advance all ways of submission (i.e. the <kbd>Submit new issue</kbd> and <kbd>Comment</kbd> buttons as well as <kbd>Ctrl+Enter</kbd>/<kbd>Enter</kbd>),
• then RG to attach its own event listeners for these buttons and keypresses,
• if the user clicks/presses them, to show a bubble popup on the textarea (or the button) with a warning message
• And if user clicks e.g. Enter, RG to make the submission itself.

Indeed, either way it requires one more action from the user, however from a code perspective:

• confirm() is easy, but we need to re-enable the form if the user clicks "Cancel" because GitHub breaks it on submit regardless of our confirmation.
• what you're suggesting requires the same changes (since the first submission will be cancelled) + appending a message in the DOM (I'm thinking something like this rather than the tooltip) + making sure that the user sees the message (it might be out of the viewport)

So perhaps it's not worth it. It may look nicer but it's more troublesome:

• confirm() will never stop working
• but a DOM element needs to be attached to an existing element, and the selectors always change

I'm thinking something like:

function handleComment() {
    if (body.length < 3 && !confirm('body too short, sure?')) {
        event.preventDefault()
        event.stopImmediatePropagation() // I don't know if it's necessary to stop comments, they're sent via ajax
    }
}

function handleNewConversation() {
    if ((body.length < 3 || title.length < 3) && !confirm('body too short, sure?')) {
        event.preventDefault()
    }
}

// pageDetect.hasComments
delegate(…,'submit', handleComment)

// pageDetect.isNewIssue / isNewPR
delegate(…,'submit', handleNewConversation)

@fregante I've made an attempt to turn your code example into actual ts code to be added to RG. <strike>Unfortunately my code doesn't manage to block submissions (I tested it via web-ext).</strike> It now blocks submissions when clicking the Submit button - I can't find a proper way to capture keypresses (Enter/Ctrl+Enter).

Of course I am nowhere near your experience level, and I'd surely need your guidance to make it work. It's just that I'd like to contribute and thought I might be of help into implementing this feature. Do you think my effort is worth turning it into a draft PR? What do you say?

<details> <summary>My attempt:</summary>

New file: source\features\confirm-too-short-comments.tsx

// import select from 'select-dom';
import delegate from 'delegate-it';
import * as pageDetect from 'github-url-detection';

import features from '.';


// function handleComment() {
function handleComment(event: delegate.Event<MouseEvent, HTMLAnchorElement>): void {
    let body = event.delegateTarget.closest('.timeline-comment').querySelector('textarea').value.length;
    if (body < 3 && !confirm('body too short, sure?')) {
        event.preventDefault();
        event.stopImmediatePropagation(); // I don't know if it's necessary to stop comments, they're sent via ajax
    }
}


// function handleNewConversation() {
function handleNewConversation(event: delegate.Event<MouseEvent, HTMLAnchorElement>): void {
    let body = document.querySelector('textarea#issue_body').value.length;
    let title = document.querySelector('input#issue_title').value.length;
    if ((body < 3 || title < 3) && !confirm('body too short, sure?')) {
        event.preventDefault();
    }
}

function init(): void {
    if (pageDetect.isIssue()){
        delegate(document, '.js-new-comment-form button[type="submit"]', 'click', handleComment); // There can be two buttons: 'Close issue' and 'Comment'
    } else if (pageDetect.isNewIssue()){
        delegate(document, 'form[class="new_issue"] button[type="submit"][class="btn btn-primary"]', 'click', handleNewConversation);
    }
}

void features.add(__filebasename, {
    awaitDomReady: false,
    include: [
        pageDetect.isNewIssue, // Find which one you need on https://fregante.github.io/github-url-detection/
        pageDetect.isIssue
    ],
    init
});

Addition in source\refined-github.ts

import './features/confirm-too-short-comments';

addition in readme.md

- [](# "confirm-too-short-comments") [Warns the user when trying to submit an issue title or comment with less that 3 characters](TODO)

</details>

I updated the code: it now blocks short submissions when clicking the Submit button. Unfortunately I can't find a proper way to capture the keypresses (Enter/Ctrl+Enter).

I can't find a proper way to capture keypresses (Enter/Ctrl+Enter).

Detect the submit event on the form instead of click/keypresses

Do you think my effort is worth turning it into a draft PR? What do you say?

Feel free to open a PR, at least to allow proper reviewing

Here it is: #4123

Thank you!

This just happened to me because I fat-fingered the enter key; This feature would not have saved me because the title was long enough, but just not done.

The only way to fix it would be to disable the regular enter key and always use cmd+enter even in input[type=text] fields like commits titles, conversation titles, PR merge titles, … but this would likely annoy everyone. 🤷‍♂️

I'd say to disable <kbd>Enter</kbd> in input[type=text] fields only in Issue/PR titles:

from all cases where someone might submit a message by mistake (mistyping <kbd>Enter</kbd>), I think the Issues and PR lists are the most annoying to happen: I have in mind the contributors in a repo who have chosen to get email notifications for every new Issue and PR.

Regarding confirm(), what if we followed a different approach?

My idea is to avoid the use of the admittedly obtrusive confirm(), in fact not display a dialog box at all, and just modify the forms functionality so that their "Submit" buttons only become active when what you have typed is long enough? Till then to remain disabled/grayed-out.

And of course rename the feature to: disallow-short-comments

Again, shortness has nothing to do with the issue since the problem is “fat-fingering enter before you’re done”, which can happen at any length.

Adding a confirmation regardless of length will just be annoying.

To summarize: the issue I describe in the OP is two-fold :

• that GitHub allows too short messages, which just 1 character,
• that GitHub allows submitting via plain <kbd>Enter</kbd> in input[type=text] fields. This is not a problem per se, but it facilitates submitting half-made submissions.

Also, in my OP I suggested as an overall solution, to display confirmation popups confirm() .

Seeing your comments I agree that the above approach might be annoying for the users, and that it doesn't solve the 'mistyping Enter' case.

That's why with my last comment, I suggested something different, a two-part feature, that would be as subtle to the user as possible:

1. disallow-short-comments: Enable submitting based on length, i.e. the Submit button to remain disabled until both title and body content have length more than a given value, e.g. 3. _^{(no confirm(), no confirmation dialog at all)}_

2. disable-submit-via-enter-in-singleline-text-fields: Disable submitting via <kbd>Enter</kbd> (regardless of length) in input[type=text] fields in only 2 places: New Issue and New PR pages: i.e. when you have focus to the title field in new Issue/PR pages, to be able to submit only via <kbd>Ctrl+Enter</kbd> or clicking 'Submit' .

Moved to updated issue

@fregante Thanks for opening the updated issue.

I just wanted to clarify, regarding my other suggested feature :

1. disallow-short-comments: Enable submitting based on length, i.e. the Submit button to remain disabled until both title and body content have length more than a given value, e.g. 3. _^{(no confirm(), no confirmation dialog at all)}_

Don't you think this would be useful to have as well? It would prevent submitting issues with just 1 character title and no body, and comments with just 1 character. Submitting an issue with such a short title and no body, I doubt it could have anything to offer. And, posting a comment of just a few characters instead of using a reaction is rarely if ever useful.

We can’t block actions by the user. If they want to open a 1-emoji issue, let them. The other issue takes care of accidental presses

Ok, thank you for replying.