fix(ui5-textarea): escape interaction can now be prevented (#12122)

Author: ivoplashkov

packages/main/cypress/specs/TextArea.cy.tsx

@@ -533,6 +533,44 @@ describe("TextArea general interaction", () => {
 				.should("have.value", "");
 		});
 
+		it("Should allow preventing escape behavior by preventing the input event", () => {
+			cy.mount(<TextArea value="initial value"></TextArea>);
+
+			cy.get("[ui5-textarea]")
+				.as("textarea");
+
+			cy.get("@textarea")
+				.then(textarea => {
+					textarea.get(0).addEventListener("ui5-input", (event: CustomEvent) => {
+						if (event.detail && event.detail.escapePressed) {
+							event.preventDefault();
+						}
+					});
+				});
+
+			cy.get("@textarea")
+				.realClick();
+
+			cy.get("@textarea")
+				.should("be.focused");
+
+			cy.get("@textarea")
+				.realType(" modified");
+
+			cy.get("@textarea")
+				.shadow()
+				.find("textarea")
+				.should("have.value", "initial value modified");
+
+			cy.get("@textarea")
+				.realPress("Escape");
+
+			cy.get("@textarea")
+				.shadow()
+				.find("textarea")
+				.should("have.value", "initial value modified");
+		});
+
 		it("Value state type should be added to the screen readers default value states announcement", () => {
 			// Negative
 			cy.mount(<TextArea valueState="Negative"></TextArea>);

packages/main/src/TextArea.ts

@@ -48,6 +48,10 @@ type ExceededText = {
 	calcedMaxLength?: number;
 };
 
+type TextAreaInputEventDetail = {
+	escapePressed?: boolean;
+};
+
 /**
  * @class
  *
@@ -97,10 +101,12 @@ type ExceededText = {
  * Fired when the value of the component changes at each keystroke or when
  * something is pasted.
  * @since 1.0.0-rc.5
+ * @param {boolean} escapePressed Indicates whether the Escape key was pressed, which triggers a revert to the previous value
  * @public
  */
 @event("input", {
 	bubbles: true,
+	cancelable: true,
 })
 
 /**
@@ -126,7 +132,7 @@ type ExceededText = {
 class TextArea extends UI5Element implements IFormInputElement {
 	eventDetails!: {
 		"change": void;
-		"input": void;
+		"input": TextAreaInputEventDetail;
 		"select": void;
 		"scroll": void;
 		"value-changed": void;
@@ -393,9 +399,14 @@ class TextArea extends UI5Element implements IFormInputElement {
 		if (isEscape(e)) {
 			const nativeTextArea = this.getInputDomRef();
 
-			this.value = this.previousValue;
-			nativeTextArea.value = this.value;
-			this.fireDecoratorEvent("input");
+			const prevented = !this.fireDecoratorEvent("input", {
+				escapePressed: true,
+			});
+
+			if (!prevented) {
+				this.value = this.previousValue;
+				nativeTextArea.value = this.value;
+			}
 		}
 	}
 
@@ -641,3 +652,4 @@ class TextArea extends UI5Element implements IFormInputElement {
 TextArea.define();
 
 export default TextArea;
+export type { TextAreaInputEventDetail };

packages/main/test/pages/TextArea.html

@@ -210,6 +210,11 @@
 		<ui5-textarea id="taWithLabelID2" class="textarea-width" placeholder="Enter some text here" accessible-name="Here aria label should be this one"></ui5-textarea>
 	</section>
 
+	<section class="group">
+		<ui5-label>Text Area: Escape Prevention</ui5-title>
+		<ui5-textarea id="textarea-prevent-escape" class="textarea-width" placeholder="Escape prevention test"></ui5-textarea>
+	</section>
+
 	<script>
 		var changeCounter = 0;
 		var inputCounter = 0;
@@ -223,6 +228,12 @@
 			inputCounter += 1;
 			document.getElementById('inputResult').value = `${inputCounter}`;
 		});
+
+		document.getElementById('textarea-prevent-escape').addEventListener("ui5-input", function (event) {
+			if (event.detail.escapePressed) {
+				event.preventDefault();
+			}
+		});
 	</script>
 
 </body>