From 080eff32da714fa500cb31fb0ae129a59d425b5b Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <me@awad.dev>
Date: Sun, 9 Mar 2025 01:01:34 +0200
Subject: [PATCH] fix(date): apply keys on calendar and segment render fns

---
 .changeset/moody-bees-tap.md                      |  5 +++++
 packages/core/src/useCalendar/useCalendarCell.ts  | 14 +++++++++++---
 .../src/useDateTimeField/useDateTimeSegment.ts    | 15 ++++++++++++---
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/moody-bees-tap.md

diff --git a/.changeset/moody-bees-tap.md b/.changeset/moody-bees-tap.md
new file mode 100644
index 0000000..e6b7f51
--- /dev/null
+++ b/.changeset/moody-bees-tap.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix: apply keys externally on calendar and segment components
diff --git a/packages/core/src/useCalendar/useCalendarCell.ts b/packages/core/src/useCalendar/useCalendarCell.ts
index 3858f6c..f1262de 100644
--- a/packages/core/src/useCalendar/useCalendarCell.ts
+++ b/packages/core/src/useCalendar/useCalendarCell.ts
@@ -35,7 +35,6 @@ export function useCalendarCell(_props: Reactivify<CalendarCellProps>) {
 
     return withRefCapture(
       {
-        key: toValue(props.value).toString(),
         onClick: handleClick,
         onPointerdown: handlePointerDown,
         'aria-selected': toValue(props.selected),
@@ -51,6 +50,7 @@ export function useCalendarCell(_props: Reactivify<CalendarCellProps>) {
   return {
     cellProps,
     label,
+    key: computed(() => `${toValue(props.type)}-${toValue(props.value).toString()}`),
   };
 }
 
@@ -62,8 +62,16 @@ export const CalendarCell = /*#__PURE__*/ defineComponent({
   inheritAttrs: true,
   props: ['value', 'selected', 'disabled', 'focused', 'label', 'type', 'monthOfYear', 'year'],
   setup(props) {
-    const { cellProps, label } = useCalendarCell(props);
+    const { cellProps, label, key } = useCalendarCell(props);
 
-    return () => h('span', cellProps.value, label.value);
+    return () =>
+      h(
+        'span',
+        {
+          ...cellProps.value,
+          key: key.value,
+        },
+        label.value,
+      );
   },
 });
diff --git a/packages/core/src/useDateTimeField/useDateTimeSegment.ts b/packages/core/src/useDateTimeField/useDateTimeSegment.ts
index b151284..de3b502 100644
--- a/packages/core/src/useDateTimeField/useDateTimeSegment.ts
+++ b/packages/core/src/useDateTimeField/useDateTimeSegment.ts
@@ -235,6 +235,7 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
   });
 
   return {
+    key: computed(() => `${id}-${toValue(props.type)}`),
     segmentProps,
   };
 }
@@ -246,8 +247,16 @@ export const DateTimeSegment = /*#__PURE__*/ defineComponent<DateTimeSegmentProp
   name: 'DateTimeSegment',
   props: ['type', 'value', 'disabled', 'readonly'],
   setup(props) {
-    const { segmentProps } = useDateTimeSegment(props);
-
-    return () => h('span', segmentProps.value, props.value);
+    const { segmentProps, key } = useDateTimeSegment(props);
+
+    return () =>
+      h(
+        'span',
+        {
+          ...segmentProps.value,
+          key: key.value,
+        },
+        props.value,
+      );
   },
 });