force a null value for angular forms as undefined gets forced to null anyway (#16985)

libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts

@@ -640,6 +640,46 @@ describe("ItemDetailsSectionComponent", () => {
     });
   });
 
+  describe("initFromExistingCipher", () => {
+    it("should set organizationId to null when prefillCipher.organizationId is undefined", async () => {
+      component.config.organizationDataOwnershipDisabled = true;
+      component.config.organizations = [{ id: "org1" } as Organization];
+
+      const prefillCipher = {
+        name: "Test Cipher",
+        organizationId: undefined,
+        folderId: null,
+        collectionIds: [],
+        favorite: false,
+      } as unknown as CipherView;
+
+      getInitialCipherView.mockReturnValueOnce(prefillCipher);
+
+      await component.ngOnInit();
+
+      expect(component.itemDetailsForm.controls.organizationId.value).toBeNull();
+    });
+
+    it("should preserve organizationId when prefillCipher.organizationId has a value", async () => {
+      component.config.organizationDataOwnershipDisabled = true;
+      component.config.organizations = [{ id: "org1", name: "Organization 1" } as Organization];
+
+      const prefillCipher = {
+        name: "Test Cipher",
+        organizationId: "org1",
+        folderId: null,
+        collectionIds: [],
+        favorite: false,
+      } as unknown as CipherView;
+
+      getInitialCipherView.mockReturnValueOnce(prefillCipher);
+
+      await component.ngOnInit();
+
+      expect(component.itemDetailsForm.controls.organizationId.value).toBe("org1");
+    });
+  });
+
   describe("form status when editing a cipher", () => {
     beforeEach(() => {
       component.config.mode = "edit";

libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts

@@ -4,7 +4,7 @@ import { CommonModule } from "@angular/common";
 import { Component, DestroyRef, Input, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { concatMap, firstValueFrom, map } from "rxjs";
+import { concatMap, distinctUntilChanged, firstValueFrom, map } from "rxjs";
 
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
@@ -236,6 +236,7 @@ export class ItemDetailsSectionComponent implements OnInit {
     this.itemDetailsForm.controls.organizationId.valueChanges
       .pipe(
         takeUntilDestroyed(this.destroyRef),
+        distinctUntilChanged(),
         concatMap(async () => {
           await this.updateCollectionOptions();
           this.setFormState();
@@ -314,7 +315,10 @@ export class ItemDetailsSectionComponent implements OnInit {
 
     this.itemDetailsForm.patchValue({
       name: name ? name : (this.initialValues?.name ?? ""),
-      organizationId: prefillCipher.organizationId, // We do not allow changing ownership of an existing cipher.
+      // We do not allow changing ownership of an existing cipher.
+      // Angular forms do not support `undefined` as a value for a form control,
+      // force `null` if `organizationId` is undefined.
+      organizationId: prefillCipher.organizationId ?? null,
       folderId: folderId ? folderId : (this.initialValues?.folderId ?? null),
       collectionIds: [],
       favorite: prefillCipher.favorite,