material-react-table-narender 2.13.18 → 2.13.20

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.18",
+  "version": "2.13.20",
   "license": "MIT",
   "name": "material-react-table-narender",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/utils/cell.utils.ts

@@ -90,22 +90,40 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
 
    const { enableKeyboardShortcuts } = getState();
 
-if (event.altKey) {
+  //  alt + n
+if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
     event.preventDefault();
     setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
     const currentCell = event.currentTarget;
 
 
-    if (enableKeyboardShortcuts) {
-      currentCell.style.outline = '2px solid red';
-      // setTimeout(() => {
-      //   currentCell.style.outline = '';
-      // },
-      // 1000);
-      currentCell.focus();
-      return;
-    }
+ if (enableKeyboardShortcuts) {
+  const input = currentCell.querySelector('input') as HTMLInputElement;
+  const select = currentCell.querySelector('select') as HTMLSelectElement;
+  const checkbox = currentCell.querySelector('input[type="checkbox"]') as HTMLInputElement;
+  const button = currentCell.querySelector('button') as HTMLButtonElement;
+  const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]') as HTMLInputElement;
+
+
+  if (autocomplete) {
+    autocomplete.focus();
+    autocomplete.select?.();
+  } else if (input) {
+    input.focus();
+    input.select?.();
+  } else if (select) {
+    select.focus();
+  } else if (checkbox) {
+    checkbox.focus();
+    // checkbox.click();
+  } else if (button) {
+    button.focus();
+  } else {
+    currentCell.focus();
   }
+}
+
+}
 
   // if (!table.options.enableKeyboardShortcuts) return;
   if (!enableKeyboardShortcuts) return