feat(ui5-upload-collection-item): implement keyboard handling (#1702)

Author: fifoosid

packages/fiori/src/UploadCollectionItem.hbs

@@ -14,6 +14,8 @@
 							id="ui5-uci-edit-input"
 							value="{{_fileNameWithoutExtension}}"
 							data-sap-focus-ref
+							@keyup="{{_onInputKeyUp}}"
+							@keydown="{{_onInputKeydown}}"
 							@ui5-change="{{_onInputChange}}"
 						></ui5-input>
 						<span class="ui5-uci-file-extension">{{_fileExtension}}</span>
@@ -46,22 +48,22 @@
 		</div>
 		<div class="ui5-uci-edit-buttons">
 			{{#if _editing}}
-				<ui5-button design="Transparent" class="ui5-uci-edit-rename-btn">{{_renameBtnText}}</ui5-button>
+				<ui5-button design="Transparent" class="ui5-uci-edit-rename-btn" @click="{{_onRename}}">{{_renameBtnText}}</ui5-button>
 				<ui5-button design="Transparent" id="ui5-uci-edit-cancel" @click="{{_onRenameCancel}}">{{_cancelRenameBtnText}}</ui5-button>
 			{{else}}
 				{{#if _showRetry}}
 					<ui5-button
 						icon="refresh"
 						design="Transparent"
-						title="{{_retryButtonTooltip}}" 
+						title="{{_retryButtonTooltip}}"
 						@click="{{_onRetry}}"
 					></ui5-button>
 				{{/if}}
 				{{#if _showTerminate}}
 					<ui5-button
 						icon="stop"
 						design="Transparent"
-						title="{{_terminateButtonTooltip}}" 
+						title="{{_terminateButtonTooltip}}"
 						@click="{{_onTerminate}}">
 					</ui5-button>
 				{{/if}}

packages/fiori/src/UploadCollectionItem.js

@@ -8,6 +8,7 @@ import ListItem from "@ui5/webcomponents/dist/ListItem.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js";
 import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
+import { isEnter, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import UploadState from "./types/UploadState.js";
 import "@ui5/webcomponents-icons/dist/icons/refresh.js";
 import "@ui5/webcomponents-icons/dist/icons/stop.js";
@@ -206,6 +207,13 @@ const metadata = {
 		 * @public
 		 */
 		retry: {},
+
+		/**
+		 * @since 1.0.0-rc.8
+		 * @event
+		 * @private
+		 */
+		"_focus-requested": {},
 	},
 };
 
@@ -255,9 +263,10 @@ class UploadCollectionItem extends ListItem {
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 
 		this._editPressed = false; // indicates if the edit btn has been pressed
+		this.doNotCloseInput = false; // Indicates whether the input should be closed when using keybord for navigation
+		this.isEnter = false;
 	}
 
-
 	onAfterRendering() {
 		if (this._editPressed) {
 			this._editing = true;
@@ -300,6 +309,21 @@ class UploadCollectionItem extends ListItem {
 		}
 	}
 
+	_onInputKeydown(event) {
+		this.isEnter = isEnter(event);
+		this.isEscape = isEscape(event);
+	}
+
+	_onInputKeyUp(event) {
+		this.doNotCloseInput = true;
+		this.tempValue = event.target.value + this._fileExtension;
+
+		if (this.isEscape) {
+			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
+			return this._onRenameCancel();
+		}
+	}
+
 	isDetailPressed(event) {
 		const path = event.path || (event.composedPath && event.composedPath());
 
@@ -313,13 +337,40 @@ class UploadCollectionItem extends ListItem {
 			return;
 		}
 
+		if ((!this.isEnter && this.doNotCloseInput) || this.isEscape) {
+			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
+			this.isEscape = false;
+			return;
+		}
+
 		this._editing = false;
 		this.fileName = event.target.value + this._fileExtension;
 		this.fireEvent("rename");
+
+		if (this.isEnter) {
+			this._focus();
+		}
+	}
+
+	_onRename(event) {
+		this.doNotCloseInput = false;
+		this._editing = false;
+		this._focus();
 	}
 
 	_onRenameCancel(event) {
+		if (!this.isEscape) {
+			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
+		}
+
 		this._editing = false;
+		this.doNotCloseInput = false;
+
+		this._focus();
+	}
+
+	_focus() {
+		this.fireEvent("_focus-requested");
 	}
 
 	_onFileNameClick(event) {
@@ -334,6 +385,10 @@ class UploadCollectionItem extends ListItem {
 		this.fireEvent("terminate");
 	}
 
+	get list() {
+		return this.assignedSlot.parentElement;
+	}
+
 	/**
 	 * @override
 	 */

packages/fiori/test/pages/UploadCollection.html

@@ -105,6 +105,14 @@
 		>
 			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
 		</ui5-upload-collection-item>
+		<ui5-upload-collection-item
+			id="keyboardNavigation"
+			file-name="Graph.docx"
+			type="Detail"
+			upload-state="Complete"
+		>
+			<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
+		</ui5-upload-collection-item>
 	</ui5-upload-collection>
 
 	<ui5-upload-collection id="uploadCollectionDnD">

packages/fiori/test/specs/UploadCollection.spec.js

@@ -72,7 +72,7 @@ describe("UploadCollection", () => {
 			const deleteBtn = firstItem.shadow$(".ui5-li-deletebtn");
 			deleteBtn.click();
 
-			assert.strictEqual(uploadCollection.getProperty("items").length, 3, "item should be deleted when 'fileDeleted' event is fired");
+			assert.strictEqual(uploadCollection.getProperty("items").length, 4, "item should be deleted when 'fileDeleted' event is fired");
 		});
 
 		it("item should fire 'retry'", () => {
@@ -133,6 +133,22 @@ describe("UploadCollection", () => {
 			assert.notOk(secondItem.shadow$(".ui5-uci-file-extension").getText(), "no extension is calculated for .gitignore.");
 
 		});
+
+		it("tests cancelling of name change via keyboard", () => {
+			const secondItem = browser.$("#keyboardNavigation");
+			const editButton = secondItem.shadow$(".ui5-li-detailbtn");
+
+			editButton.click();
+
+			browser.keys("new name");
+
+			browser.keys("Tab");
+			browser.keys("Tab");
+
+			browser.keys("Enter"); // Press cancel button
+
+			assert.strictEqual(secondItem.shadow$(".ui5-uci-file-name").getText(), "Graph.docx", "The name of the file is not changed");
+		});
 	});
 
 	describe("Drag and Drop", () => {

packages/main/src/List.js

@@ -344,6 +344,7 @@ class List extends UI5Element {
 		this.addEventListener("ui5-_forward-after", this.onForwardAfter.bind(this));
 		this.addEventListener("ui5-_forward-before", this.onForwardBefore.bind(this));
 		this.addEventListener("ui5-_selection-requested", this.onSelectionRequested.bind(this));
+		this.addEventListener("ui5-_focus-requested", this.focusUploadCollectionItem.bind(this));
 	}
 
 	get shouldRenderH1() {
@@ -642,6 +643,14 @@ class List extends UI5Element {
 		item.focus();
 	}
 
+
+	focusUploadCollectionItem(event) {
+		setTimeout(() => {
+			this.setPreviouslyFocusedItem(event.target);
+			this.focusPreviouslyFocusedItem();
+		}, 0);
+	}
+
 	setForwardingFocus(forwardingFocus) {
 		this._forwardingFocus = forwardingFocus;
 	}