fix(components/phone-field): phone field hint text uses generic chara…

…cters to display the phone number format (#2190)
blackbaud · Mar 28, 2024 · 4b0efb6 · 4b0efb6
1 parent aba79e1
commit 4b0efb6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.spec.ts b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.spec.ts
@@ -2245,20 +2245,20 @@ describe('Phone Field Component', () => {
         .querySelector('.sky-input-box-hint-text')
         .textContent.trim();
 
-      expect(hintText).toEqual('Use the format (201) 555-0123.');
+      expect(hintText).toEqual('Use the format (###) ###-####.');
     }));
 
     it('should show hint text for the the consumer provided date format', fakeAsync(() => {
       detectChangesAndTick(fixture);
 
-      setCountry('Canada', fixture);
+      setCountry('United Kingdom', fixture);
 
       const inputBoxEl = fixture.nativeElement.querySelector('sky-input-box');
       const hintText = inputBoxEl
         .querySelector('.sky-input-box-hint-text')
         .textContent.trim();
 
-      expect(hintText).toEqual('Use the format (506) 234-5678.');
+      expect(hintText).toEqual('Use the format #### ### ####.');
     }));
 
     it('should allow consumer to provide hint text along with the format hint text', fakeAsync(() => {
@@ -2271,7 +2271,7 @@ describe('Phone Field Component', () => {
         .textContent.trim();
 
       expect(hintText).toEqual(
-        'Use the format (201) 555-0123. Enter a phone number.',
+        'Use the format (###) ###-####. Enter a phone number.',
       );
     }));
 

diff --git a/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts b/libs/components/phone-field/src/lib/modules/phone-field/phone-field.component.ts
@@ -500,7 +500,7 @@ export class SkyPhoneFieldComponent implements OnDestroy, OnInit {
       this.inputBoxHostSvc?.setHintText(
         this.#appFormat.formatText(
           this.#phoneNumberFormatHintTextTemplateString,
-          this.#_selectedCountry?.exampleNumber,
+          this.#_selectedCountry?.exampleNumber?.replace(/\d/g, '#'),
         ),
       );
     }