From a2545df823b6c9cb62563b11f66a2d67888b1190 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 16 Sep 2024 11:01:47 +0200
Subject: [PATCH] fix(dashboard): max call error onKeyDown handler (#9141)

* fix(dashboard): max call error onKeyDown handler

* cleanup

* fix linting
---
 .../data-grid/hooks/use-data-grid-cell.tsx    | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-cell.tsx b/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-cell.tsx
index d180b5d683..3f6ee47b2e 100644
--- a/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-cell.tsx
+++ b/packages/admin/dashboard/src/components/data-grid/hooks/use-data-grid-cell.tsx
@@ -166,17 +166,28 @@ export const useDataGridCell = <TData, TValue>({
         return
       }
 
-      const event = new KeyboardEvent(e.type, e.nativeEvent)
-
       inputRef.current.focus()
       setShowOverlay(false)
 
-      // if the inputRef can use .select() then we can use it here
       if (inputRef.current instanceof HTMLInputElement) {
-        inputRef.current.select()
+        // Clear the current value
+        inputRef.current.value = ""
+
+        // Simulate typing the new key
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set
+        nativeInputValueSetter?.call(inputRef.current, e.key)
+
+        // Trigger input event to notify react-hook-form
+        const event = new Event("input", { bubbles: true })
+        inputRef.current.dispatchEvent(event)
       }
 
-      inputRef.current.dispatchEvent(event)
+      // Prevent the original event from propagating
+      e.stopPropagation()
+      e.preventDefault()
     },
     [showOverlay, validateKeyStroke]
   )