Merge pull request #2590 from andymantell/fix/character-count-maxlength

Maxlength attribute should not be present on textarea after character-count JavaScript has kicked in

CHANGELOG.md

@@ -25,6 +25,7 @@ We’ve also made fixes in the following pull requests:
 
 - [#2549: Fix header with product name focus and hover state length](https://github.com/alphagov/govuk-frontend/pull/2549)
 - [#2573: Better handle cases where `$govuk-text-colour` is set to a non-colour value](https://github.com/alphagov/govuk-frontend/pull/2573)
+- [#2590: Maxlength attribute should not be present on textarea after character-count JavaScript has kicked in](https://github.com/alphagov/govuk-frontend/pull/2590)
 
 ## 4.0.1 (Fix release)
 

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

@@ -69,7 +69,7 @@ CharacterCount.prototype.init = function () {
   }
 
   // Remove hard limit if set
-  $module.removeAttribute('maxlength')
+  $textarea.removeAttribute('maxlength')
 
   this.bindChangeEvents()
 

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

@@ -226,6 +226,17 @@ describe('Character count', () => {
           expect(srMessage).toEqual('You have 10 characters remaining')
         })
       })
+
+      describe('when a maxlength attribute is specified on the textarea', () => {
+        beforeAll(async () => {
+          await goToExample('with-textarea-maxlength-attribute')
+        })
+
+        it('should not have a maxlength attribute once the JS has run', async () => {
+          const textareaMaxLength = await page.$eval('.govuk-textarea', el => el.getAttribute('maxlength'))
+          expect(textareaMaxLength).toBeNull()
+        })
+      })
     })
 
     describe('when counting words', () => {

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

@@ -238,3 +238,13 @@ examples:
       maxlength: 10
       label:
         text: Full address
+  - name: with textarea maxlength attribute
+    hidden: true
+    data:
+      id: maxlength-should-be-removed
+      name: address
+      maxlength: 10
+      attributes:
+        maxlength: 10
+      label:
+        text: Full address