From be6c658c878e88f5dec72ad5ae7c0990653e2a2c Mon Sep 17 00:00:00 2001
From: "Brett V. Forsgren" <brett.forsgren@outlook.com>
Date: Sat, 9 Mar 2024 10:24:39 -0700
Subject: [PATCH] retain property selection after <TAB>

---
 src/javascript-client/src/propertyPane.ts | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/javascript-client/src/propertyPane.ts b/src/javascript-client/src/propertyPane.ts
index 3e2a60e6..719a9de9 100644
--- a/src/javascript-client/src/propertyPane.ts
+++ b/src/javascript-client/src/propertyPane.ts
@@ -4,6 +4,8 @@ import { InputConsole } from './inputConsole';
 import { LogWriter } from './logWriter';
 
 export class PropertyPane {
+    private _selectedPropertyPaneIndex: number | undefined;
+
     constructor(client: Client) {
         const propertyPane = <HTMLDivElement>document.getElementById("property-pane");
         InputConsole.ensureCapturedEvents(propertyPane, true);
@@ -128,6 +130,22 @@ export class PropertyPane {
                             valueCell.appendChild(text);
                         }
 
+                        // last child of `valueCell` is what we just added
+                        const currentRowCount = table.rows.length;
+                        valueCell.lastElementChild?.addEventListener('keydown', (e) => {
+                            if (e instanceof KeyboardEvent) {
+                                if (e.key === 'Tab') {
+                                    if (e.shiftKey) {
+                                        // select previous property
+                                        this._selectedPropertyPaneIndex = currentRowCount - 1;
+                                    } else {
+                                        // select next property
+                                        this._selectedPropertyPaneIndex = currentRowCount + 1;
+                                    }
+                                }
+                            }
+                        });
+
                         const row = <HTMLTableRowElement>document.createElement('tr');
                         row.appendChild(name);
                         row.appendChild(valueCell);
@@ -137,6 +155,16 @@ export class PropertyPane {
 
                     propertyPaneContents.appendChild(table);
                     propertyPane.style.display = 'block';
+
+                    if (this._selectedPropertyPaneIndex !== undefined && this._selectedPropertyPaneIndex < table.rows.length) {
+                        const selectedIndex = this._selectedPropertyPaneIndex;
+                        this._selectedPropertyPaneIndex = undefined;
+                        const row = table.rows[selectedIndex];
+                        if (row.cells.length > 1) {
+                            const cell = row.cells[1];
+                            cell.firstElementChild?.dispatchEvent(new Event('focus'));
+                        }
+                    }
                 }
             }
         });