fix(watt): set Signal inside untracked to avoid potential re-run of…

… `effect` (#3573)

* chore: update dependencies

* chore(dh): update mock

* fix(dh): use object destructuring

* fix(dh): format code

* fix(dh): remove type assertion

* fix(dh): organize imports

* fix(watt): set Signal inside `untracked` function

* fix(dh): drop effect flag

* chore: Update PRODUCTION_DEPENDENCIES.md

* chore: trigger CI

* chore(watt): update comment

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

PRODUCTION_DEPENDENCIES.md

@@ -18,10 +18,10 @@
 | [@apollo/client](https://github.com/apollographql/apollo-client) | 3.8.1 | MIT |
 | [@azure/msal-angular](https://github.com/AzureAD/microsoft-authentication-library-for-js) | 3.0.16 | MIT |
 | [@azure/msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js) | 3.13.0 | MIT |
-| [@maskito/angular](https://github.com/taiga-family/maskito) | 2.3.0 | Apache-2.0 |
-| [@maskito/core](https://github.com/taiga-family/maskito) | 2.3.0 | Apache-2.0 |
-| [@maskito/kit](https://github.com/taiga-family/maskito) | 2.3.0 | Apache-2.0 |
-| [@maskito/phone](https://github.com/taiga-family/maskito) | 2.3.0 | Apache-2.0 |
+| [@maskito/angular](https://github.com/taiga-family/maskito) | 2.5.0 | Apache-2.0 |
+| [@maskito/core](https://github.com/taiga-family/maskito) | 2.5.0 | Apache-2.0 |
+| [@maskito/kit](https://github.com/taiga-family/maskito) | 2.5.0 | Apache-2.0 |
+| [@maskito/phone](https://github.com/taiga-family/maskito) | 2.5.0 | Apache-2.0 |
 | [@microsoft/applicationinsights-angularplugin-js](https://github.com/microsoft/applicationinsights-angularplugin-js) | 15.3.2 | MIT |
 | [@microsoft/applicationinsights-web](https://github.com/microsoft/ApplicationInsights-JS) | 3.3.2 | MIT |
 | [@ngneat/transloco](https://github.com/ngneat/transloco) | 5.0.7 | MIT |
@@ -43,7 +43,7 @@
 | [highlight.js](https://github.com/highlightjs/highlight.js) | 11.10.0 | BSD-3-Clause |
 | [include-media](https://github.com/eduardoboucas/include-media) | 2.0.0 | MIT |
 | [jwt-decode](https://github.com/auth0/jwt-decode) | 4.0.0 | MIT |
-| [libphonenumber-js](git+https://gitlab.com/catamphetamine/libphonenumber-js) | 1.10.60 | MIT |
+| [libphonenumber-js](git+https://gitlab.com/catamphetamine/libphonenumber-js) | 1.11.9 | MIT |
 | [lottie-web](https://github.com/airbnb/lottie-web) | 5.12.2 | MIT |
 | [marked](https://github.com/markedjs/marked) | 12.0.2 | MIT |
 | [mermaid](https://github.com/mermaid-js/mermaid) | 10.9.1 | MIT |

libs/dh/market-participant/actors/feature-actors/src/lib/edit/dh-actors-edit-actor-modal.component.ts

@@ -120,22 +120,19 @@ export class DhActorsEditActorModalComponent {
         : this.actorForm.controls.name.disable();
     });
 
-    effect(
-      () => {
-        const actorEditableFields = this.actorEditableFieldsQuery.data()?.actorById;
-        if (!actorEditableFields) return;
-
-        const { name, contact } = actorEditableFields;
-
-        this.actorForm.patchValue({
-          name,
-          departmentName: contact?.name,
-          departmentPhone: contact?.phone,
-          departmentEmail: contact?.email,
-        });
-      },
-      { allowSignalWrites: true }
-    );
+    effect(() => {
+      const actorEditableFields = this.actorEditableFieldsQuery.data()?.actorById;
+      if (!actorEditableFields) return;
+
+      const { name, contact } = actorEditableFields;
+
+      this.actorForm.patchValue({
+        name,
+        departmentName: contact?.name,
+        departmentPhone: contact?.phone,
+        departmentEmail: contact?.email,
+      });
+    });
   }
 
   open() {

libs/dh/shared/data-access-mocks/src/lib/market-participant.ts

@@ -138,8 +138,9 @@ function getActorEditableFields() {
         name: 'Test Actor 1',
         organization: {
           __typename: 'Organization',
+          id: 'organization-id-1',
           domain: 'fake-domain.dk',
-        } as Organization,
+        },
         contact: {
           __typename: 'ActorContactDto',
           name: 'Test Department',

libs/watt/src/lib/components/phone-field/watt-phone-field.component.ts

@@ -25,6 +25,7 @@ import {
   inject,
   input,
   signal,
+  untracked,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -67,11 +68,12 @@ function phoneValidator(countryCode: CountryCode): ValidatorFn {
   standalone: true,
   encapsulation: ViewEncapsulation.None,
   imports: [
-    WattFieldComponent,
-    WattIconComponent,
-    MatSelectModule,
     ReactiveFormsModule,
+    MatSelectModule,
     MaskitoDirective,
+
+    WattFieldComponent,
+    WattIconComponent,
     WattFieldErrorComponent,
   ],
   providers: [
@@ -122,14 +124,14 @@ function phoneValidator(countryCode: CountryCode): ValidatorFn {
 })
 export class WattPhoneFieldComponent implements ControlValueAccessor, OnInit {
   /** @ignore */
-  readonly countries = [
+  readonly countries: Contry[] = [
     { countryIsoCode: 'DK', icon: 'custom-flag-da', phoneExtension: '+45' },
     { countryIsoCode: 'SE', icon: 'custom-flag-se', phoneExtension: '+46' },
     { countryIsoCode: 'NO', icon: 'custom-flag-no', phoneExtension: '+47' },
     { countryIsoCode: 'DE', icon: 'custom-flag-de', phoneExtension: '+49' },
     { countryIsoCode: 'FI', icon: 'custom-flag-fi', phoneExtension: '+358' },
     { countryIsoCode: 'PL', icon: 'custom-flag-pl', phoneExtension: '+48' },
-  ] as Contry[];
+  ];
 
   formControl = input.required<FormControl>();
   label = input<string>();
@@ -161,12 +163,22 @@ export class WattPhoneFieldComponent implements ControlValueAccessor, OnInit {
   /** @ignore */
   writeValue(value: string): void {
     if (value) {
-      const country = this.countries.find((x) => value.startsWith(x.phoneExtension));
+      const country = this.countries.find((country) => value.startsWith(country.phoneExtension));
+
       if (country) {
-        this.setCountry(country);
+        // Exclude Signal from being tracked
+        // in case the parent component sets the value inside an `effect`.
+        // Without this, updating the Signal internaly triggers the parrent `effect` to re-run.
+        // Note: Revisit once v19 is released because the `effect` API has changed
+        // significantly and this might not be necessary anymore
+        untracked(() => {
+          this.setCountry(country);
+        });
+
         value = maskitoTransform(value, this.mask);
       }
     }
+
     this.value = value;
   }
 
@@ -196,9 +208,12 @@ export class WattPhoneFieldComponent implements ControlValueAccessor, OnInit {
   }
 
   /** @ignore */
-  selectedContry(event: MatSelectChange) {
-    const country = this.countries.find((contry) => contry.countryIsoCode === event.value);
-    if (!country) throw new Error('Prefix not found');
+  selectedContry({ value }: MatSelectChange) {
+    const country = this.countries.find((contry) => contry.countryIsoCode === value);
+
+    if (!country) {
+      throw new Error('Prefix not found');
+    }
 
     this.setCountry(country);
     this.formControl().reset();

package.json

@@ -77,10 +77,10 @@
     "@apollo/client": "3.8.1",
     "@azure/msal-angular": "3.0.16",
     "@azure/msal-browser": "3.13.0",
-    "@maskito/angular": "2.3.0",
-    "@maskito/core": "2.3.0",
-    "@maskito/kit": "2.3.0",
-    "@maskito/phone": "2.3.0",
+    "@maskito/angular": "2.5.0",
+    "@maskito/core": "2.5.0",
+    "@maskito/kit": "2.5.0",
+    "@maskito/phone": "2.5.0",
     "@microsoft/applicationinsights-angularplugin-js": "15.3.2",
     "@microsoft/applicationinsights-web": "3.3.2",
     "@ngneat/transloco": "5.0.7",
@@ -102,7 +102,7 @@
     "highlight.js": "^11.9.0",
     "include-media": "2.0.0",
     "jwt-decode": "4.0.0",
-    "libphonenumber-js": "1.10.60",
+    "libphonenumber-js": "1.11.9",
     "lottie-web": "5.12.2",
     "marked": "^12.0.0",
     "mermaid": "^10.6.0",