fn_registry/dev/issues/0088-kanban-requester-empty-nav.md

id, title, status, type, domain, scope, priority, depends, blocks, related, created, updated, tags

id	title	status	type	domain	scope	priority	depends	blocks	related	created	updated	tags
0088	kanban: requester input vacío + navegación con teclado	pendiente	feature	kanban	multi-app	media				2026-05-17	2026-05-17

Problema

Al crear una nueva card en el kanban (Nueva tarjeta modal), el campo "Solicitante" se pre-rellena con el display_name del usuario logueado. Esto fuerza al usuario a borrar el contenido si quiere otro solicitante.

Además, al escribir en el Autocomplete:

• La tecla Enter dispara el submit del formulario (línea 51-56 de CardForm.tsx) en lugar de seleccionar la sugerencia resaltada del dropdown.
• Las flechas ↑↓ no son navegables porque el Autocomplete de Mantine sí las soporta nativamente, pero el onKeyDown con submit-on-Enter las invalida (al pulsar Enter para confirmar la selección, se cierra el form sin haber seleccionado).

Solución

Frontend

1. apps/kanban/frontend/src/App.tsx:548

   initial={{ requester: auth.user?.display_name || auth.user?.username || "" }}
   

   → cambiar a:

   initial={{ requester: "" }}
   

   (Quitar pre-fill. Si más adelante se quiere "último solicitante usado", se hace en otro issue.)

2. apps/kanban/frontend/src/components/CardForm.tsx

   • Cambiar el handler enterSubmit aplicado al Autocomplete de "Solicitante". Para Enter en el requester:
     • Si dropdown abierto → dejar que Mantine maneje la selección (no e.preventDefault(), no submit()).
     • Si dropdown cerrado → no hacer nada (no submit()).
   • El submit se hace solo con el botón "Crear" (o Ctrl+Enter desde el textarea de descripción, que ya existe).
   • Añadir data-field="requester" al Autocomplete para selectores estables en e2e.

Tests

• vitest componente: apps/kanban/frontend/src/components/CardForm.test.tsx

  • Render con requesterOptions=["Alice","Anna","Bob"], sin initial.requester.
  • Assert input vacío.
  • Type "An" → dropdown muestra Alice + Anna (filtro).
  • Press ArrowDown → highlight Alice, press ArrowDown → highlight Anna, press Enter → input vale "Anna" y onSubmit NO se llamó.
  • Press Enter en input cuando dropdown cerrado → onSubmit NO se llamó.
  • Click en botón "Crear" → onSubmit llamado con requester: "Anna".

• Playwright e2e: apps/kanban/frontend/e2e/requester-input.spec.ts usando funciones del registry (pw_launch_browser, pw_kanban_login, pw_keyboard_sequence, pw_assert_class).

  • Login → click "+ Nueva tarjeta" en cualquier columna.
  • Assert input requester vacío.
  • Type "Enma", esperar 200ms (debounce dropdown).
  • ArrowDown + Enter → assert modal sigue visible y input contiene un valor.
  • Click "Crear" → modal se cierra y card aparece en columna.

Criterios de aceptación

• Input "Solicitante" entra vacío al abrir "Nueva tarjeta".
• Enter dentro del Autocomplete NO cierra el form.
• ↑↓ navegan el dropdown y Enter selecciona la entrada resaltada.
• Botón "Crear" sigue funcionando como único submit del form.
• Tests vitest + e2e Playwright pasan.

Ramas / commits

• Rama: issue/0088-kanban-requester-empty-nav
• Merge --no-ff a master.