Character count message does not update when textarea is updated programmatically

This was raised by a user:

[…] I’m using the Character Count component on the text area inputs.

A problem I’m having is that when JavaScript is used to clear the value, or populate an initial value when the page loads, the character count is not showing the correct value until the user interacts with the text area.

The method on initialisation I’m using is:

new CharacterCount(element).init();

I was wondering if there is anything I can pass through to the init function or if there are any other function calls I can make once it is initialised to get the component to refresh the character count?

I have reproduced this with the following code:

const CharacterCount = window.GOVUKFrontend.CharacterCount
const $module = document.querySelector('[data-module="govuk-character-count"]')
const characterCountInstance = new CharacterCount($module)
  
characterCountInstance.init();

const $textarea = document.querySelector('textarea');
$textarea.value = 'Hello, World.';

// Uncomment this line to check for a new update
// characterCountInstance.checkIfValueChanged();

You can see a live example here: https://govuk-frontend-issue-1677.glitch.me

The count message is only updated when the component is focused:

https://github.com/alphagov/govuk-frontend/blob/cfca85f6f336aa21d1a6fcc496ffc459480278e0/src/govuk/components/character-count/character-count.js#L96-L97

So right now you need to either run characterCountInstance.checkIfValueChanged(); manually after you’ve updated the value programmatically for it to be checked.

[36degrees]

I think it’s only looks like it’s fixed because the example now updates the textarea value after the init function is called but before the pageshow event fires.

If you change the value after the pageshow event, for example by setting $textarea.value using the console after the page has fully loaded, the character count message still does not update.

[vanitabarrett]

I think this may have been fixed by https://github.com/alphagov/govuk-frontend/pull/1868

I’ve adapted Nick’s old Glitch with similar code but now pulling in GOVUK Frontend 3.8.0. The problem seems to be resolved once that new version is being used.

I think this also means that this related issue with checkboxes is fixed too.

Glitch here: https://lyrical-hilarious-fir.glitch.me/

@36degrees @hannalaakso what do you think - are you happy for me to close these issues?