feat(ui5-input): implement showClearIcon property (#4641)

FIXES: #4395

Author: MapTo0

packages/base/hash.txt

@@ -1 +1 @@
-3JW1jr7CDcyzIbBjLPZn3GOqtUc=
+U/+Rgew0cZ7fMsn5kLscb7DWRHA=

packages/main/src/Input.hbs

@@ -43,6 +43,10 @@
 			<ui5-icon class="ui5-input-readonly-icon" name="not-editable"></ui5-icon>
 		{{/if}}
 
+		{{#if effectiveShowClearIcon}}
+			<ui5-icon @click={{_clear}} tabindex="-1" input-icon class="ui5-input-clear-icon" name="decline"></ui5-icon>
+		{{/if}}
+
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">
 				<slot name="icon"></slot>

packages/main/src/Input.js

@@ -330,6 +330,30 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines whether the clear icon of the input will be shown.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.2.0
+		 */
+		showClearIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the clear icon is visible.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @private
+		 * @since 1.2.0
+		 */
+		effectiveShowClearIcon: {
+			type: Boolean,
+		},
+
 		/**
 		 * @private
 		 */
@@ -587,6 +611,7 @@ class Input extends UI5Element {
 			this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
 		}
 
+		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
 		this.open = this.open && (!!this.suggestionItems.length || this._isPhone);
 
 		const FormSupport = getFeature("FormSupport");
@@ -783,6 +808,8 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
+		this._preventNextChange = this.effectiveShowClearIcon && this.shadowRoot.contains(event.relatedTarget);
+
 		// if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
 		if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
@@ -832,12 +859,27 @@ class Input extends UI5Element {
 	}
 
 	_handleChange() {
+		if (this._preventNextChange) {
+			this._preventNextChange = false;
+			return;
+		}
+
 		if (this._changeFiredValue !== this.value) {
 			this._changeFiredValue = this.value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
 
+	_clear() {
+		this.value = "";
+		this.fireEvent(this.EVENT_INPUT);
+		this._handleChange();
+
+		if (!this._isPhone) {
+			this.focus();
+		}
+	}
+
 	_scroll(event) {
 		const detail = event.detail;
 		this.fireEvent("suggestion-scroll", {

packages/main/src/InputPopover.hbs

@@ -24,15 +24,15 @@
 			</div>
 			<div class="row">
 				<div class="input-root-phone">
-					<input
+					<ui5-input
 						class="ui5-input-inner-phone"
 						type="{{inputType}}"
 						.value="{{value}}"
-						inner-input
+						?show-clear-icon={{showClearIcon}}
 						placeholder="{{placeholder}}"
 						@input="{{_handleInput}}"
 						@change="{{_handleChange}}"
-					/>
+					></ui5-input>
 				</div>
 			</div>
 			{{#if hasValueStateMessage}}

packages/main/src/themes/Input.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./InputIcon.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

packages/main/test/pages/Input.html

@@ -363,6 +363,27 @@ <h3>sap_horizon</h3>
 	<br>
 	<br>
 
+	<div>
+		<h3>Inputs with clear icon</h3>
+
+		<ui5-input id="clear-input" show-clear-icon placeholder="Type to show clear icon..."></ui5-input>
+		<br />
+		<br />
+		<span>Change: </span><span id="clear-input-change-event-count">0</span>
+		<br />
+		<span>Input: </span><span id="clear-input-input-event-count">0</span>
+		<br />
+		<br />
+		<span class="sapUiSizeCompact">
+			<ui5-input id="clear-input-compact" show-clear-icon placeholder="Type to show clear icon..." value="test"></ui5-input>
+			<br>
+			<button id="clear-icon-readonly-toggle">Toggle readonly</button>
+			<br>
+
+			<button id="clear-icon-disabled-toggle">Toggle disabled</button>
+		</span>
+	</div>
+
 	<script>
 		document.getElementById("submit-input").addEventListener("keypress", function(event) {
 			if (event.key === 'Enter') {
@@ -518,6 +539,30 @@ <h3>sap_horizon</h3>
 			oXSSItem.text = `Canada<<img src="xss" onerror="document.getElementById('xss-result').innerText = 'XSS FOUND'">`
 			document.getElementById("xss-input").appendChild(oXSSItem);
 		});
+
+		const clearInput = document.getElementById("clear-input");
+
+		clearInput.addEventListener("ui5-change", event => {
+			const span = document.getElementById("clear-input-change-event-count");
+
+			span.innerText = span.innerText ? parseInt(span.innerText) + 1 : 1;
+		});
+
+		clearInput.addEventListener("ui5-input", event => {
+			const span = document.getElementById("clear-input-input-event-count");
+
+			span.innerText = span.innerText ? parseInt(span.innerText) + 1 : 1;
+		});
+
+		const compactClearIconInput = document.getElementById("clear-input-compact");
+
+		document.getElementById("clear-icon-disabled-toggle").addEventListener("click", event => {
+			compactClearIconInput.toggleAttribute("disabled");
+		});
+
+		document.getElementById("clear-icon-readonly-toggle").addEventListener("click", event => {
+			compactClearIconInput.toggleAttribute("readonly");
+		});
 	</script>
 </body>
 </html>

packages/main/test/samples/Input.sample.html

@@ -29,12 +29,12 @@ <h2 class="control-header">Input</h2>
 <section>
 	<h3>Basic Input</h3>
 	<div class="snippet">
-		<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Input"></ui5-input>
+		<ui5-input class="samples-margin samples-responsive-margin-bottom" show-clear-icon value="Input"></ui5-input>
 		<ui5-input class="samples-margin samples-responsive-margin-bottom" readonly value="readonly Input"></ui5-input>
 		<ui5-input class="samples-margin samples-responsive-margin-bottom" disabled value="Disabled Input"></ui5-input>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-input value="Input"></ui5-input>
+<ui5-input show-clear-icon value="Input"></ui5-input>
 <ui5-input readonly value="readonly Input"></ui5-input>
 <ui5-input disabled value="Disabled Input"></ui5-input>
 	</xmp></pre>
@@ -47,6 +47,7 @@ <h3>Input With Suggestions (note: the usage depends on the framework you are usi
 			id="suggestions-input"
 			placeholder="Start typing country name"
 			show-suggestions
+			show-clear-icon
 		></ui5-input>
 
 		<script>
@@ -82,7 +83,7 @@ <h3>Input With Suggestions (note: the usage depends on the framework you are usi
 		</script>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-input id="suggestions-input" show-suggestions placeholder="Start typing country name"></ui5-input>
+<ui5-input id="suggestions-input" show-suggestions show-clear-icon placeholder="Start typing country name"></ui5-input>
 
 <script>
 	// data

packages/main/test/specs/Input.spec.js

@@ -636,6 +636,77 @@ describe("Input general interaction", () => {
 
 		assert.notOk(await popover.getProperty("opened"), "Popover with valueStateMessage should not be opened.");
 	});
+
+	it("Displays clear icon when typing and pressing it clears the value", async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
+		const input = await $("#clear-input");
+		const innerInput = await input.shadow$("input");
+		const changeCounter = await $("#clear-input-change-event-count");
+		const inputCounter = await $("#clear-input-input-event-count");
+
+		assert.notOk(await input.getProperty("effectiveShowClearIcon"), "Clear icon should not be shown");
+
+		// type
+		await innerInput.click();
+		await innerInput.keys("a");
+
+		assert.ok(await input.getProperty("effectiveShowClearIcon"), "Clear icon should be shown");
+		assert.strictEqual(await changeCounter.getText(), "0", "Change event not called yet");
+		assert.strictEqual(await inputCounter.getText(), "1", "Input event called when typing");
+
+		const clearIcon = await input.shadow$(".ui5-input-clear-icon");
+
+		// press clear icon
+		await clearIcon.click();
+
+		assert.strictEqual(await input.getProperty("value"), "", "Clear icon clear the value");
+		assert.notOk(await input.getProperty("effectiveShowClearIcon"), "Clear icon should not be shown");
+		assert.strictEqual(await changeCounter.getText(), "0", "Change event not called yet");
+		assert.strictEqual(await inputCounter.getText(), "2", "Input event called when typing or clear action is done");
+	});
+
+	it("Change event is called when value of input is cleared with clear icon and input is focused out", async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
+		const input = await $("#clear-input");
+		const innerInput = await input.shadow$("input");
+		const changeCounter = await $("#clear-input-change-event-count");
+		const inputCounter = await $("#clear-input-input-event-count");
+
+		// type
+		await innerInput.click();
+		await innerInput.keys("a");
+		await changeCounter.click();
+
+		const clearIcon = await input.shadow$(".ui5-input-clear-icon");
+
+		// press clear icon
+		await clearIcon.click();
+
+		assert.strictEqual(await changeCounter.getText(), "2", "Change event called twice (first - typing, second - clear icon)");
+		assert.strictEqual(await inputCounter.getText(), "2", "Input event called when value is cleared by clear icon");
+	});
+
+	it("Setting readonly or disabled hides clear icon", async () => {
+		await browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
+		const input = await $("#clear-input-compact");
+		const readonly = await $("#clear-icon-readonly-toggle");
+		const disable = await $("#clear-icon-disabled-toggle");
+
+		await readonly.click();
+		assert.notOk(await input.getProperty("effectiveShowClearIcon"), "Clear icon should be not be shown when readonly");
+
+		await readonly.click();
+		assert.ok(await input.getProperty("effectiveShowClearIcon"), "Clear icon should be shown");
+
+		await disable.click();
+		assert.notOk(await input.getProperty("effectiveShowClearIcon"), "Clear icon should be not be shown when disabled");
+
+		await disable.click();
+		assert.ok(await input.getProperty("effectiveShowClearIcon"), "Clear icon should be shown");
+	});
 });
 
 describe("Input arrow navigation", () => {