Govuk-frontend: Conditionals don’t show when using Back to return to a form with radio buttons (Chrome)

[fofr]

Steps to reproduce:

Using Chrome 80 or 81:

• Go to a form with radio buttons and a conditional (like this: https://design-system.service.gov.uk/components/radios/conditional-reveal/index.html)
• Select the radio button, show the field
• Hit continue
• Go back using the browser's back button
• The radio button is selected, but the field isn't showing

You can see this on:
https://www.find-postgraduate-teacher-training.service.gov.uk/

[36degrees]

From testing in Browserstack, I think this may be a result of a change in Chrome 79 – in Chrome 78, the conditionally revealed content is still shown when pressing back.

[fofr]

We've now observed this bug negatively affecting users in research.

[36degrees]

From testing in Browserstack, conditionally revealed content is displayed correctly when returning using the back button in Chrome ≤ 78, Firefox (77) and Safari (13.1).

It is not displayed in Chrome > 78, Edge, or IE8-11.

Waiting for DOMContentLoaded before testing the checked state of the checkbox/radio would fix the issue in IE9-11, but not in Chrome > 78 or Edge where the checkbox state is still incorrect when the DOMContentLoaded event fires.

This feels like a regression in Chrome 79, so might be worth reporting?

Chrome 78

Chrome 78 appears to re-evaluate the JavaScript when navigating back, and correctly identifies the checkbox as being checked, so the conditional revealed content is displayed.

Chrome 79, Edge 83 and Opera 68

Chrome 78 and Edge 83 appear to re-evaluate the JavaScript when navigating back, but incorrectly identify the checkbox as being unchecked, so the conditional revealed content is not displayed.

The checkbox is still incorrectly identified as being unchecked in the DOMContentLoaded callback, but is correctly identified as being checked after a 1ms timeout.

Edge 18

Edge 18 did not remember the state of the checkbox, nor any other form controls when using the back button.

The checkbox is arguably correctly identified as being unchecked, so the conditional revealed content is not displayed.

IE8-11

IE9, 10 and 11 re-evaluate the JavaScript when navigating back, but the checked state of the checkbox is incorrectly identified as being unchecked.

The checkbox is correctly identified as being checked in the DOMContentLoaded callback, so if we waited for that event to fire the conditional reveal should work in IE9-11.

IE8 behaves the same, except the DOMContentLoaded event does not exist. I did not test the onreadystatechange event.

Firefox 77 and Safari 13.1

Firefox 77 and Safari 13.1 both remember the state of the page, including the state of the conditionally revealed content. Neither browser appeared to re-evaluate the JavaScript.

Overview

| | Remembers checkbox state | Remembers conditional reveal | Comments | Checkbox checked state is correct immediately | Checkbox checked state is correct in DOMContentLoaded event | Checkbox checked state is correct after 1ms |
|----------------|-----------------------------|---------------------------------|---------------------------------------------------------|--------------------------------------------------|------------------------------------------------------------------|------------------------------------------------|
| Chrome 78 | ✅ | ✅ | JavaScript is re-evaluated. Form state is correct. | ✅ | ✅ | ✅ |
| Chrome 79 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ❌ | ✅ |
| Edge 83 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ❌ | ✅ |
| Edge 18 | ❌ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ✅† | ✅† | ✅† |
| IE11 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ✅ | ✅ |
| IE10 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ✅ | ✅ |
| IE9 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ✅ | ✅ |
| IE8 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ➖ | ✅ |
| Firefox 77 | ✅ | ✅ | State is preserved. JavaScript is not re-evaluated. | ➖ | ➖ | ➖ |
| Safari 13.1 | ✅ | ✅ | State is preserved. JavaScript is not re-evaluated. | ➖ | ➖ | ➖ |
| Opera 68 | ✅ | ❌ | JavaScript is re-evaluated. Form state is incorrect. | ❌ | ❌ | ✅ |

† correct in that it matches the state of the checkbox, which is unchecked because the form state is not preserved.

[36degrees]

From https://bugs.chromium.org/p/chromium/issues/detail?id=1035662:

crrev.com/700572 changed the timing of restoring control state so that
it is done as a task posted just after DOMContentLoaded.

Reading around that issue, it sounds like waiting for the pageshow event to fire might be an option (although Chrome 79 will still have this issue, it looks like a fix landed in Chrome 80 to ensure that the control state is restored before pageshow is fired.)