fix(ui5-upload-collection-item): fixed keyboard navigation (#3327)

Author: TeodorTaushanov

packages/fiori/src/UploadCollectionItem.hbs

@@ -12,11 +12,9 @@
 					<div class="ui5-uci-edit-container">
 						<ui5-input
 							id="ui5-uci-edit-input"
-							value="{{_fileNameWithoutExtension}}"
 							data-sap-focus-ref
-							@keyup="{{_onInputKeyUp}}"
-							@keydown="{{_onInputKeydown}}"
-							@ui5-change="{{_onInputChange}}"
+							@focusin="{{_onInputFocusin}}"
+							@keydown="{{_onInputKeyDown}}"
 						></ui5-input>
 						<span class="ui5-uci-file-extension">{{_fileExtension}}</span>
 					</div>
@@ -50,23 +48,33 @@
 		</div>
 		<div class="ui5-uci-edit-buttons">
 			{{#if _editing}}
-				<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>
+				<ui5-button
+						design="Transparent"
+						class="ui5-uci-edit-rename-btn"
+						@click="{{_onRename}}"
+						@keyup="{{_onRenameKeyup}}">{{_renameBtnText}}</ui5-button>
+				<ui5-button
+						design="Transparent"
+						id="ui5-uci-edit-cancel"
+						@click="{{_onRenameCancel}}"
+						@keyup="{{_onRenameCancelKeyup}}">{{_cancelRenameBtnText}}</ui5-button>
 			{{else}}
 				{{#if _showRetry}}
 					<ui5-button
 						icon="refresh"
 						design="Transparent"
 						title="{{_retryButtonTooltip}}"
 						@click="{{_onRetry}}"
+						@keyup="{{_onRetryKeyup}}"
 					></ui5-button>
 				{{/if}}
 				{{#if _showTerminate}}
 					<ui5-button
 						icon="stop"
 						design="Transparent"
 						title="{{_terminateButtonTooltip}}"
-						@click="{{_onTerminate}}">
+						@click="{{_onTerminate}}"
+						@keyup="{{_onTerminateKeyup}}">
 					</ui5-button>
 				{{/if}}
 

packages/fiori/src/UploadCollectionItem.js

@@ -269,37 +269,32 @@ class UploadCollectionItem extends ListItem {
 	constructor() {
 		super();
 		this.i18nFioriBundle = 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;
-			this._editPressed = false;
-			this.focusAndSelectText();
-		}
 	}
 
-	async focusAndSelectText() {
-		await this.focus();
+	async _initInputField() {
+		await renderFinished();
 
 		const inp = this.shadowRoot.getElementById("ui5-uci-edit-input");
+		inp.value = this._fileNameWithoutExtension;
 
 		await renderFinished();
-		if (inp.getFocusDomRef()) {
-			inp.getFocusDomRef().setSelectionRange(0, this._fileNameWithoutExtension.length);
+
+		const inpFocusDomRef = inp.getFocusDomRef();
+
+		if (inpFocusDomRef) {
+			inpFocusDomRef.focus();
+			inpFocusDomRef.setSelectionRange(0, this._fileNameWithoutExtension.length);
 		}
 	}
 
 	/**
 	 * @override
 	 */
-	onDetailClick(event) {
+	async onDetailClick(event) {
 		super.onDetailClick(event);
 		this._editing = true;
+
+		await this._initInputField();
 	}
 
 	_onDetailKeyup(event) {
@@ -308,79 +303,51 @@ class UploadCollectionItem extends ListItem {
 		}
 	}
 
-	/**
-	 * @override
-	 */
-	_onfocusout(event) {
-		super._onfocusout(event);
-
-		const path = event.path || (event.composedPath && event.composedPath());
-
-		this._editPressed = this.isDetailPressed(event);
-
-		if (!this._editPressed && path.indexOf(this) > -1) {
-			this._editing = false;
-		}
-	}
-
-	_onInputKeydown(event) {
-		this.isEnter = isEnter(event);
-		this.isEscape = isEscape(event);
+	_onInputFocusin(event) {
+		// prevent focusing the whole upload collection item.
+		event.stopPropagation();
 	}
 
-	_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();
+	_onInputKeyDown(event) {
+		if (isEscape(event)) {
+			this._onRenameCancel(event);
+		} else if (isEnter(event)) {
+			this._onRename();
+		} else if (isSpace(event)) {
+			event.stopImmediatePropagation();
 		}
 	}
 
-	isDetailPressed(event) {
-		const path = event.path || (event.composedPath && event.composedPath());
+	_onRename(event) {
+		const inp = this.shadowRoot.getElementById("ui5-uci-edit-input");
+		this.fileName = inp.value + this._fileExtension;
+		this.fireEvent("rename");
 
-		return path.some(e => {
-			return e.classList && e.classList.contains("ui5-uci-edit");
-		});
+		this._editing = false;
+		this._focus();
 	}
 
-	_onInputChange(event) {
-		if (this.shadowRoot.getElementById("ui5-uci-edit-cancel").active) {
-			return;
-		}
-
-		if ((!this.isEnter && this.doNotCloseInput) || this.isEscape) {
-			[this.fileName, this.tempValue] = [this.tempValue, this.fileName];
-			this.isEscape = false;
-			return;
+	_onRenameKeyup(event) {
+		if (isSpace(event)) {
+			this._onRename(event);
 		}
+	}
 
+	async _onRenameCancel(event) {
 		this._editing = false;
-		this.fileName = event.target.value + this._fileExtension;
-		this.fireEvent("rename");
 
-		if (this.isEnter) {
+		if (isEscape(event)) {
+			await renderFinished();
+			this.shadowRoot.getElementById(`${this._id}-editing-button`).focus();
+		} else {
 			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];
+	_onRenameCancelKeyup(event) {
+		if (isSpace(event)) {
+			this._onRenameCancel(event);
 		}
-
-		this._editing = false;
-		this.doNotCloseInput = false;
-
-		this._focus();
 	}
 
 	_focus() {
@@ -395,10 +362,26 @@ class UploadCollectionItem extends ListItem {
 		this.fireEvent("retry");
 	}
 
+	_onRetryKeyup(event) {
+		if (isSpace(event)) {
+			this._onRetry(event);
+		}
+	}
+
 	_onTerminate(event) {
 		this.fireEvent("terminate");
 	}
 
+	_onTerminateKeyup(event) {
+		if (isSpace(event)) {
+			this._onTerminate(event);
+		}
+	}
+
+	getFocusDomRef() {
+		return this.getDomRef();
+	}
+
 	get list() {
 		return this.assignedSlot.parentElement;
 	}

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

@@ -26,8 +26,10 @@ describe("UploadCollection", () => {
 			assert.ok(secondItem.shadow$(".ui5-uci-edit-buttons").isDisplayed(), "edit buttons should be rendered");
 			assert.notOk(secondItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden");
 
-			// focus out the second item, to hide edit buttons (reset state for the following tests)
-			browser.$("#firstItem").click();
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("secondItem").removeAttribute("_editing");
+			});
 		});
 
 		it("should show NOT show any buttons besides 'Terminate', when uploadState is 'Uploading'", () => {
@@ -48,6 +50,11 @@ describe("UploadCollection", () => {
 
 			assert.notOk(errorStateItem.shadow$("ui5-button[icon=refresh]").isDisplayed(), "'Retry' button is NOT displayed when editing");
 			assert.notOk(errorStateItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button is NOT displayed when editing");
+
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("errorState").removeAttribute("_editing");
+			});
 		});
 	});
 
@@ -61,7 +68,12 @@ describe("UploadCollection", () => {
 			browser.keys("fileNameSuffix");
 			browser.keys("Enter");
 
-			assert.strictEqual(parseInt(browser.$("#renamedFileIndex").getText()), secondItemIndex, "renamed file index should be updated after rename")
+			assert.strictEqual(parseInt(browser.$("#renamedFileIndex").getText()), secondItemIndex, "renamed file index should be updated after rename");
+
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("secondItem").removeAttribute("_editing");
+			});
 		});
 
 		it("upload collection should fire 'item-delete'", () => {
@@ -105,6 +117,11 @@ describe("UploadCollection", () => {
 			browser.keys("Enter");
 
 			assert.strictEqual(latestReportsPdf.getProperty("fileName"), "last.reports-edited.pdf", "file extension '.pdf' should be preserved");
+
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("latestReportsPdf").removeAttribute("_editing");
+			});
 		});
 
 		it("should be able to add extension, if there isn't such", () => {
@@ -125,6 +142,11 @@ describe("UploadCollection", () => {
 			browser.keys("Enter");
 
 			assert.strictEqual(noFileExtensionItem.getProperty("fileName"), newFileName2 + ".newExtension", "the string after the last dot is considered as extension");
+
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("noFileExtension").removeAttribute("_editing");
+			});
 		});
 
 		it("should NOT consider hidden file name as extension", () => {
@@ -135,6 +157,10 @@ describe("UploadCollection", () => {
 
 			assert.notOk(secondItem.shadow$(".ui5-uci-file-extension").getText(), "no extension is calculated for .gitignore.");
 
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("secondItem").removeAttribute("_editing");
+			});
 		});
 
 		it("tests cancelling of name change via keyboard", () => {
@@ -151,6 +177,11 @@ describe("UploadCollection", () => {
 			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");
+
+			// reset the item
+			browser.execute(() => {
+				document.getElementById("keyboardNavigation").removeAttribute("_editing");
+			});
 		});
 	});