outreachy / website

Code for the Outreachy website, based on Python, Django, and Bootstrap.
https://www.outreachy.org
GNU General Public License v3.0
233 stars 234 forks source link

Forms with date fields not submitted when using Safari #455

Open sagesharp opened 3 years ago

sagesharp commented 3 years ago

Some forms contain date fields, like the time commitment forms in the initial application or the "last contact date" in the mentor and intern feedback forms. When someone uses the Safari browser, there is no date popup. There's also no indication of the correct date format (which is YYYY-MM-DD). Using an incorrect date format shows an error and the form cannot be submitted.

We don't know why this bug happens, but it's been reported by several people using Safari. If someone with Django date field experience can comment on a fix, that would be great. ISTR that one solution was to use JavaScript when it's detected that the browser is Safari to show a date picker. I'm not experienced with JavaScript, unfortunately. If someone with Django experience could comment with what they've done to fix issues with DateFields and Safari, that would be great.

A work around might be to show the date format 'YYYY-MM-DD' in the help text for all DateFields in all forms. That would require tracking down all DateField fields, modifying the help text in home/models.py, running ./manage.py makemigrations && ./manage.py migrate, and committing the migration files along with the changed home/models.py.

There are a few form templates that override the help text, so we may need to audit all files that loop over the fields in a form. You can find those form template files by running git grep -l "in form.visible_fields" home/templates/home/

jameysharp commented 3 years ago

We fixed this issue for most people by switching to HTML5 date widgets, two years ago: see #244. The problem here is that Safari doesn't provide any UI for HTML5 date widgets, presenting them as plain text fields.

As long as someone on Safari enters the date in the format we expect, it works; it's only bad UX, not a bug which entirely prevents submitting the form. Django reports a validation error, but the visitor has to notice the error message, fix the input, and re-submit the form.

You can check current browser support for this feature at https://caniuse.com/input-datetime.

The WebKit bug blocking Safari support was opened in 2013 (https://bugs.webkit.org/show_bug.cgi?id=119175) and it has finally been implemented as of about three months ago. People using the current "Technology Preview" release of Safari should be all set. I don't know what their release schedule is, so I don't know when that will hit most peoples' desktops.

If we still want to do something to support the existing versions of Safari, we need to add an appropriate JavaScript polyfill that emulates the right behavior on browsers which don't support it natively. Apparently https://github.com/zoltan-dulac/html5Forms.js is one polyfill that provides this.