feat(ui5-select): select opens with space (#245)

Author: fifoosid

packages/main/src/Select.js

@@ -158,6 +158,7 @@ class Select extends WebComponent {
 	constructor() {
 		super();
 
+		this._closing = false; // Flag for handling open/close on space
 		this._setSelectedItem(null);
 		this._setPreviewedItem(null);
 		this.Suggestions = new Suggestions(this, "items", true /* move focus with arrow keys */);
@@ -191,6 +192,11 @@ class Select extends WebComponent {
 		}
 
 		if (isSpace(event)) {
+			if (!this._isOpened()) {
+				this._closing = true;
+				return event.preventDefault();
+			}
+			this._closing = false;
 			return this.Suggestions.onSpace(event);
 		}
 
@@ -206,6 +212,12 @@ class Select extends WebComponent {
 		}
 	}
 
+	onkeyup(event) {
+		if (isSpace(event)) {
+			return this.Suggestions.toggle(this._closing); // Open Suggestions
+		}
+	}
+
 	onfocusin(event) {
 		this._focused = true; // invalidating property
 	}

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

@@ -52,6 +52,18 @@ describe("Select general interaction", () => {
 		assert.ok(selectText.getHTML(false).indexOf(EXPECTED_SELECTION_TEXT2) !== -1, "Select label is correct.");
 	});
 
+	it("opens upon space", () => {
+		const btn = $("#myBtn2");
+		const select = $("#mySelect");
+		const popover = browser.findElementDeep("#mySelect >>> ui5-popover >>> .sapMPopover");
+
+		btn.click();
+		btn.keys("Tab");
+
+		browser.keys("Space");
+		assert.ok(popover.isDisplayedInViewport(), "Select is opened.");
+	});
+
 	it("toggles upon F4", () => {
 		const btn = $("#myBtn2");
 		const select = $("#mySelect");