fix(phone-number): oldValue undefined

ovh · Nov 16, 2023 · 8098e22 · 8098e22
1 parent 9104220
commit 8098e22
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts
@@ -110,8 +110,11 @@ describe('e2e:osds-phone-number', () => {
   });
 
   it('should not parse the value as a number', async() => {
-    await setup({ attributes: { value: '06123456dfsdf2', isoCode: ODS_COUNTRY_ISO_CODE.FR }, cbkInterceptorRequest: myCbk });
-
+    await setup({
+      attributes: { value: '06123456dfsdf2', isoCode: ODS_COUNTRY_ISO_CODE.FR },
+      cbkInterceptorRequest: myCbk,
+    });
+
     expect(await el.getProperty('error')).toBe(true);
   });
 
@@ -149,6 +152,7 @@ describe('e2e:osds-phone-number', () => {
       expect(spyOdsValueChange).toHaveReceivedEventDetail({
         isoCode: 'fr',
         value: '+33655998866',
+        oldValue: '',
         validity: {
           customError: false,
           forbiddenValue: false,
@@ -171,6 +175,7 @@ describe('e2e:osds-phone-number', () => {
       expect(spyOdsValueChange).toHaveReceivedEventDetail({
         isoCode: 'fr',
         value: '0',
+        oldValue: '',
         validity: {
           customError: false,
           forbiddenValue: false,

diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx
@@ -3,7 +3,7 @@ import type { OdsPhoneNumberEvent, OdsPhoneNumberValueChangeEventDetail } from '
 import type { OdsInputValueChangeEventDetail } from '@ovhcloud/ods-component-input';
 import type { OdsSelectValueChangeEventDetail } from '@ovhcloud/ods-component-select';
 
-import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES, ODS_LOCALE, OdsLogger } from '@ovhcloud/ods-common-core';
+import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES, ODS_LOCALE, OdsLogger, OdsCreateDefaultOdsValidityState } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { ODS_INPUT_TYPE } from '@ovhcloud/ods-component-input';
 import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-component-text';
@@ -67,7 +67,9 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
     this.isoCode = this.controller.getDefaultIsoCode();
     this.locale = this.controller.getDefaultLocale();
     this.handlerLocale(this.locale);
-    this.validateValue();
+    if (this.value) {
+      this.handlerInputEvent({ value: this.value, validity: OdsCreateDefaultOdsValidityState() })
+    }
   }
 
   @Watch('locale')
@@ -121,7 +123,7 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
     this.odsValueChange.emit({
       ...event,
       value: this.formatValue(number, this.value),
-      oldValue: this.formatValue(oldNumber, event.oldValue) ,
+      oldValue: this.formatValue(oldNumber, event.oldValue),
       isoCode: this.isoCode,
       validity: {
         ...event.validity,
@@ -135,11 +137,11 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
     if (this.error || !number) {
       return defaultValue ?? undefined;
     }
-    return this.phoneUtils.format(number, PhoneNumberFormat.E164)
+    return this.phoneUtils.format(number, PhoneNumberFormat.E164);
   }
 
   @Watch('value')
-  private validateValue(): void {
+  validateValue(): void {
     this.error = !this.isValidValue(this.value);
   }
 

diff --git a/packages/components/phone-number/src/index.html b/packages/components/phone-number/src/index.html
@@ -22,7 +22,7 @@
   <osds-phone-number clearable value="0642665892"></osds-phone-number>
   <br/>
   <br/>
-  <osds-phone-number countries='["fr", "gb"]' clearable id="phoneNumber" locale="fr"></osds-phone-number>
+  <osds-phone-number countries='["fr", "gb"]' value="0642665892" clearable id="phoneNumber" locale="fr"></osds-phone-number>
 
   <p>Error</p>
   <osds-phone-number countries="all" value="0642665892jklhvl"></osds-phone-number>