resolve #7679 Character Counter Overlaps the Supplied Text (#7689)

Co-authored-by: OlgaLarina <[email protected]>

src/defaultCss/defaultV2Css.ts

@@ -323,6 +323,7 @@ export var defaultV2Css = {
     small: "sd-row__question--small",
     controlDisabled: "sd-input--disabled",
     constrolWithCharacterCounter: "sd-text__character-counter",
+    characterCounterBig: "sd-text__character-counter--big",
     content: "sd-text__content sd-question__content",
     remainingCharacterCounter: "sd-remaining-character-counter",
     onError: "sd-input--error"

src/defaultV2-theme/blocks/sd-input.scss

@@ -81,6 +81,10 @@ textarea {
   padding-inline-end: calcSize(8);
 }
 
+.sd-text__character-counter.sd-text__character-counter--big:focus-within {
+  padding-inline-end: calcSize(11);
+}
+
 .sd-remaining-character-counter {
   display: none;
   flex-direction: row;

src/question_text.ts

@@ -400,8 +400,10 @@ export class QuestionTextModel extends QuestionTextBase {
     return !this.isReadOnly && this.inputType !== "range";
   }
   protected getControlCssClassBuilder(): CssClassBuilder {
+    const maxLength = this.getMaxLength();
     return super.getControlCssClassBuilder()
-      .append(this.cssClasses.constrolWithCharacterCounter, !!this.getMaxLength());
+      .append(this.cssClasses.constrolWithCharacterCounter, !!maxLength)
+      .append(this.cssClasses.characterCounterBig, maxLength > 99);
   }
   public isReadOnlyRenderDiv(): boolean {
     return this.isReadOnly && settings.readOnly.textRenderMode === "div";

tests/question_texttests.ts

@@ -3,6 +3,7 @@ import { QuestionCommentModel } from "../src/question_comment";
 import { SurveyModel } from "../src/survey";
 import { QuestionTextBase, CharacterCounter } from "../src/question_textbase";
 import { settings } from "../src/settings";
+import { StylesManager } from "../src/stylesmanager";
 
 QUnit.test("check dropdown disabled class", function(assert) {
   var json = {
@@ -349,6 +350,23 @@ QUnit.test("CharacterCounter + settings.showMaxLengthIndicator", function(assert
   ch.updateRemainingCharacterCounter("abcd", 7);
   assert.equal(ch.remainingCharacterCounter, "4/7", "#4");
 });
+QUnit.test("getControlClass with characterCounter", function(assert) {
+  StylesManager.applyTheme("defaultV2");
+  const inputClasses = "sd-input sd-text";
+  const constrolWithCharacterCounter = "sd-text__character-counter";
+  const characterCounterBig = "sd-text__character-counter--big";
+
+  const survey = new SurveyModel({ elements: [{ type: "text", name: "q1" }] });
+  const q = survey.getQuestionByName("q1");
+  assert.equal(q.getControlClass(), inputClasses, "#1");
+
+  q.maxLength = 99;
+  assert.equal(q.getControlClass(), inputClasses + " " + constrolWithCharacterCounter, "#2");
+
+  q.maxLength = 100;
+  assert.equal(q.getControlClass(), inputClasses + " " + constrolWithCharacterCounter + " " + characterCounterBig, "#3");
+  StylesManager.applyTheme("default");
+});
 
 QUnit.test("Set empty text", function(assert) {
   const survey = new SurveyModel({

visualRegressionTests/tests/defaultV2/question.ts

@@ -687,7 +687,7 @@ frameworks.forEach(framework => {
 
   test("Remaining character counter - mobile view", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(350, 500);
+      await t.resizeWindow(350, 900);
       await initSurvey(framework, {
         focusFirstQuestionAutomatic: true,
         questions: [
@@ -696,6 +696,11 @@ frameworks.forEach(framework => {
             type: "text",
             maxLength: 25,
             defaultValue: "Tewwwwwwwwwwwwwwwwwwwwst"
+          }, {
+            name: "text",
+            type: "text",
+            maxLength: 100,
+            defaultValue: "Tewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwst"
           }, {
             "type": "multipletext",
             "name": "question1",
@@ -718,6 +723,10 @@ frameworks.forEach(framework => {
 
       await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-with-focus.png", Selector(".sd-text__content"), t, comparer);
       await takeElementScreenshot("question-multipletext-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-multipletext__content"), t, comparer);
+      await takeElementScreenshot("question-text-remaining-character-counter-maxLength-100-without-focus.png", Selector(".sd-text__content").nth(1), t, comparer);
+
+      await t.pressKey("tab");
+      await takeElementScreenshot("question-text-remaining-character-counter-maxLength-100-with-focus.png", Selector(".sd-text__content").nth(1), t, comparer);
 
       await t.pressKey("tab");
       await takeElementScreenshot("question-text-remaining-character-counter-mobile-view-without-focus.png", Selector(".sd-text__content"), t, comparer);