feat(ui5-select): Change focus of options on keypress

packages/main/src/Select.js

@@ -316,6 +316,8 @@ class Select extends UI5Element {
 		this._selectedIndexBeforeOpen = -1;
 		this._escapePressed = false;
 		this._lastSelectedOption = null;
+		this._sTypedChars = "";
+		this._iTypingTimeoutID = -1;
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
@@ -458,11 +460,59 @@ class Select extends UI5Element {
 			this._handleEndKey(event);
 		} else if (isEnter(event)) {
 			this._handleSelectionChange();
+		} else if (event.keyCode >= 65 && event.keyCode <= 90) {
+			this._handleKeyboardNavigation(event);
 		} else {
 			this._handleArrowNavigation(event);
 		}
 	}
 
+	_handleKeyboardNavigation(event) {
+		const sTypedCharacter = event.key.toLowerCase();
+
+		this._sTypedChars += sTypedCharacter;
+
+		// We check if we have more than one characters and they are all duplicate, we set the
+		// text to be the last input character (sTypedCharacter). If not, we set the text to be
+		// the whole input string.
+
+		const sText = (/^(.)\1+$/i).test(this._sTypedChars) ? sTypedCharacter : this._sTypedChars;
+
+		clearTimeout(this._iTypingTimeoutID);
+
+		this._iTypingTimeoutID = setTimeout(async () => {
+			this._sTypedChars = "";
+			this._iTypingTimeoutID = -1;
+		}, 1000);
+
+		this._selectTypedItem(sText);
+	}
+
+	_selectTypedItem(sText) {
+		const currentIndex = this._selectedIndex;
+		const oItemToSelect = this._searchNextItemByText(sText);
+
+		if (oItemToSelect) {
+			const nextIndex = this._getSelectedItemIndex(oItemToSelect);
+
+			this._changeSelectedItem(this._selectedIndex, nextIndex);
+
+			if (currentIndex !== this._selectedIndex) {
+				this.itemSelectionAnnounce();
+			}
+		}
+	}
+
+	_searchNextItemByText(sText) {
+		let aOrderedOptions = this.options.slice(0);
+		const aOptionsAfterSelected = aOrderedOptions.splice(this._selectedIndex + 1, aOrderedOptions.length - this._selectedIndex);
+		const aOptionsBeforeSelected = aOrderedOptions.splice(0, aOrderedOptions.length - 1);
+
+		aOrderedOptions = aOptionsAfterSelected.concat(aOptionsBeforeSelected);
+
+		return aOrderedOptions.find(o => o.textContent.toLowerCase().startsWith(sText));
+	}
+
 	_handleHomeKey(event) {
 		event.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, 0);

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

@@ -111,13 +111,13 @@ describe("Select general interaction", () => {
 		select.keys("ArrowDown");
 		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2), "Arrow Down should change selected item");
 		assert.strictEqual(selectionText.getHTML(false), EXPECTED_SELECTION_TEXT2, "Selection announcement text should be equalt to the current selected item's text");
-		
+
 		// change previewed item with picker opened
 		select.click();
 		select.keys("ArrowUp");
 		assert.strictEqual(selectionText.getHTML(false), EXPECTED_SELECTION_TEXT1, "Selection announcement text should be equalt to the current selected item's text");
 		select.keys("Escape");
-		
+
 		// change selection with picker opened
 		select.click();
 		select.keys("ArrowUp");
@@ -205,6 +205,31 @@ describe("Select general interaction", () => {
 		select.keys("Escape");
 	});
 
+	it("changes selection with typing single letter", () => {
+		const select = browser.$("#keyboardHandling");
+		const EXPECTED_SELECTION_TEXT = "Banana";
+
+		select.click(); // Open select
+		select.keys("b");
+
+		const selectText = select.shadow$(".ui5-select-label-root");
+
+		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Typing letter should change selection");
+	});
+
+	it("changes selection with typing more letters", () => {
+		const select = browser.$("#mySelect3");
+		const EXPECTED_SELECTION_TEXT = "Brazil";
+
+		select.click(); // Open select
+		select.keys("b");
+		select.keys("r");
+
+		const selectText = select.shadow$(".ui5-select-label-root");
+
+		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT) > -1, "Typing text should change selection");
+	});
+
 	it("opens upon space", () => {
 		browser.url(`http://localhost:${PORT}/test-resources/pages/Select.html`);