Character count message does not update when textarea is updated programmatically

[NickColley]

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:

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

Lines 96 to 97 in cfca85f

	$textarea.addEventListener('focus', this.handleFocus.bind(this))
	$textarea.addEventListener('blur', this.handleBlur.bind(this))

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

[NickColley]

This issue is related so changing how we detect changes could fix two issues: #1028

It's also worth noting that custom elements (web components) cover these sorts of cases.

[NickColley]

Also related: #1530

[NickColley]

I spiked the idea of using Object.defineProperty to watch value and it seems to work but I don't know how much of a good idea it is, feels risky.

I've also found out that MutationObservers only can detect changes in attributes not properties so may not work for values.

I've created to show that only attribute changes can be observed: https://jsbin.com/qajudohulo/edit?js,console,output

Custom elements allow property to be observed:

https://jsbin.com/yeduzof/2/edit?html,js,console,output

Patching the dom element with Object.defineProperty (IE9+):

https://jsbin.com/ligezey/2/edit?html,js,console,output

[NickColley]

@NickColley to look into other approaches for another hour.

[vanitabarrett]

I think this may have been fixed by #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?

[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.