fix(kit): Time doesn't validate time segments on drop event (#289)

projects/kit/src/lib/masks/time/processors/max-validation-preprocessor.ts

@@ -8,14 +8,31 @@ export function createMaxValidationPreprocessor(
 ): NonNullable<MaskitoOptions['preprocessor']> {
     const paddedMaxValues = padTimeSegments(timeSegmentMaxValues);
 
-    return ({elementState, data}) => {
-        const newCharacters = data.replace(/\D+/g, '');
-
-        if (!newCharacters) {
-            return {elementState, data: ''};
+    return ({elementState, data}, actionType) => {
+        if (actionType === 'deleteBackward' || actionType === 'deleteForward') {
+            return {elementState, data};
         }
 
         const {value, selection} = elementState;
+
+        if (actionType === 'validation') {
+            const {validatedTimeString, updatedTimeSelection} = validateTimeString({
+                timeString: value,
+                paddedMaxValues,
+                offset: 0,
+                selection,
+            });
+
+            return {
+                elementState: {
+                    value: validatedTimeString,
+                    selection: updatedTimeSelection,
+                },
+                data,
+            };
+        }
+
+        const newCharacters = data.replace(/\D+/g, '');
         const [from, rawTo] = selection;
         let to = rawTo + newCharacters.length; // to be conformed with `overwriteMode: replace`
         const newPossibleValue = value.slice(0, from) + newCharacters + value.slice(to);

projects/kit/src/lib/masks/time/processors/tests/max-validation-preprocessor.spec.ts

@@ -0,0 +1,58 @@
+import {DEFAULT_TIME_SEGMENT_MAX_VALUES} from '../../../../constants';
+import {createMaxValidationPreprocessor} from '../max-validation-preprocessor';
+
+describe('createMaxValidationPreprocessor', () => {
+    const processor = createMaxValidationPreprocessor(DEFAULT_TIME_SEGMENT_MAX_VALUES);
+
+    describe('Paste from clipboard', () => {
+        const process = (data: string): string =>
+            processor(
+                {
+                    elementState: {
+                        value: '',
+                        selection: [0, 0],
+                    },
+                    data,
+                },
+                'insert',
+            ).data || '';
+
+        it('All time segments valid', () => {
+            expect(process('17:43:00')).toBe('17:43:00');
+        });
+
+        it('contains invalid time segment for hours', () => {
+            expect(process('30:30:30')).toBe('');
+        });
+
+        it('Invalid time segment for minutes', () => {
+            expect(process('23:70:30')).toBe('');
+        });
+    });
+
+    describe('Dropping text inside with a pointer / browser autofill', () => {
+        const process = (value: string): string =>
+            processor(
+                {
+                    elementState: {
+                        value,
+                        selection: [0, value.length],
+                    },
+                    data: '',
+                },
+                'validation',
+            ).elementState.value;
+
+        it('All time segments valid', () => {
+            expect(process('17:43:00')).toBe('17:43:00');
+        });
+
+        it('contains invalid time segment for hours', () => {
+            expect(process('30:30:30')).toBe('');
+        });
+
+        it('Invalid time segment for minutes', () => {
+            expect(process('23:70:30')).toBe('');
+        });
+    });
+});

projects/kit/src/lib/utils/time/validate-time-string.ts

@@ -13,7 +13,7 @@ export function validateTimeString({
     timeString: string;
     paddedMaxValues: MaskitoTimeSegments<string>;
     offset: number;
-    selection: [number, number];
+    selection: readonly [number, number];
 }): {validatedTimeString: string; updatedTimeSelection: [number, number]} {
     const parsedTime = parseTimeString(timeString);