fix: touched state

formwerkjs · Feb 15, 2025 · 95adb10 · 95adb10
1 parent 9926727
commit 95adb10
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 2 deletions.
diff --git a/packages/core/src/useDateTimeField/useDateTimeField.spec.ts b/packages/core/src/useDateTimeField/useDateTimeField.spec.ts
@@ -6,6 +6,7 @@ import { createCalendar, now, toCalendar } from '@internationalized/date';
 import { DateTimeSegment } from './useDateTimeSegment';
 import { ref, toValue } from 'vue';
 import { StandardSchema } from '../types';
+import { fireEvent } from '@testing-library/vue';
 
 describe('useDateTimeField', () => {
   const currentDate = new Date('2024-03-15T12:00:00Z');
@@ -320,6 +321,51 @@ describe('useDateTimeField', () => {
       await flush();
       expect(control).not.toHaveErrorMessage();
     });
+
+    test('sets touched state when any segment is blurred', async () => {
+      await render({
+        components: { DateTimeSegment },
+        setup() {
+          const { segments, controlProps, labelProps, isTouched } = useDateTimeField({
+            label: 'Date',
+            name: 'date',
+          });
+
+          return {
+            segments,
+            controlProps,
+            labelProps,
+            isTouched,
+          };
+        },
+        template: `
+          <div>
+            <span v-bind="labelProps">Date</span>
+            <div v-bind="controlProps" :data-touched="isTouched">
+              <DateTimeSegment
+                v-for="segment in segments"
+                :key="segment.type"
+                v-bind="segment"
+                data-testid="segment"
+              />
+            </div>
+          </div>
+        `,
+      });
+
+      await flush();
+      const segments = screen.getAllByTestId('segment');
+      const control = screen.getByRole('group');
+
+      // Initially not touched
+      expect(control.dataset.touched).toBe('false');
+
+      // Blur month segment
+      const monthSegment = segments.find(el => el.dataset.segmentType === 'month')!;
+      await fireEvent.blur(monthSegment);
+      await flush();
+      expect(control.dataset.touched).toBe('true');
+    });
   });
 
   describe('constraints', () => {

diff --git a/packages/core/src/useDateTimeField/useDateTimeField.ts b/packages/core/src/useDateTimeField/useDateTimeField.ts
@@ -148,6 +148,7 @@ export function useDateTimeField(_props: Reactivify<DateTimeFieldProps, 'schema'
     controlEl,
     temporalValue,
     onValueChange,
+    onTouched: () => field.setTouched(true),
   });
 
   const { labelProps, labelledByProps } = useLabel({

diff --git a/packages/core/src/useDateTimeField/useDateTimeSegment.ts b/packages/core/src/useDateTimeField/useDateTimeSegment.ts
@@ -44,7 +44,7 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
     throw new Error('DateTimeSegmentGroup is not provided');
   }
 
-  const { increment, decrement, setValue, getMetadata, onDone, parser, clear, isPlaceholder } =
+  const { increment, decrement, setValue, getMetadata, onDone, parser, clear, isPlaceholder, onTouched } =
     segmentGroup.useDateSegmentRegistration({
       id,
       getElem: () => segmentEl.value,
@@ -95,8 +95,8 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
       }
     },
     onBlur() {
+      onTouched();
       const { min, max } = getMetadata();
-
       if (isNullOrUndefined(min) || isNullOrUndefined(max)) {
         return;
       }

diff --git a/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.spec.ts b/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.spec.ts
@@ -34,6 +34,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           // Register a segment
@@ -82,6 +83,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -132,6 +134,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
             direction: 'rtl',
           });
 
@@ -183,6 +186,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           const segment = {
@@ -217,6 +221,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           const segment = {
@@ -251,6 +256,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           const segment = {
@@ -285,6 +291,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           const segment = {
@@ -321,6 +328,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale: 'de-DE',
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -360,6 +368,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -420,6 +429,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -481,6 +491,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -536,6 +547,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -608,6 +620,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {
@@ -704,6 +717,7 @@ describe('useDateTimeSegmentGroup', () => {
             locale,
             controlEl,
             onValueChange,
+            onTouched: () => {},
           });
 
           return {

diff --git a/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts b/packages/core/src/useDateTimeField/useDateTimeSegmentGroup.ts
@@ -30,6 +30,7 @@ export interface DateTimeSegmentGroupContext {
     onDone(): void;
     clear(): void;
     isPlaceholder(): boolean;
+    onTouched(): void;
   };
 }
 
@@ -43,6 +44,7 @@ export interface DateTimeSegmentGroupProps {
   direction?: MaybeRefOrGetter<Direction>;
   controlEl: Ref<HTMLElement | undefined>;
   onValueChange: (value: ZonedDateTime) => void;
+  onTouched: () => void;
 }
 
 export function useDateTimeSegmentGroup({
@@ -53,6 +55,7 @@ export function useDateTimeSegmentGroup({
   locale,
   controlEl,
   onValueChange,
+  onTouched,
 }: DateTimeSegmentGroupProps) {
   const renderedSegments = ref<DateTimeSegmentRegistration[]>([]);
   const parser = useNumberParser(locale, {
@@ -206,6 +209,7 @@ export function useDateTimeSegmentGroup({
       onDone: onSegmentDone,
       clear,
       isPlaceholder,
+      onTouched,
     };
   }