fix: onChangeFormatter in datepicker in form component

affects: @medly-components/forms
medly · Jul 20, 2024 · a4e4442 · a4e4442
1 parent 08c57f3
commit a4e4442
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/packages/forms/src/components/Fields/Fields.components.tsx b/packages/forms/src/components/Fields/Fields.components.tsx
@@ -183,7 +183,11 @@ export const Fields: FC<FieldsProps> = memo(props => {
                                             {...({
                                                 ...commonProps,
                                                 value: value || null,
-                                                onChange: handlers.handleDateChange(name, (componentProps as DatePickerProps).displayFormat)
+                                                onChange: handlers.handleDateChange(
+                                                    name,
+                                                    (componentProps as DatePickerProps).displayFormat,
+                                                    (componentProps as DatePickerProps).onChangeFormatter
+                                                )
                                             } as GetComponentProps<typeof DatePicker>)}
                                         />
                                     );

diff --git a/packages/forms/src/components/Form/Form.test.tsx b/packages/forms/src/components/Form/Form.test.tsx
@@ -1,4 +1,5 @@
 import { cleanup, fireEvent, render, screen, waitFor } from '@test-utils';
+import { formatRFC3339 } from 'date-fns';
 import { FormCustomComponent } from '../Fields/types';
 import { Form } from './Form';
 import { testSchema } from './testSchema';
@@ -332,6 +333,39 @@ describe('Form', () => {
             });
         });
 
+        it('with onChangeFormatter', async () => {
+            const mockOnSubmit = jest.fn(),
+                formData = {
+                    birthDate: '2024-07-19T00:00:00+05:30'
+                };
+            render(
+                <Form
+                    name="Test form"
+                    fieldSchema={{
+                        birthDate: {
+                            type: 'date',
+                            label: 'Birth Date',
+                            placeholder: 'Birth Date',
+                            displayFormat: 'dd/MM/yyyy',
+                            valueFormatter: value => (value ? new Date(value) : null),
+                            onChangeFormatter: value => (value ? formatRFC3339(value) : null)
+                        }
+                    }}
+                    onSubmit={mockOnSubmit}
+                    initialState={{
+                        birthDate: '2024-07-18T00:00:00+05:30'
+                    }}
+                />
+            );
+            // DatePicker
+            fireEvent.change(screen.getByRole('textbox', { name: 'Birth Date' }), {
+                target: { value: '19/07/2024' }
+            });
+
+            fireEvent.submit(screen.getByRole('form'));
+            expect(mockOnSubmit).toHaveBeenCalledWith(formData);
+        });
+
         it('should allow user to clear number input', () => {
             render(
                 <Form

diff --git a/packages/forms/src/hooks/useForm/types.ts b/packages/forms/src/hooks/useForm/types.ts
@@ -16,7 +16,7 @@ export interface Handlers {
     // SingleSelect change handler
     handleSingleSelectChange: (name: string) => (value: any) => void;
     // DatePicker Component
-    handleDateChange: (name: string, displayFormat: DisplayFormat) => (value: any) => void;
+    handleDateChange: (name: string, displayFormat: DisplayFormat, onChangeFormatter?: (value: Date | null) => any) => (value: any) => void;
     // DateRangePicker Component
     handleDateRangeChange: (name: string, displayFormat: DisplayFormat) => (value: any) => void;
     // CheckboxGroup change handler

diff --git a/packages/forms/src/hooks/useForm/useForm.ts b/packages/forms/src/hooks/useForm/useForm.ts
@@ -92,8 +92,8 @@ export const useForm = (initialState: Record<string, unknown>): UseFormResult =>
     );
 
     const handleDateChange: Handlers['handleDateChange'] = useCallback(
-        memoize((name, displayFormat) => value => {
-            setValues(val => ({ ...val, [name]: value ? format(value, displayFormat || 'MM/dd/yyyy') : '' }));
+        memoize((name, displayFormat, onChangeFormatter) => value => {
+            setValues(val => ({ ...val, [name]: value ? (onChangeFormatter ? value : format(value, displayFormat || 'MM/dd/yyyy')) : '' }));
         }),
         []
     );