From ed678963a44c94662d2babdf21e011ba0f2bfc7a Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Thu, 10 Apr 2025 17:42:28 +0300 Subject: [PATCH 1/3] fix(ui5-textarea): remove symbols encoding when growing FIXES: #9868 --- packages/main/cypress/specs/TextArea.cy.tsx | 23 +++++++++++++++++++++ packages/main/src/TextArea.ts | 2 +- packages/main/src/themes/TextArea.css | 3 +-- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/TextArea.cy.tsx b/packages/main/cypress/specs/TextArea.cy.tsx index bc64d6ad268f..ecb931be9ddb 100644 --- a/packages/main/cypress/specs/TextArea.cy.tsx +++ b/packages/main/cypress/specs/TextArea.cy.tsx @@ -397,8 +397,31 @@ describe("TextArea general interaction", () => { .should("be.equal", initialTextareaSize); }); }); + + it("should grow correctly when typing symbols (&)", () => { + cy.mount(); + + cy.get("[ui5-textarea]") + .as("textarea"); + + cy.get("@textarea") + .realClick(); + + cy.get("@textarea") + .then(textarea => { + const initialTextareaSize = textarea.height(); + + cy.focused() + .realType("&"); + + cy.get("@textarea") + .invoke("height") + .should("be.equal", initialTextareaSize); + }); + }); }); + describe("When having max length set", () => { it("prevents input when max is reached", () => { cy.mount(); diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 22a8e552beaa..e4a4e44f49df 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -492,7 +492,7 @@ class TextArea extends UI5Element implements IFormInputElement { } _tokenizeText(value: string) { - const tokenizedText = value.replace(/&/gm, "&").replace(/"/gm, """).replace(/'/gm, "'").replace(//gm, ">") .split("\n"); diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index 74491d68efa5..b2a946b0cfa8 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -154,8 +154,7 @@ max-height: 94vh; min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); word-break: break-all; - padding-top: var(--_ui5_textarea_padding_top); - padding-bottom: var(--_ui5_textarea_padding_bottom); + padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom); font-size: var(--sapFontSize); font-family: "72override", var(--sapFontFamily); white-space: pre-wrap; From 9590522b53dbd8e15479a5f61144b68a5aac37d8 Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Mon, 5 May 2025 16:10:40 +0300 Subject: [PATCH 2/3] fix: adjust mirror's word-break --- packages/main/src/themes/TextArea.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index b2a946b0cfa8..d875781d3e8e 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -140,10 +140,9 @@ :host([growing]) .ui5-textarea-inner { box-sizing: border-box; - height: 100%; + height: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding))); + width: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding))); position: absolute; - top: 0; - left: 0; } .ui5-textarea-mirror { @@ -153,7 +152,6 @@ width: 100%; max-height: 94vh; min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); - word-break: break-all; padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom); font-size: var(--sapFontSize); font-family: "72override", var(--sapFontFamily); From dc817bb44c859a9050cdaee197d3221be931ea26 Mon Sep 17 00:00:00 2001 From: "Martin R. Hristov" Date: Fri, 9 May 2025 15:01:12 +0300 Subject: [PATCH 3/3] fix: review feedback --- packages/main/src/TextArea.ts | 4 ---- packages/main/src/themes/TextArea.css | 8 +++++++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index e4a4e44f49df..614ff77f2eef 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -496,10 +496,6 @@ class TextArea extends UI5Element implements IFormInputElement { .replace(/>/gm, ">") .split("\n"); - if (tokenizedText.length < this.rows) { - return this._mapTokenizedTextToObject([...tokenizedText, ...Array(this.rows - tokenizedText.length).fill("")] as TokenizedText); - } - return this._mapTokenizedTextToObject(tokenizedText); } diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index d875781d3e8e..3dcda765992b 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -142,15 +142,21 @@ box-sizing: border-box; height: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding))); width: calc(100% - (2 * var(--_ui5_textarea_wrapper_padding))); - position: absolute; + position: absolute; +} + +:host([growing]:not([growing-max-rows])) .ui5-textarea-inner { + overflow: hidden; } + .ui5-textarea-mirror { box-sizing: border-box; line-height: var(--_ui5_textarea_line_height); visibility: hidden; width: 100%; max-height: 94vh; + word-break: break-word; min-height: calc((var(--_textarea_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); padding: var(--_ui5_textarea_padding_top) var(--_ui5_textarea_padding_right_and_left) var(--_ui5_textarea_padding_bottom); font-size: var(--sapFontSize);