fix(ui5-textarea): select exceeded text (#7741)

* fix(ui5-textarea): select exceeded text * fix(ui5-textarea): adjust test * fix(ui5-textarea): adjust text description
SAP · Oct 30, 2023 · 5a510cf · 5a510cf
1 parent 3df7d03
commit 5a510cf
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -474,6 +474,12 @@ class TextArea extends UI5Element implements IFormElement {
 		}
 
 		this.value = nativeTextArea.value;
+		const valueLength = this.value.length;
+
+		if (e.inputType === "insertFromPaste" && this.maxlength && valueLength > this.maxlength) {
+			nativeTextArea.setSelectionRange(this.maxlength, valueLength);
+		}
+
 		this.fireEvent("input", {});
 
 		// Angular two way data binding

diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
@@ -123,7 +123,7 @@
 
 	<section class="group">
 		<ui5-title>Text Area: max length 20 characters </ui5-title>
-		<ui5-textarea class="fixed-width" maxlength="20" show-exceeded-text growing growing-max-lines="1" rows="1" placeholder="Everything"></ui5-textarea>
+		<ui5-textarea id="ta-exceeded-text" value="Text longer then twenty characters" class="fixed-width" maxlength="20" show-exceeded-text growing growing-max-lines="1" rows="1" placeholder="Everything"></ui5-textarea>
 	</section>
 
 	<section class="group">

diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
@@ -1,5 +1,8 @@
 import { assert } from "chai";
 
+const isMacOS = process.platform === 'darwin';
+const keyCtrlToPress = isMacOS ? 'Command' : 'Control';
+
 describe("Attributes propagation", () => {
 	before(async () => {
 		await browser.url(`test/pages/TextArea.html`);
@@ -349,4 +352,25 @@ describe("Value update", () => {
 		assert.strictEqual(ariaHiddenText.includes("Value State Error"), true, "Hidden screen reader text is correct");
 		assert.strictEqual(valueStateText.includes("Extra long text"), true, "Displayed value state message text is correct");
 	});
+
+	it("Should select all exceeded characters on paste", async () => {
+		const textarea = await browser.$("#ta-exceeded-text");
+		const textareaInner = await browser.$("#ta-exceeded-text").shadow$("textarea");
+
+		// act
+		await textareaInner.click();
+		await browser.keys([keyCtrlToPress, "a"]);
+		await browser.keys([keyCtrlToPress, "x"]);
+		await browser.keys([keyCtrlToPress, "v"]);
+
+		const selectionLength = await browser.execute(() =>{
+			const textarea = document.getElementById("ta-exceeded-text").shadowRoot.querySelector("textarea");
+			return textarea.selectionEnd - textarea.selectionStart;
+		});
+
+		const counter = await browser.$("#ta-exceeded-text").shadow$(".ui5-textarea-exceeded-text");
+		const count = parseInt(await counter.getText());
+
+		assert.strictEqual(count, selectionLength, "14 symbols should exceed");
+	});
 });