From c582907dade6c96be6da6643bb5cde71f978fb98 Mon Sep 17 00:00:00 2001 From: Yauheni Balashka Date: Thu, 17 Apr 2025 12:06:45 +0300 Subject: [PATCH 1/2] FIO-8968: fix displaying word and charater counter when hide and show preview --- src/components/_classes/input/Input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/_classes/input/Input.js b/src/components/_classes/input/Input.js index 025b457da7..e7f03ad059 100644 --- a/src/components/_classes/input/Input.js +++ b/src/components/_classes/input/Input.js @@ -185,7 +185,7 @@ export default class Input extends Multivalue { } } - updateValueAt(value, flags, index) { + updateValueAt(value, flags, index = 0) { flags = flags || {}; if (_.get(this.component, 'showWordCount', false)) { if (this.refs.wordcount && this.refs.wordcount[index]) { From 5efb2da7f0cab6813c5436ed385b679b7bb84712 Mon Sep 17 00:00:00 2001 From: Yauheni Balashka Date: Fri, 18 Apr 2025 09:25:12 +0300 Subject: [PATCH 2/2] FIO-8968: Add test --- test/unit/TextArea.unit.js | 42 +++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/test/unit/TextArea.unit.js b/test/unit/TextArea.unit.js index 4b2bdadeb5..acefe6e214 100644 --- a/test/unit/TextArea.unit.js +++ b/test/unit/TextArea.unit.js @@ -11,6 +11,7 @@ import { comp1, comp2, comp3, comp4 } from './fixtures/textarea'; import TextAreaComponent from '../../src/components/textarea/TextArea'; import { fastCloneDeep } from '@formio/core'; import { getFormioUploadAdapterPlugin } from '../../src/providers/storage/uploadAdapter'; +import FormBuilder from '../../src/FormBuilder'; window.ace = require('ace-builds'); describe('TextArea Component', () => { @@ -299,6 +300,45 @@ describe('TextArea Component', () => { }).catch(done); }); + it('Should show the amount characters and words when we toggle preview button', (done) => { + const comp = _.cloneDeep(comp3); + comp.components[0].showWordCount = true; + comp.components[0].showCharCount = true; + comp.components[0].defaultValue = 'My value' + + const builder = new FormBuilder(document.createElement('div'), comp).instance; + const textArea = builder.webform.components[0]; + const editComponentRef = textArea.refs.editComponent; + const clickEvent = new Event('click'); + editComponentRef.dispatchEvent(clickEvent); + + setTimeout(() => { + const previewButton = builder.componentEdit.querySelector('[ref="previewButton"]'); + const preview = builder.componentEdit.querySelector('.component-preview'); + const charCount = preview.querySelector('[ref="charcount"]'); + const wordCount = preview.querySelector('[ref="wordcount"]'); + assert.equal(charCount.textContent, '8 characters'); + assert.equal(wordCount.textContent, '2 words'); + previewButton.dispatchEvent(clickEvent); + + setTimeout(() => { + const previewButton = builder.componentEdit.querySelector('[ref="previewButton"]'); + const preview = builder.componentEdit.querySelector('.component-preview'); + assert.equal(preview, null); + previewButton.dispatchEvent(clickEvent); + + setTimeout(() => { + const preview = builder.componentEdit.querySelector('.component-preview'); + const charCount = preview.querySelector('[ref="charcount"]'); + const wordCount = preview.querySelector('[ref="wordcount"]'); + assert.equal(charCount.textContent, '8 characters'); + assert.equal(wordCount.textContent, '2 words'); + done(); + }, 600); + }, 500); + }, 500); + }); + it('Should correctly count characters if character counter is enabled', (done) => { const form = _.cloneDeep(comp3); form.components[0].showCharCount = true; @@ -570,7 +610,7 @@ describe('TextArea Component', () => { it('Should set array as value for textarea with ace editor with json data type', (done) => { const element = document.createElement('div'); - + Formio.createForm(element, textAreaJsonType).then(form => { const textArea = form.getComponent('textArea'); textArea.setValue([1,2,3]);