From f7e1ecc079a3c2734b58484a2503c2356d3ef1af Mon Sep 17 00:00:00 2001
From: Mariela Tihova <MTihova@infragistics.com>
Date: Mon, 5 May 2025 18:57:05 +0300
Subject: [PATCH 1/3] Update keyboard navigation topic for React v19

---
 .../grids/_shared/keyboard-navigation.md      | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/doc/en/components/grids/_shared/keyboard-navigation.md b/doc/en/components/grids/_shared/keyboard-navigation.md
index c56491700..8d2aef5da 100644
--- a/doc/en/components/grids/_shared/keyboard-navigation.md
+++ b/doc/en/components/grids/_shared/keyboard-navigation.md
@@ -197,32 +197,31 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 ```
 
 ```tsx
-<{ComponentSelector} id="grid1" primaryKey="ProductID" gridKeydown={customKeydown}>
+<{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
 </{ComponentSelector}>
 ```
 
 ```ts
 constructor() {
-        var grid = this.grid = document.getElementById('grid') as {ComponentName}Component;
+        const grid = this.grid = document.getElementById('grid1') as {ComponentName}Component;
 		grid.data = this.data
-		grid.addEventListener("gridKeydown", this.customKeydown);
+		grid.addEventListener("onGridKeydown", this.customKeydown);
 	}
 ```
 
 ```typescript
-function customKeydown(s: IgrGridBaseDirective, e: IgrGridKeydownEventArgs) {
-  const detail = e.detail
-  const target= detail.target;
-  const evt = detail.event;
-  const type = detail.targetType;
+const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
+  const args = eventArgs.detail;
+  const target= args.target;
+  const evt = args.event;
+  const type = args.targetType;
 
-  if (type === GridKeydownTargetType.DataCell && target.editMode && evt.key.toLowerCase() === 'tab') {
+  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {
       // 1. USER INPUT VALIDATION ON TAB
       
   }
-  if (type === GridKeydownTargetType.DataCell && evt.key.toLowerCase() === 'enter') {
+  if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {
       // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS
-
   }
 }
 ```

From 96bc2a622f6d9dcaeada92195a2976a9b87f0c4e Mon Sep 17 00:00:00 2001
From: Mariela Tihova <MTihova@infragistics.com>
Date: Fri, 9 May 2025 17:06:55 +0300
Subject: [PATCH 2/3] Excluding WC snippet

---
 doc/en/components/grids/_shared/keyboard-navigation.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/en/components/grids/_shared/keyboard-navigation.md b/doc/en/components/grids/_shared/keyboard-navigation.md
index 8d2aef5da..1beef64fb 100644
--- a/doc/en/components/grids/_shared/keyboard-navigation.md
+++ b/doc/en/components/grids/_shared/keyboard-navigation.md
@@ -200,7 +200,7 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 <{ComponentSelector} id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>
 </{ComponentSelector}>
 ```
-
+<!-- WebComponents -->
 ```ts
 constructor() {
         const grid = this.grid = document.getElementById('grid1') as {ComponentName}Component;
@@ -208,6 +208,7 @@ constructor() {
 		grid.addEventListener("onGridKeydown", this.customKeydown);
 	}
 ```
+<!-- end: WebComponents -->
 
 ```typescript
 const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {

From dc1482cf2352e2271e0bc9d74c65e67835a7d345 Mon Sep 17 00:00:00 2001
From: Mariela Tihova <MTihova@infragistics.com>
Date: Wed, 14 May 2025 14:24:28 +0300
Subject: [PATCH 3/3] Resolving comments on PR

---
 .../components/grids/_shared/keyboard-navigation.md  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/doc/en/components/grids/_shared/keyboard-navigation.md b/doc/en/components/grids/_shared/keyboard-navigation.md
index 1beef64fb..54841d48a 100644
--- a/doc/en/components/grids/_shared/keyboard-navigation.md
+++ b/doc/en/components/grids/_shared/keyboard-navigation.md
@@ -205,12 +205,14 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 constructor() {
         const grid = this.grid = document.getElementById('grid1') as {ComponentName}Component;
 		grid.data = this.data
-		grid.addEventListener("onGridKeydown", this.customKeydown);
+		grid.addEventListener("gridKeydown", this.customKeydown);
 	}
 ```
 <!-- end: WebComponents -->
 
-```typescript
+<!-- React -->
+
+```tsx
 const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
   const args = eventArgs.detail;
   const target= args.target;
@@ -227,6 +229,9 @@ const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {
 }
 ```
 
+<!-- end: React -->
+
+<!-- WebComponents -->
 
 ```typescript
 public customKeydown(args: any) {
@@ -243,6 +248,9 @@ public customKeydown(args: any) {
     }
 }
 ```
+
+<!-- WebComponents -->
+
 <!-- Angular, WebComponents, Blazor -->
 
 Based on the event arg values we identified two cases, where to provide our own logic (see above). Now, using the methods from the API, let's perform the desired - if the user is pressing <kbd>Tab</kbd> key over a cell in edit mode, we will perform validation on the input. If the user is pressing <kbd>Enter</kbd> key over a cell, we will move focus to cell in the next row: