fix(ui5-select): enable home/end keys (#3372)

Now, Home and End keyboard keys are enabled.

Author: nnaydenow

packages/main/src/Select.js

@@ -6,6 +6,8 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isHome,
+	isEnd,
 	isShow,
 	isTabNext,
 	isTabPrevious,
@@ -443,21 +445,31 @@ class Select extends UI5Element {
 		if (isShow(event)) {
 			event.preventDefault();
 			this._toggleRespPopover();
-		}
-
-		if (isSpace(event)) {
+		} else if (isSpace(event)) {
 			event.preventDefault();
-		}
-
-		if (isEscape(event) && this._isPickerOpen) {
+		} else if (isEscape(event) && this._isPickerOpen) {
 			this._escapePressed = true;
-		}
-
-		if (isEnter(event)) {
+		} else if (isHome(event)) {
+			this._handleHomeKey(event);
+		} else if (isEnd(event)) {
+			this._handleEndKey(event);
+		} else if (isEnter(event)) {
 			this._handleSelectionChange();
+		} else {
+			this._handleArrowNavigation(event);
 		}
+	}
+
+	_handleHomeKey(event) {
+		event.preventDefault();
+		this._changeSelectedItem(this._selectedIndex, 0);
+	}
+
+	_handleEndKey(event) {
+		const lastIndex = this.options.length - 1;
 
-		this._handleArrowNavigation(event, true);
+		event.preventDefault();
+		this._changeSelectedItem(this._selectedIndex, lastIndex);
 	}
 
 	_onkeyup(event) {
@@ -511,7 +523,7 @@ class Select extends UI5Element {
 		this._toggleRespPopover();
 	}
 
-	_handleArrowNavigation(event, shouldFireEvent) {
+	_handleArrowNavigation(event) {
 		let nextIndex = -1;
 		const currentIndex = this._selectedIndex;
 		const isDownKey = isDown(event);
@@ -525,25 +537,29 @@ class Select extends UI5Element {
 				nextIndex = this._getPreviousOptionIndex();
 			}
 
-			this.options[this._selectedIndex].selected = false;
-			this.options[this._selectedIndex]._focused = false;
-
-			this.options[nextIndex].selected = true;
-			this.options[nextIndex]._focused = true;
-
-			this._selectedIndex = nextIndex === -1 ? this._selectedIndex : nextIndex;
+			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
 			if (currentIndex !== this._selectedIndex) {
 				// Announce new item even if picker is opened.
 				// The aria-activedescendents attribute can't be used,
 				// because listitem elements are in different shadow dom
 				this.itemSelectionAnnounce();
 			}
+		}
+	}
 
-			if (shouldFireEvent && !this._isPickerOpen) {
-				// arrow pressed on closed picker - do selection change
-				this._fireChangeEvent(this.options[nextIndex]);
-			}
+	_changeSelectedItem(oldIndex, newIndex) {
+		this.options[oldIndex].selected = false;
+		this.options[oldIndex]._focused = false;
+
+		this.options[newIndex].selected = true;
+		this.options[newIndex]._focused = true;
+
+		this._selectedIndex = newIndex;
+
+		if (!this._isPickerOpen) {
+			// arrow pressed on closed picker - do selection change
+			this._fireChangeEvent(this.options[newIndex]);
 		}
 	}
 
@@ -710,7 +726,7 @@ class Select extends UI5Element {
 	}
 
 	get selectedOptionIcon() {
-		return this.selectedOption.icon;
+		return this.selectedOption && this.selectedOption.icon;
 	}
 
 	async _getPopover() {