From 9f23f047b16653d7f885cf82f13438e01c1faa97 Mon Sep 17 00:00:00 2001
From: "Roberto.silva" <Roberto.silva@lasalle.mx>
Date: Tue, 27 Jan 2026 15:56:56 -0600
Subject: [PATCH] Se cambian inputs por contentEditable fix #33

---
 .../asignaturas/detalle/MateriaDetailPage.tsx | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/asignaturas/detalle/MateriaDetailPage.tsx b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
index a3b3acc..8beb986 100644
--- a/src/components/asignaturas/detalle/MateriaDetailPage.tsx
+++ b/src/components/asignaturas/detalle/MateriaDetailPage.tsx
@@ -62,16 +62,33 @@ function EditableHeaderField({
 }) {
   const textValue = String(value)
 
+  // Manejador para cuando el usuario termina de editar (pierde el foco)
+  const handleBlur = (e: React.FocusEvent<HTMLSpanElement>) => {
+    const newValue = e.currentTarget.innerText
+    if (newValue !== textValue) {
+      onSave(newValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      e.currentTarget.blur() // Forzamos el guardado al presionar Enter
+    }
+  }
+
   return (
-    <input
-      type="text"
-      value={textValue}
-      // El truco es usar el atributo "size" o calcular el ancho dinámicamente
-      style={{ width: `${Math.max(textValue.length, 1)}ch` }}
-      onChange={(e) => onSave(e.target.value)}
-      onBlur={(e) => onSave(e.target.value)}
-      className={`border-none bg-transparent outline-none focus:ring-2 focus:ring-blue-400 ${className ?? ''}`}
-    />
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <span
+      contentEditable
+      suppressContentEditableWarning={true} // Evita el warning de React por tener hijos y contentEditable
+      spellCheck={false}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      className={`inline-block cursor-text rounded-sm px-1 transition-all hover:bg-white/10 focus:bg-white/20 focus:ring-2 focus:ring-blue-400/50 focus:outline-none ${className ?? ''} `}
+    >
+      {textValue}
+    </span>
   )
 }