Preserve the state of character count when navigating 'back'

CHANGELOG.md

@@ -23,6 +23,7 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#1855: Hint component can render block-level elements as valid HTML](https://github.com/alphagov/govuk-frontend/pull/1855)
 - [#1861: Fix the display of checkboxes when border-box box sizing is applied globally](https://github.com/alphagov/govuk-frontend/pull/1861)
 - [#1862: Fix display of warning text icon when border-box box sizing is applied globally #1862](https://github.com/alphagov/govuk-frontend/pull/1862)
+- [#1848: Preserve the state of the character count when navigating 'back' in the browser](https://github.com/alphagov/govuk-frontend/pull/1848)
 
 ## 3.7.0 (Feature release)
 

src/govuk/components/character-count/character-count.js

@@ -50,6 +50,20 @@ CharacterCount.prototype.init = function () {
  // Remove hard limit if set
  $module.removeAttribute('maxlength')
 
+ // When the page is restored after navigating 'back' in some browsers the
+ // state of the character count is not restored until *after* the DOMContentLoaded
+ // event is fired, so we need to sync after the pageshow event in browsers
+ // that support it.
+ if ('onpageshow' in window) {
+ window.addEventListener('pageshow', this.sync.bind(this))
+ } else {
+ window.addEventListener('DOMContentLoaded', this.sync.bind(this))
+ }
+
+ this.sync()
+}
+
+CharacterCount.prototype.sync = function () {
  this.bindChangeEvents()
  this.updateCountMessage()
 }