feat(ui5-select): selection can be changed with arrows while closed (#254)

Author: fifoosid

packages/main/src/Select.js

@@ -4,8 +4,6 @@ import {
 	isSpace,
 	isUp,
 	isDown,
-	isRight,
-	isLeft,
 	isEnter,
 } from "@ui5/webcomponents-base/src/events/PseudoEvents";
 import ShadowDOM from "@ui5/webcomponents-base/src/compatibility/ShadowDOM";
@@ -183,12 +181,14 @@ class Select extends WebComponent {
 			return;
 		}
 
-		if (isUp(event) || isLeft(event)) {
-			return this.Suggestions.onUp(event);
+		if (isUp(event)) {
+			this.Suggestions.onUp(event);
+			this._changeSelectionWhileClosed();
 		}
 
-		if (isDown(event) || isRight(event)) {
-			return this.Suggestions.onDown(event);
+		if (isDown(event)) {
+			this.Suggestions.onDown(event);
+			this._changeSelectionWhileClosed();
 		}
 
 		if (isSpace(event)) {
@@ -303,6 +303,13 @@ class Select extends WebComponent {
 		}
 	}
 
+	_changeSelectionWhileClosed() {
+		if (this.items.length > 1 && !this._opened) {
+			this._select(this._getPreviewedItem());
+			this._fireChange(this._getSelectedItem());
+		}
+	}
+
 	_setSelectedItem(item) {
 		if (item) {
 			item.selected = true;

packages/main/src/Suggestions.js

@@ -37,20 +37,14 @@ class Suggestions {
 
 	/* Public methods */
 	onUp(event) {
-		if (this.isOpened()) {
-			event.preventDefault();
-			this._handleItemNavigation(false /* forward */);
-			return true;
-		}
+		event.preventDefault();
+		this._handleItemNavigation(false /* forward */);
 		return true;
 	}
 
 	onDown(event) {
-		if (this.isOpened()) {
-			event.preventDefault();
-			this._handleItemNavigation(true /* forward */);
-			return true;
-		}
+		event.preventDefault();
+		this._handleItemNavigation(true /* forward */);
 		return true;
 	}
 
@@ -171,10 +165,6 @@ class Suggestions {
 	}
 
 	_handleItemNavigation(forward) {
-		if (!this.isOpened()) {
-			return;
-		}
-
 		if (!this._getItems().length) {
 			return;
 		}

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

@@ -52,6 +52,21 @@ describe("Select general interaction", () => {
 		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) !== -1, "Select label is correct.");
 	});
 
+	it("changes selection while closed with Arrow Up/Down", () => {
+		const btn = $("#myBtn2");
+		const select = $("#mySelect");
+		const selectText = browser.findElementDeep("#mySelect2 >>> ui5-label");
+		const EXPECTED_SELECTION_TEXT1 = "Compact";
+		const EXPECTED_SELECTION_TEXT2 = "Condensed";
+
+		select.keys("ArrowUp");
+		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT1) > -1, "Arrow Up should change selected item");
+
+		select.keys("ArrowDown");
+		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) > -1, "Arrow Down should change selected item");
+	});
+
+
 	it("opens upon space", () => {
 		const btn = $("#myBtn2");
 		const select = $("#mySelect");