sindresorhus/refined-github

Why is the "submit issue" button not enabled? Let's tell the user #4575

fregante posted onGitHub

I filled in the form on https://github.com/sindresorhus/refined-github/issues/new/choose, but why can't I click "Submit new issue"?

<img width="450" alt="Screen Shot 2" src="https://user-images.githubusercontent.com/1402241/125990790-2dbddd9b-cf8d-46f9-813e-ff7fbfc4de54.png">

Disabled/grayed out buttons are bad UX: https://stories.justinewin.com/disabled-buttons-dont-have-to-suck-10da0bb6d37e

It's easy to see why the button might be disabled if the form has 2 fields, but it's gets more difficult on larger forms.

I think on GitHub this form is only now appearing with the issue template forms, but we could apply this solution everywhere (ish)

Possible solutions:

  • don't gray out the button (might be difficult to contrast GitHub’s own code on this)
  • let the user click on the disabled button, but then call form.reportValidity(), which should cause the browser to focus the first [required] field, or at least show a tooltip

This sounds like a simple feature, except that [disabled] buttons ignore all clicks. We'd need something like this: https://stackoverflow.com/a/32059136/288906

And then wrap the button with a proper handler (which is just if button.disabled, form.reportValidity()

Worth it?

posted by fregante over 3 years ago

Fund this Issue

$0.00
Funded

Pull requests