fix(date): apply keys on calendar and segment render fns

formwerkjs · Mar 8, 2025 · 080eff3 · 080eff3
1 parent 6ed644c
commit 080eff3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/.changeset/moody-bees-tap.md 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
@@ -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
@@ -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,
+      );
   },
 });