Skip to content

Commit bbe73dd

Browse files
tumms2021389tumms2021389
authored
fix: SDK-R Phone number can't clear client validation error (#361)
1 parent 9226685 commit bbe73dd

File tree

7 files changed

+35
-33
lines changed

7 files changed

+35
-33
lines changed

‎packages/react-sdk-components/src/components/field/Phone/Phone.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import MuiPhoneNumber from 'material-ui-phone-number';
2+
import { useEffect, useState } from 'react';
23

34
import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
45
import { PConnFieldProps } from '../../../types/PConnProps';
6+
import handleEvent from '../../helpers/event-utils';
57

68
interface PhoneProps extends PConnFieldProps {
79
// If any, enter additional props that only exist on Phone here
@@ -12,21 +14,29 @@ export default function Phone(props: PhoneProps) {
1214
const FieldValueList = getComponentFromMap('FieldValueList');
1315

1416
const {
17+
getPConnect,
1518
label,
1619
required,
1720
disabled,
1821
value = '',
1922
validatemessage,
2023
status,
2124
onChange,
22-
onBlur,
2325
readOnly,
2426
testId,
2527
helperText,
2628
displayMode,
2729
hideLabel,
2830
placeholder
2931
} = props;
32+
33+
const pConn = getPConnect();
34+
const actions = pConn.getActionsApi();
35+
const propName = (pConn.getStateProps() as any).value;
36+
37+
const [inputValue, setInputValue] = useState(value);
38+
useEffect(() => setInputValue(value), [value]);
39+
3040
const helperTextToDisplay = validatemessage || helperText;
3141

3242
let testProp = {};
@@ -69,15 +79,14 @@ export default function Phone(props: PhoneProps) {
6979
}
7080

7181
const handleChange = inputVal => {
72-
let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
73-
phoneValue = `+${phoneValue}`;
74-
onChange({ value: phoneValue });
82+
setInputValue(inputVal);
7583
};
7684

7785
const handleBlur = event => {
7886
const phoneValue = event?.target?.value;
79-
event.target.value = `+${phoneValue && phoneValue.replace(/\D+/g, '')}`;
80-
onBlur(event);
87+
let phoneNumber = phoneValue.split(' ').slice(1).join();
88+
phoneNumber = phoneNumber ? `+${phoneValue && phoneValue.replace(/\D+/g, '')}` : '';
89+
handleEvent(actions, 'changeNblur', propName, phoneNumber);
8190
};
8291

8392
return (
@@ -94,7 +103,7 @@ export default function Phone(props: PhoneProps) {
94103
onBlur={!readOnly ? handleBlur : undefined}
95104
error={status === 'error'}
96105
label={label}
97-
value={value}
106+
value={inputValue}
98107
InputProps={{ ...testProp }}
99108
/>
100109
);

‎packages/react-sdk-components/tests/common.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,19 @@ const calculateCoverage = async (page, outputDir) => {
5959
await page.close();
6060
};
6161

62+
const enterPhoneNumber = async (phone, number) => {
63+
const phoneInput = phone.locator('input');
64+
await phoneInput.click();
65+
await phoneInput.pressSequentially(number);
66+
};
67+
6268
module.exports = {
6369
launchPortal,
6470
launchEmbedded,
6571
launchSelfServicePortal,
6672
login,
6773
getAttributes,
6874
getFutureDate,
69-
calculateCoverage
75+
calculateCoverage,
76+
enterPhoneNumber
7077
};

‎packages/react-sdk-components/tests/e2e/Digv2/ComplexFields/EmbeddedData.spec.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,7 @@ test.describe('E2E test', () => {
127127
await phone.locator('button').click();
128128
/** Selecting the country code */
129129
await page.locator('text=United States+1 >> nth=0').click();
130-
await phone.locator('input').click();
131-
await phone.locator('input').pressSequentially('6175551212');
130+
await common.enterPhoneNumber(phone, '6175551212');
132131

133132
/** Creating second row by clicking on `+Add` button */
134133
await page.locator('a:has-text("+ Add")').click();
@@ -143,8 +142,7 @@ test.describe('E2E test', () => {
143142
await phone.locator('button').click();
144143
/** Selecting the country code */
145144
await page.locator('text=United States+1 >> nth=0').click();
146-
await phone.locator('input').click();
147-
await phone.locator('input').pressSequentially('6175451212');
145+
await common.enterPhoneNumber(phone, '6175451212');
148146

149147
await page.locator('button:has-text("Next")').click();
150148

@@ -241,8 +239,7 @@ test.describe('E2E test', () => {
241239
await phone.locator('button').click();
242240
/** Selecting the country code */
243241
await page.locator('text=United States+1 >> nth=0').click();
244-
await phone.locator('input').click();
245-
await phone.locator('input').pressSequentially('6175551212');
242+
await common.enterPhoneNumber(phone, '6175551212');
246243

247244
const country = modal.locator('div[data-test-id="59716c97497eb9694541f7c3d37b1a4d"]');
248245
await country.click();
@@ -335,8 +332,7 @@ test.describe('E2E test', () => {
335332
await phone.locator('button').click();
336333
/** Selecting the country code */
337334
await page.locator('text=United States+1 >> nth=0').click();
338-
await phone.locator('input').click();
339-
await phone.locator('input').pressSequentially('6175551212');
335+
await common.enterPhoneNumber(phone, '6175551212');
340336

341337
let countryName = page.locator('div[data-test-id="59716c97497eb9694541f7c3d37b1a4d"]');
342338
await countryName.click();
@@ -355,8 +351,7 @@ test.describe('E2E test', () => {
355351
await phone.locator('button').click();
356352
/** Selecting the country code */
357353
await page.locator('text=United States+1 >> nth=0').click();
358-
await phone.locator('input').click();
359-
await phone.locator('input').pressSequentially('6175451212');
354+
await common.enterPhoneNumber(phone, '6175451212');
360355

361356
countryName = page.locator('div[data-test-id="59716c97497eb9694541f7c3d37b1a4d"] >> nth=1');
362357
await countryName.click();

‎packages/react-sdk-components/tests/e2e/Digv2/FormFields/Phone.spec.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,15 @@ test.describe('E2E test', () => {
9393
await countrySelector.click();
9494
await page.locator('text=United States+1 >> nth=0').click();
9595
const editablePhoneInput = editablePhone.locator('input');
96-
await editablePhoneInput.click();
97-
await editablePhoneInput.pressSequentially('6175551212');
96+
await common.enterPhoneNumber(editablePhone, '6175551212');
9897

9998
/** Validation tests */
10099
const validationMsg = 'Enter a valid phone number';
101100
await editablePhoneInput.clear();
102101
await countrySelector.click();
103102
await page.locator('text=United States+1 >> nth=0').click();
104-
await editablePhoneInput.click();
105103
/** Entering an invalid Phone number */
106-
await editablePhoneInput.pressSequentially('61');
104+
await common.enterPhoneNumber(editablePhone, '61');
107105
await editablePhoneInput.blur();
108106
/** Expecting an error for Invalid phone number */
109107
await expect(page.locator(`p:has-text("${validationMsg}")`)).toBeVisible();
@@ -112,8 +110,7 @@ test.describe('E2E test', () => {
112110
await editablePhoneInput.clear();
113111
await countrySelector.click();
114112
await page.locator('text=United States+1 >> nth=0').click();
115-
await editablePhoneInput.click();
116-
await editablePhoneInput.pressSequentially('6175551212');
113+
await common.enterPhoneNumber(editablePhone, '6175551212');
117114

118115
await editablePhoneInput.blur();
119116
/** Expecting the invalid Phone number error be no longer present */

‎packages/react-sdk-components/tests/e2e/Digv2/ViewTemplates/Confirmation.spec.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,7 @@ test.describe('E2E test', () => {
4747
const countrySelector = phone.locator('button');
4848
await countrySelector.click();
4949
await page.locator('text=United States+1 >> nth=0').click();
50-
const phoneInput = phone.locator('input');
51-
await phoneInput.click();
52-
await phoneInput.pressSequentially('6175551212');
50+
await common.enterPhoneNumber(phone, '6175551212');
5351

5452
await page.locator('button:has-text("submit")').click();
5553

‎packages/react-sdk-components/tests/e2e/MediaCo/embedded.spec.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,7 @@ test.describe('E2E test', () => {
6060
const countrySelector = phone.locator('button');
6161
await countrySelector.click();
6262
await page.locator('text=United States+1 >> nth=0').click();
63-
const phoneInput = phone.locator('input');
64-
await phoneInput.click();
65-
await phoneInput.pressSequentially('6175551212');
63+
await common.enterPhoneNumber(phone, '6175551212');
6664

6765
await page.locator('button:has-text("next")').click();
6866

‎packages/react-sdk-components/tests/e2e/MediaCo/portal.spec.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,7 @@ test.describe('E2E test', () => {
7272
const countrySelector = phone.locator('button');
7373
await countrySelector.click();
7474
await page.locator('text=United States+1 >> nth=0').click();
75-
const phoneInput = phone.locator('input');
76-
await phoneInput.click();
77-
await phoneInput.pressSequentially('6175551212');
75+
await common.enterPhoneNumber(phone, '6175551212');
7876

7977
await page.locator('button:has-text("submit")').click();
8078

0 commit comments

Comments
 (0)