From 15506d3a8192cae974985ee8507661e3fd999861 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 2 Feb 2026 22:16:08 +0000
Subject: [PATCH] fix: add keys to shortcut elements

---
 apps/web/src/providers/keyboard-shortcuts.tsx | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/providers/keyboard-shortcuts.tsx b/apps/web/src/providers/keyboard-shortcuts.tsx
index 089dea32..0c08a043 100644
--- a/apps/web/src/providers/keyboard-shortcuts.tsx
+++ b/apps/web/src/providers/keyboard-shortcuts.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import React from "react";
 import {
   Dialog,
   DialogBackdrop,
@@ -464,19 +465,37 @@ function FormattedShortcut({ shortcut }: { shortcut: KeyboardShortcut }) {
       ? stroke.modifiers.map(stringifyModifier)
       : [];
 
-    modifierStrings.forEach((mod) => {
-      parts.push(<kbd className={kbdClassName}>{mod}</kbd>);
+    modifierStrings.forEach((mod, index) => {
+      parts.push(
+        <kbd key={`mod-${index}-${mod}`} className={kbdClassName}>
+          {mod}
+        </kbd>,
+      );
     });
 
-    parts.push(<kbd className={kbdClassName}>{stroke.key.toUpperCase()}</kbd>);
+    parts.push(
+      <kbd key={`key-${stroke.key}`} className={kbdClassName}>
+        {stroke.key.toUpperCase()}
+      </kbd>,
+    );
 
     return parts;
   };
 
   if (shortcut.type === "SEQUENCE") {
     const parts: ReactNode[] = [];
-    shortcut.strokes.forEach((stroke) => {
-      parts.push(...formatStroke(stroke));
+    shortcut.strokes.forEach((stroke, strokeIndex) => {
+      const strokeParts = formatStroke(stroke);
+      // Add stroke index to keys to ensure uniqueness across multiple strokes
+      const keyedParts = strokeParts.map((part, partIndex) => {
+        if (React.isValidElement(part)) {
+          return React.cloneElement(part, {
+            key: `stroke-${strokeIndex}-${part.key || partIndex}`,
+          });
+        }
+        return part;
+      });
+      parts.push(...keyedParts);
     });
     return <span className="flex items-center gap-1 text-[11px]">{parts}</span>;
   }