Remove overlay if the user returns to the page via history

src/govuk/components/hide-this-page/hide-this-page.mjs

@@ -4,6 +4,7 @@ function HideThisPage ($module) {
   this.$module = $module
   this.firstButton = this.$module[0].querySelector('.govuk-js-hide-this-page-button')
   this.updateSpan = null
+  this.$overlay = null
   this.escCounter = 0
   this.escTimerActive = false
 }
@@ -31,9 +32,9 @@ HideThisPage.prototype.exitPage = function (e) {
   }
 
   // Blank the page
-  var $overlay = document.createElement('div')
-  $overlay.className = 'govuk-hide-this-page-overlay'
-  document.body.appendChild($overlay)
+  this.$overlay = document.createElement('div')
+  this.$overlay.className = 'govuk-hide-this-page-overlay'
+  document.body.appendChild(this.$overlay)
 
   window.location.href = this.firstButton.href
 }
@@ -66,10 +67,28 @@ HideThisPage.prototype.setEscTimer = function () {
   }
 }
 
+HideThisPage.prototype.syncOverlayVisibility = function () {
+  // If there is no overlay, don't do anything
+  if (!this.$overlay) { return }
+
+  // If there is, remove the element and references to it
+  this.$overlay.remove()
+  this.$overlay = null
+}
+
 HideThisPage.prototype.init = function () {
   this.initUpdateSpan()
   this.initButtonClickHandler()
   document.addEventListener('keyup', this.handleEscKeypress.bind(this), true)
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // blank overlay remains present, rendering the page unusable. Here, we check
+  // to see if it's present on page (re)load, and remove it if so.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncOverlayVisibility.bind(this))
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncOverlayVisibility.bind(this))
+  }
 }
 
 export default HideThisPage