From 6b279b2a581a4106cdef39850d0032c0b81d9855 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 15 Sep 2021 09:04:19 +0200
Subject: [PATCH] Fix reference dropdown.

---
 .../reference-dropdown.component.html         |  2 +-
 .../reference-dropdown.component.ts           | 31 ++++++-------------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/frontend/app/shared/components/references/reference-dropdown.component.html b/frontend/app/shared/components/references/reference-dropdown.component.html
index 54eb47cac..0457a0837 100644
--- a/frontend/app/shared/components/references/reference-dropdown.component.html
+++ b/frontend/app/shared/components/references/reference-dropdown.component.html
@@ -1,4 +1,4 @@
-<sqx-dropdown [formControl]="control" [items]="snapshot.contentNames">
+<sqx-dropdown [formControl]="control" [items]="snapshot.contentNames" valueProperty="id">
     <ng-template let-content="$implicit" let-context="context">
         <span class="truncate" [innerHTML]="content.name | sqxHighlight:context"></span>
     </ng-template>
diff --git a/frontend/app/shared/components/references/reference-dropdown.component.ts b/frontend/app/shared/components/references/reference-dropdown.component.ts
index 40e2fe676..4ae7c513b 100644
--- a/frontend/app/shared/components/references/reference-dropdown.component.ts
+++ b/frontend/app/shared/components/references/reference-dropdown.component.ts
@@ -39,7 +39,6 @@ const NO_EMIT = { emitEvent: false };
 })
 export class ReferenceDropdownComponent extends StatefulControlComponent<State, ReadonlyArray<string> | string> implements OnChanges {
     private readonly itemCount: number;
-    private selectedId: string | undefined;
 
     @Input()
     public language: LanguageDto;
@@ -75,13 +74,13 @@ export class ReferenceDropdownComponent extends StatefulControlComponent<State,
 
         this.own(
             value$(this.control)
-                .subscribe((value: ContentName) => {
+                .subscribe((id: string) => {
                     if (this.control.enabled) {
-                        if (value && value.id) {
+                        if (id) {
                             if (this.mode === 'Single') {
-                                this.callChange(value.id);
+                                this.callChange(id);
                             } else {
-                                this.callChange([value.id]);
+                                this.callChange([id]);
                             }
                         } else if (this.mode === 'Single') {
                             this.callChange(null);
@@ -105,8 +104,6 @@ export class ReferenceDropdownComponent extends StatefulControlComponent<State,
                             const contentNames = this.createContentNames(contents);
 
                             this.next({ contents, contentNames });
-
-                            this.selectContent();
                         },
                         error: () => {
                             this.control.disable(NO_EMIT);
@@ -135,26 +132,16 @@ export class ReferenceDropdownComponent extends StatefulControlComponent<State,
 
     public writeValue(obj: any) {
         if (Types.isString(obj)) {
-            this.selectedId = obj;
-
-            this.selectContent();
+            this.selectContent(obj);
         } else if (Types.isArrayOfString(obj)) {
-            this.selectedId = obj[0];
-
-            this.selectContent();
+            this.selectContent(obj[0]);
         } else {
-            this.selectedId = undefined;
-
-            this.unselectContent();
+            this.selectContent(undefined);
         }
     }
 
-    private selectContent() {
-        this.control.setValue(this.snapshot.contentNames.find(x => x.id === this.selectedId), NO_EMIT);
-    }
-
-    private unselectContent() {
-        this.control.setValue(undefined, NO_EMIT);
+    private selectContent(value: any) {
+        this.control.setValue(value, NO_EMIT);
     }
 
     private createContentNames(contents: ReadonlyArray<ContentDto>): ReadonlyArray<ContentName> {