diff --git a/src/app/core/data/object-updates/object-updates.service.ts b/src/app/core/data/object-updates/object-updates.service.ts
index 2fb6d47d31..c3746f0283 100644
--- a/src/app/core/data/object-updates/object-updates.service.ts
+++ b/src/app/core/data/object-updates/object-updates.service.ts
@@ -19,7 +19,7 @@ import {
   SetEditableFieldUpdateAction,
   SetValidFieldUpdateAction
 } from './object-updates.actions';
-import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';
 import {
   hasNoValue,
   hasValue,
@@ -198,8 +198,14 @@ export class ObjectUpdatesService {
    * @param url The page's URL for which the changes are saved
    * @param field An updated field for the page's object
    */
-  saveAddFieldUpdate(url: string, field: Identifiable) {
+  saveAddFieldUpdate(url: string, field: Identifiable): Observable<boolean> {
+    const update$: Observable<boolean> = this.getFieldUpdatesExclusive(url, [field]).pipe(
+      filter((fieldUpdates: FieldUpdates) => fieldUpdates[field.uuid].changeType === FieldChangeType.ADD),
+      take(1),
+      map(() => true),
+    );
     this.saveFieldUpdate(url, field, FieldChangeType.ADD);
+    return update$;
   }
 
   /**
@@ -207,8 +213,14 @@ export class ObjectUpdatesService {
    * @param url The page's URL for which the changes are saved
    * @param field An updated field for the page's object
    */
-  saveRemoveFieldUpdate(url: string, field: Identifiable) {
+  saveRemoveFieldUpdate(url: string, field: Identifiable): Observable<boolean> {
+    const update$: Observable<boolean> = this.getFieldUpdatesExclusive(url, [field]).pipe(
+      filter((fieldUpdates: FieldUpdates) => fieldUpdates[field.uuid].changeType === FieldChangeType.REMOVE),
+      take(1),
+      map(() => true),
+    );
     this.saveFieldUpdate(url, field, FieldChangeType.REMOVE);
+    return update$;
   }
 
   /**
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
index 57f8116b9c..c4b2bba36f 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
@@ -305,29 +305,28 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy {
     modalComp.submitEv = () => {
       modalComp.isPending = true;
       const isLeft = this.currentItemIsLeftItem$.getValue();
-      const addOperations = modalComp.toAdd.map((searchResult: any) => ({ type: 'add', searchResult }));
-      const removeOperations = modalComp.toRemove.map((searchResult: any) => ({ type: 'remove', searchResult }));
+      const addOperations = modalComp.toAdd.map((searchResult: ItemSearchResult) => ({ type: 'add', searchResult }));
+      const removeOperations = modalComp.toRemove.map((searchResult: ItemSearchResult) => ({ type: 'remove', searchResult }));
       observableFrom([...addOperations, ...removeOperations]).pipe(
-        concatMap(({ type, searchResult }: { type: string, searchResult: any }) => {
+        concatMap(({ type, searchResult }: { type: string, searchResult: ItemSearchResult }) => {
+          const relatedItem: Item = searchResult.indexableObject;
           if (type === 'add') {
-            const relatedItem = searchResult.indexableObject;
             return this.relationshipService.getNameVariant(this.listId, relatedItem.uuid).pipe(
-              map((nameVariant) => {
+              switchMap((nameVariant) => {
                 const update = {
-                  uuid: this.relationshipType.id + '-' + searchResult.indexableObject.uuid,
+                  uuid: `${this.relationshipType.id}-${relatedItem.uuid}`,
                   nameVariant,
                   type: this.relationshipType,
                   originalIsLeft: isLeft,
                   originalItem: this.item,
                   relatedItem,
                 } as RelationshipIdentifiable;
-                this.objectUpdatesService.saveAddFieldUpdate(this.url, update);
-                return update;
+                return this.objectUpdatesService.saveAddFieldUpdate(this.url, update);
               }),
               take(1)
             );
           } else if (type === 'remove') {
-            return this.relationshipService.getNameVariant(this.listId, searchResult.indexableObjectuuid).pipe(
+            return this.relationshipService.getNameVariant(this.listId, relatedItem.uuid).pipe(
               switchMap((nameVariant) => {
                 return this.getRelationFromId(searchResult.indexableObject).pipe(
                   map( (relationship: Relationship) => {
@@ -339,9 +338,8 @@ export class EditRelationshipListComponent implements OnInit, OnDestroy {
                       originalItem: this.item,
                       relationship,
                     } as RelationshipIdentifiable;
-                    this.objectUpdatesService.saveRemoveFieldUpdate(this.url,update);
-                    return update;
-                  })
+                    return this.objectUpdatesService.saveRemoveFieldUpdate(this.url,update);
+                  }),
                 );
               }),
               take(1)
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
index b83b93d8f1..927f7dbb48 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
@@ -5,9 +5,9 @@
         </button>
     </div>
     <div class="modal-body">
-        <ng-container *ngFor="let item of items; trackBy: trackItem">
-            <div *ngVar="(isSelectedVirtualMetadataItem(item) | async) as selected"
-                 (click)="setSelectedVirtualMetadataItem(item, !selected)"
+        <ng-container *ngFor="let itemDTO of itemDTOs$ | async; trackBy: trackItemDTO">
+            <div *ngVar="(itemDTO.isSelectedVirtualMetadataItem$ | async) as selected"
+                 (click)="setSelectedVirtualMetadataItem(itemDTO.item, !selected)"
                  class="item d-flex flex-row">
                 <div class="m-2">
                     <label>
@@ -15,9 +15,9 @@
                     </label>
                 </div>
                 <div class="flex-column">
-                    <ds-listable-object-component-loader [object]="item">
+                    <ds-listable-object-component-loader [object]="itemDTO.item">
                     </ds-listable-object-component-loader>
-                    <div *ngFor="let metadata of virtualMetadata.get(item.uuid)">
+                    <div *ngFor="let metadata of virtualMetadata.get(itemDTO.item.uuid)">
                         <div class="font-weight-bold">
                             {{metadata.metadataField}}
                         </div>
@@ -31,7 +31,7 @@
         <div class="d-flex flex-row-reverse m-2">
             <button class="btn btn-primary save"
                     (click)="save.emit()">
-                <i class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
+                <i aria-hidden="true" class="fas fa-save"></i> {{ 'item.edit.metadata.save-button' | translate }}
             </button>
         </div>
     </div>
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
index 9391df4755..b835031e30 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
@@ -61,6 +61,7 @@ describe('VirtualMetadataComponent', () => {
     comp.url = url;
     comp.leftItem = item;
     comp.rightItem = relatedItem;
+    comp.ngOnChanges();
     comp.relationshipId = relationshipId;
 
     fixture.detectChanges();
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
index 6f8991dc73..7b66f40010 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.ts
@@ -1,9 +1,18 @@
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
-import {Observable} from 'rxjs';
+import { Component, EventEmitter, Inject, Input, OnInit, Output, OnChanges, OnDestroy } from '@angular/core';
+import { Observable, Subscription, BehaviorSubject } from 'rxjs';
 import {Item} from '../../../core/shared/item.model';
 import {MetadataValue} from '../../../core/shared/metadata.models';
 import {ObjectUpdatesService} from '../../../core/data/object-updates/object-updates.service';
 import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
+import { hasValue } from '../../../shared/empty.util';
+
+interface ItemDTO {
+
+  item: Item;
+
+  isSelectedVirtualMetadataItem$: Observable<boolean>;
+
+}
 
 @Component({
   selector: 'ds-virtual-metadata',
@@ -14,7 +23,7 @@ import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
  * The component is shown when a relationship is marked to be deleted.
  * Each item has a checkbox to indicate whether its virtual metadata should be saved as real metadata.
  */
-export class VirtualMetadataComponent implements OnInit {
+export class VirtualMetadataComponent implements OnInit, OnChanges, OnDestroy {
 
   /**
    * The current url of this page
@@ -55,9 +64,9 @@ export class VirtualMetadataComponent implements OnInit {
   /**
    * Get an array of the left and the right item of the relationship to be deleted.
    */
-  get items() {
-    return [this.leftItem, this.rightItem];
-  }
+  itemDTOs$: BehaviorSubject<ItemDTO[]> = new BehaviorSubject([]);
+
+  subs: Subscription[] = [];
 
   public virtualMetadata: Map<string, VirtualMetadata[]> = new Map<string, VirtualMetadata[]>();
 
@@ -109,14 +118,33 @@ export class VirtualMetadataComponent implements OnInit {
   /**
    * Prevent unnecessary rerendering so fields don't lose focus
    */
-  trackItem(index, item: Item) {
-    return item && item.uuid;
+  trackItemDTO(index, itemDTO: ItemDTO): string {
+    return itemDTO?.item?.uuid;
   }
 
   ngOnInit(): void {
-    this.items.forEach((item) => {
-      this.virtualMetadata.set(item.uuid, this.getVirtualMetadata(item));
-    });
+    this.subs.push(this.itemDTOs$.subscribe((itemDTOs: ItemDTO[]) => {
+      itemDTOs.forEach((itemDTO: ItemDTO) => this.virtualMetadata.set(itemDTO.item.uuid, this.getVirtualMetadata(itemDTO.item)));
+    }));
+  }
+
+  ngOnChanges(): void {
+    if (hasValue(this.leftItem) && hasValue(this.rightItem)) {
+      this.itemDTOs$.next([
+        {
+          item: this.leftItem,
+          isSelectedVirtualMetadataItem$: this.isSelectedVirtualMetadataItem(this.leftItem),
+        },
+        {
+          item: this.rightItem,
+          isSelectedVirtualMetadataItem$: this.isSelectedVirtualMetadataItem(this.rightItem),
+        },
+      ]);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach((sub: Subscription) => sub.unsubscribe());
   }
 }