Fix focus for keyboard navigation (#33)

* fix focus for keyboard navigation

* Focus clicked cell on mouse down

* Focus webview on activation

* Arrow scrolling and enter to enter cell

Author: jonaraphael

package.json

@@ -99,8 +99,9 @@
     "papaparse": "^5.4.1"
   },
   "devDependencies": {
-    "@types/mocha": "^10.0.0",
+    "@types/mocha": "^10.0.10",
     "@types/node": "^14.0.0",
+    "@types/papaparse": "^5.3.16",
     "@types/vscode": "^1.60.0",
     "vscode": "^1.1.37",
     "@vscode/test-cli": "^0.0.11",

src/extension.ts

@@ -89,6 +89,12 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
     CsvEditorProvider.editors.push(this);
     webviewPanel.webview.options = { enableScripts: true };
     this.updateWebviewContent();
+    webviewPanel.webview.postMessage({ type: 'focus' });
+    webviewPanel.onDidChangeViewState(e => {
+      if (e.webviewPanel.active) {
+        e.webviewPanel.webview.postMessage({ type: 'focus' });
+      }
+    });
 
     // Handle messages from the webview.
     webviewPanel.webview.onDidReceiveMessage(async e => {
@@ -187,7 +193,7 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
       while (data[row].length <= col) data[row].push('');
       data[row][col] = value;
       const newCsvText = Papa.unparse(data, { delimiter: separator });
-      const fullRange = new vscode.Range(0, 0, this.document.lineCount, this.document.lineAt(this.document.lineCount - 1).text.length);
+      const fullRange = new vscode.Range(0, 0, this.document.lineCount, this.document.lineCount ? this.document.lineAt(this.document.lineCount - 1).text.length : 0);
       const edit = new vscode.WorkspaceEdit();
       edit.replace(this.document.uri, fullRange, newCsvText);
       await vscode.workspace.applyEdit(edit);
@@ -478,6 +484,7 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
     <div id="contextMenu"></div>
     <script nonce="${nonce}">
       document.body.setAttribute('tabindex', '0'); document.body.focus();
+      window.addEventListener('mousedown', () => document.body.focus());
       const vscode = acquireVsCodeApi();
       let isUpdating = false, isSelecting = false, anchorCell = null, currentSelection = [];
       let startCell = null, endCell = null, selectionMode = "cell";
@@ -545,6 +552,7 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
         const target = e.target;
         selectionMode = (target.tagName === 'TH') ? "column" : (target.getAttribute('data-col') === '-1' ? "row" : "cell");
         startCell = target; endCell = target; isSelecting = true; e.preventDefault();
+        target.focus();
       });
       table.addEventListener('mousemove', e => {
         if(!isSelecting) return;
@@ -682,6 +690,56 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
         if ((e.ctrlKey || e.metaKey) && e.key === 'c' && currentSelection.length > 0) {
           e.preventDefault(); copySelectionToClipboard(); return;
         }
+
+        /* ──────── NEW: ENTER + DIRECT TYPING HANDLERS ──────── */
+        if (!editingCell && anchorCell && currentSelection.length === 1) {
+          /* Enter opens edit mode */
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            editCell(anchorCell);
+            return;
+          }
+          /* Typing clears cell and opens edit mode */
+          if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            const cell = anchorCell;
+            editCell(cell);
+            cell.innerText = '';
+            if (document.execCommand) {
+              document.execCommand('insertText', false, e.key);
+            } else {
+              cell.innerText = e.key;
+            }
+            setCursorToEnd(cell);
+            return;
+          }
+        }
+
+        /* ──────── ARROW KEY NAVIGATION ──────── */
+        if (!editingCell && anchorCell && ['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)) {
+          const { row, col } = getCellCoords(anchorCell);
+          let targetRow = row, targetCol = col;
+          switch(e.key){
+            case 'ArrowUp':   targetRow = row - 1; break;
+            case 'ArrowDown': targetRow = row + 1; break;
+            case 'ArrowLeft': targetCol = col - 1; break;
+            case 'ArrowRight':targetCol = col + 1; break;
+          }
+          if(targetRow < 0 || targetCol < 0) return;
+          const tag = (hasHeader && targetRow === 0 ? 'th' : 'td');
+          const nextCell = table.querySelector(\`\${tag}[data-row="\${targetRow}"][data-col="\${targetCol}"]\`);
+          if(nextCell){
+            e.preventDefault();
+            clearSelection();
+            nextCell.classList.add('selected');
+            currentSelection.push(nextCell);
+            anchorCell = nextCell;
+            nextCell.focus({preventScroll:true});
+            nextCell.scrollIntoView({ block:'nearest', inline:'nearest', behavior:'smooth' });
+          }
+          return;
+        }
+
         if (editingCell && ((e.ctrlKey || e.metaKey) && e.key === 's')) {
           e.preventDefault();
           editingCell.blur();
@@ -700,10 +758,8 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
           editingCell.blur();
           let nextCell;
           if (e.shiftKey) {
-            // Shift+Tab: move to the previous cell (decrement column index)
             nextCell = table.querySelector('td[data-row="'+row+'"][data-col="'+(col-1)+'"]');
           } else {
-            // Tab: move to the next cell (increment column index)
             nextCell = table.querySelector('td[data-row="'+row+'"][data-col="'+(col+1)+'"]');
           }
           if (nextCell) {
@@ -713,7 +769,6 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
         if (editingCell && e.key === 'Escape') {
           e.preventDefault(); editingCell.innerText = originalCellValue; editingCell.blur();
         }
-        // If not editing, pressing Escape clears the selection.
         if (!editingCell && e.key === 'Escape') {
           clearSelection();
         }
@@ -738,7 +793,6 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
         cell.classList.add('editing');
         cell.setAttribute('contenteditable', 'true');
         cell.focus();
-        // Attach a blur handler to commit cell changes.
         const onBlurHandler = () => {
           const value = cell.innerText;
           const coords = getCellCoords(cell);
@@ -771,15 +825,16 @@ class CsvEditorProvider implements vscode.CustomTextEditorProvider {
       };
       window.addEventListener('message', event => {
         const message = event.data;
-        if(message.type === 'updateCell'){
+        if(message.type === 'focus'){
+          document.body.focus();
+        } else if(message.type === 'updateCell'){
           isUpdating = true;
           const { row, col, value } = message;
           const cell = table.querySelector('td[data-row="'+row+'"][data-col="'+col+'"]');
           if(cell){ cell.innerText = value; }
           isUpdating = false;
         }
       });
-      // Global Escape handler to clear selection when not editing.
       document.addEventListener('keydown', e => {
         if(!editingCell && e.key === 'Escape'){
           clearSelection();

tsconfig.json

@@ -9,6 +9,7 @@
     "types": ["node", "vscode", "mocha"],
     "skipLibCheck": true
   },
-  "include": ["./**/*.ts"],
-  "exclude": ["node_modules"]
+	"include": ["./**/*.ts"],
+	"exclude": ["node_modules"]
 }
+