SelectBox add PageUp, PageDown, Home, End Nav. Fixes #40599 (#40882)

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -478,6 +478,10 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Escape).on(e => this.onEscape(e), this, this.toDispose);
 		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.UpArrow).on(this.onUpArrow, this, this.toDispose);
 		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.DownArrow).on(this.onDownArrow, this, this.toDispose);
+		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageDown).on(this.onPageDown, this, this.toDispose);
+		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.PageUp).on(this.onPageUp, this, this.toDispose);
+		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.Home).on(this.onHome, this, this.toDispose);
+		onSelectDropDownKeyDown.filter(e => e.keyCode === KeyCode.End).on(this.onEnd, this, this.toDispose);
 		onSelectDropDownKeyDown.filter(e => (e.keyCode >= KeyCode.KEY_0 && e.keyCode <= KeyCode.KEY_Z) || (e.keyCode >= KeyCode.US_SEMICOLON && e.keyCode <= KeyCode.NUMPAD_DIVIDE)).on(this.onCharacter, this, this.toDispose);
 
 		// SetUp list mouse controller - control navigation, disabled items, focus
@@ -585,6 +589,74 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 		}
 	}
 
+	private onPageUp(e: StandardKeyboardEvent): void {
+		dom.EventHelper.stop(e);
+
+		this.selectList.focusPreviousPage();
+
+		// Allow scrolling to settle
+		setTimeout(() => {
+			this.selected = this.selectList.getFocus()[0];
+
+			// Shift selection down if we land on a disabled option
+			if (this.selected === this.disabledOptionIndex && this.selected < this.options.length - 1) {
+				this.selected++;
+				this.selectList.setFocus([this.selected]);
+			}
+			this.selectList.reveal(this.selected);
+			this.select(this.selected);
+		}, 1);
+	}
+
+	private onPageDown(e: StandardKeyboardEvent): void {
+		dom.EventHelper.stop(e);
+
+		this.selectList.focusNextPage();
+
+		// Allow scrolling to settle
+		setTimeout(() => {
+			this.selected = this.selectList.getFocus()[0];
+
+			// Shift selection up if we land on a disabled option
+			if (this.selected === this.disabledOptionIndex && this.selected > 0) {
+				this.selected--;
+				this.selectList.setFocus([this.selected]);
+			}
+			this.selectList.reveal(this.selected);
+			this.select(this.selected);
+		}, 1);
+	}
+
+	private onHome(e: StandardKeyboardEvent): void {
+		dom.EventHelper.stop(e);
+
+		if (this.options.length < 2) {
+			return;
+		}
+		this.selected = 0;
+		if (this.selected === this.disabledOptionIndex && this.selected > 1) {
+			this.selected++;
+		}
+		this.selectList.setFocus([this.selected]);
+		this.selectList.reveal(this.selected);
+		this.select(this.selected);
+	}
+
+	private onEnd(e: StandardKeyboardEvent): void {
+		dom.EventHelper.stop(e);
+
+		if (this.options.length < 2) {
+			return;
+		}
+		this.selected = this.options.length - 1;
+		if (this.selected === this.disabledOptionIndex && this.selected > 1) {
+			this.selected--;
+		}
+		this.selectList.setFocus([this.selected]);
+		this.selectList.reveal(this.selected);
+		this.select(this.selected);
+	}
+
 	// Mimic option first character navigation of native select
 	private onCharacter(e: StandardKeyboardEvent): void {
 		const ch = KeyCodeUtils.toString(e.keyCode);