diff --git a/e2e/base/fields/PhoneInput.spec.tsx b/e2e/base/fields/PhoneInput.spec.tsx
index 9831abce..2cce0545 100644
--- a/e2e/base/fields/PhoneInput.spec.tsx
+++ b/e2e/base/fields/PhoneInput.spec.tsx
@@ -70,96 +70,95 @@ context('Story', () => {
outputShouldBe('0712345678')
})
+ })
+ describe('international format', () => {
+ it('Should fill, change and clear the input', () => {
+ mountAndWait(
+
+
+
+ )
- describe('international format', () => {
- it('Should fill, change and clear the input', () => {
- mountAndWait(
-
-
-
- )
-
- outputShouldBe(undefined)
+ outputShouldBe(undefined)
- cy.fill(commonProps.label, '00 594 222 333 444')
+ cy.fill(commonProps.label, '00 594 222 333 444')
- outputShouldBe('00594222333444')
+ outputShouldBe('00594222333444')
- cy.fill(commonProps.label, '')
+ cy.fill(commonProps.label, '')
- outputShouldBe(undefined)
- })
+ outputShouldBe(undefined)
+ })
- it('Should have output with default value`', () => {
- mountAndWait(
-
-
-
- )
+ it('Should have output with default value`', () => {
+ mountAndWait(
+
+
+
+ )
- outputShouldBe('00594222333444')
- })
- describe('other format', () => {
- it('Should fill, change and clear the input', () => {
- mountAndWait(
-
-
-
- )
+ outputShouldBe('00594222333444')
+ })
+ })
+ describe('other format', () => {
+ it('Should fill, change and clear the input', () => {
+ mountAndWait(
+
+
+
+ )
- outputShouldBe(undefined)
+ outputShouldBe(undefined)
- cy.fill(commonProps.label, '8317920035')
+ cy.fill(commonProps.label, '8317920035')
- outputShouldBe('8317920035')
+ outputShouldBe('8317920035')
- cy.fill(commonProps.label, '')
+ cy.fill(commonProps.label, '')
- outputShouldBe(undefined)
- })
+ outputShouldBe(undefined)
+ })
- it('Should be editable to a international number', () => {
- mountAndWait(
-
-
-
- )
+ it('Should be editable to a international number', () => {
+ mountAndWait(
+
+
+
+ )
- outputShouldBe(undefined)
+ outputShouldBe(undefined)
- cy.fill(commonProps.label, '8317920035')
+ cy.fill(commonProps.label, '8317920035')
- cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00')
+ cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00')
- outputShouldBe('008317920035')
- })
+ outputShouldBe('008317920035')
+ })
- it('Should be editable to a french number', () => {
- mountAndWait(
-
-
-
- )
+ it('Should be editable to a french number', () => {
+ mountAndWait(
+
+
+
+ )
- outputShouldBe(undefined)
+ outputShouldBe(undefined)
- cy.fill(commonProps.label, '8317920035')
+ cy.fill(commonProps.label, '8317920035')
- cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0')
+ cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0')
- outputShouldBe('08317920035')
- })
+ outputShouldBe('08317920035')
+ })
- it('Should have output with default value`', () => {
- mountAndWait(
-
-
-
- )
+ it('Should have output with default value`', () => {
+ mountAndWait(
+
+
+
+ )
- outputShouldBe('+3361234567890')
- })
- })
+ outputShouldBe('+3361234567890')
})
})
})
diff --git a/src/fields/PhoneInput.tsx b/src/fields/PhoneInput.tsx
index dee45063..40286313 100644
--- a/src/fields/PhoneInput.tsx
+++ b/src/fields/PhoneInput.tsx
@@ -28,6 +28,11 @@ const internationalFormat = {
mask: '`@@ #[00] 000 000 000 000'
}
+const internationalFrenchFormat = {
+ definitions: { '@': /0/ },
+ mask: '`@@ 00 00 00 00 00'
+}
+
const frenchFormat = { definitions: { '#': /[1-9]/, '@': /0/ }, mask: '`@# 00 00 00 00' }
const defaultFormat = { definitions: { '#': /[1-9]/, '+': /[+\d]/ }, mask: '`+00 000 000 000 000 000' }
@@ -69,23 +74,27 @@ export const PhoneInput = forwardRef(
$isTransparent={isTransparent}
disabled={disabled}
dispatch={(appended, dynamicMasked) => {
- const phoneNumber = dynamicMasked.unmaskedValue + appended
+ const phoneNumber = (dynamicMasked.unmaskedValue + appended).replace(/\s+/g, '')
if (phoneNumber.startsWith('00')) {
+ if (value && value.length === 12 && phoneNumber === value) {
+ return dynamicMasked.compiledMasks[1]
+ }
+
return dynamicMasked.compiledMasks[0]
}
if (phoneNumber.startsWith('0') && value && value.length <= 10 && phoneNumber === value) {
- return dynamicMasked.compiledMasks[1]
+ return dynamicMasked.compiledMasks[2]
}
- return dynamicMasked.compiledMasks[2]
+ return dynamicMasked.compiledMasks[3]
}}
id={name}
- mask={[internationalFormat, frenchFormat, defaultFormat]}
+ mask={[internationalFormat, internationalFrenchFormat, frenchFormat, defaultFormat]}
onAccept={(nextValue: string) => {
onChange(nextValue || undefined)
}}
- overwrite={false}
+ overwrite="shift"
type="tel"
unmask
value={value}