diff --git a/CHANGELOG.md b/CHANGELOG.md index f42d623..069a719 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Fixed + +- Fix phoneNumberField so phone number is not in the payload instead of always valuating it to null + ## [1.32.2] - 2025-02-10 ### Fixed diff --git a/src/components/form/fieldCreator.tsx b/src/components/form/fieldCreator.tsx index 9a3cd2b..16a03aa 100644 --- a/src/components/form/fieldCreator.tsx +++ b/src/components/form/fieldCreator.tsx @@ -60,7 +60,7 @@ export type FieldComponentProps = { export interface Formatter { bind: (value?: T) => FormValue | undefined - unbind: (value?: FormValue) => T | null + unbind: (value?: FormValue) => T | null | undefined } export type FieldDefinition = { @@ -108,7 +108,7 @@ export function createField< mapping = new PathMapping(camelCasePath(path)), format = { bind: x => isValued(x) ? x as F : undefined, - unbind: x => (isValued(x) && isRichFormValue(x, rawProperty) ? x[rawProperty] as T : x as T) + unbind: x => (isValued(x) && isRichFormValue(x, rawProperty) ? x[rawProperty] as T : x as T) }, rawProperty = 'raw' as K, component: Component, @@ -131,7 +131,7 @@ export function createField< ...extParams }; - return { + return { key, render: ({ state: { value, validation }, ...props }: Partial

& { state: FieldValue }) => ( @@ -150,7 +150,7 @@ export function createField< validate: async ({ value: formValue }: FieldValue, ctx: FormContext): Promise> => { const value = isRichFormValue(formValue, rawProperty) ? formValue[rawProperty] : formValue const requireValidation = required ? await requiredRule.create(i18n)(value, ctx) : { valid: true } as ValidatorSuccess - return isValidatorSuccess(requireValidation) && isValued(value) + return isValidatorSuccess(requireValidation) && isValued(value) ? await validator.create(i18n)(value, ctx) : requireValidation } diff --git a/src/components/form/fields/phoneNumberField.tsx b/src/components/form/fields/phoneNumberField.tsx index 307a4e6..2096d54 100644 --- a/src/components/form/fields/phoneNumberField.tsx +++ b/src/components/form/fields/phoneNumberField.tsx @@ -182,7 +182,7 @@ const phoneNumberField = ( } }, unbind: formValue => { - return (typeof formValue === 'object' && 'raw' in formValue ? formValue.raw : formValue) ?? null + return (typeof formValue === 'object' && 'raw' in formValue ? formValue.raw : formValue) } }, validator: new Validator({ diff --git a/tests/components/form/fields/phoneNumberField.test.tsx b/tests/components/form/fields/phoneNumberField.test.tsx index 3a79033..e20175f 100644 --- a/tests/components/form/fields/phoneNumberField.test.tsx +++ b/tests/components/form/fields/phoneNumberField.test.tsx @@ -72,7 +72,7 @@ describe('DOM testing', () => { const initialValue = '+33123456789' const key = 'phone_number' const label = 'phone' - + const onFieldChange = jest.fn() const onSubmit = jest.fn<(data: Model) => Promise>(data => Promise.resolve(data)) @@ -88,7 +88,7 @@ describe('DOM testing', () => { ], }) - const renderResult = await waitFor(async () => { + const renderResult = await waitFor(async () => { return render( { }) ) }) -}) \ No newline at end of file + + test('optional', async () => { + const user = userEvent.setup() + + const country = 'FR' + const key = 'phone_number' + const label = 'phone' + + const onFieldChange = jest.fn() + const onSubmit = jest.fn<(data: Model) => Promise>(data => Promise.resolve(data)) + + const Form = createForm({ + fields: [ + phoneNumberField({ + key, + label, + country, + withCountrySelect: true, + required: false + }, defaultConfig) + ], + }) + + await waitFor(async () => { + return render( + +

+ + ) + }) + + const submitBtn = screen.getByRole('button') + await user.click(submitBtn) + + await waitFor(() => expect(onSubmit).toHaveBeenCalled()) + + expect(onSubmit).toBeCalledWith({}) + }) +}) diff --git a/types/identity-ui.d.ts b/types/identity-ui.d.ts index bab2e4d..7d59de0 100644 --- a/types/identity-ui.d.ts +++ b/types/identity-ui.d.ts @@ -339,7 +339,7 @@ type FieldComponentProps = {}, K ex }; interface Formatter { bind: (value?: T) => FormValue | undefined; - unbind: (value?: FormValue) => T | null; + unbind: (value?: FormValue) => T | null | undefined; } type FieldDefinition = { key: string;