From 8b75c38c6a3ee7c4c7b2916ea2db17c495f61193 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 24 Aug 2022 20:07:29 +0200
Subject: [PATCH] Fix dropdown for invalid values.

---
 .../angular/forms/editors/dropdown.component.ts |  4 ++--
 .../angular/forms/editors/dropdown.stories.ts   |  7 +++++++
 frontend/src/app/theme/_forms.scss              | 17 +++++++++++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/framework/angular/forms/editors/dropdown.component.ts b/frontend/src/app/framework/angular/forms/editors/dropdown.component.ts
index bbd6a774a..d916042ab 100644
--- a/frontend/src/app/framework/angular/forms/editors/dropdown.component.ts
+++ b/frontend/src/app/framework/angular/forms/editors/dropdown.component.ts
@@ -227,6 +227,8 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
     public selectIndex(suggestedIndex: number, fromUserAction: boolean) {
         const items = this.snapshot.suggestedItems || [];
 
+        const selectedItem = items[suggestedIndex];
+
         if (suggestedIndex < 0) {
             suggestedIndex = 0;
         }
@@ -235,8 +237,6 @@ export class DropdownComponent extends StatefulControlComponent<State, ReadonlyA
             suggestedIndex = items.length - 1;
         }
 
-        const selectedItem = items[suggestedIndex];
-
         if (fromUserAction) {
             let selectedValue = selectedItem;
 
diff --git a/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts b/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts
index 950db8576..f41c9a888 100644
--- a/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts
+++ b/frontend/src/app/framework/angular/forms/editors/dropdown.stories.ts
@@ -123,6 +123,13 @@ Default.args = {
     model: 'B',
 };
 
+export const WrongModel = Template.bind({});
+
+WrongModel.args = {
+    items: ['A', 'B', 'C'],
+    model: 'D',
+};
+
 export const Empty = Template.bind({});
 
 Empty.args = {
diff --git a/frontend/src/app/theme/_forms.scss b/frontend/src/app/theme/_forms.scss
index 4c2769336..7e9d5c492 100644
--- a/frontend/src/app/theme/_forms.scss
+++ b/frontend/src/app/theme/_forms.scss
@@ -159,6 +159,8 @@
     }
 
     &-item {
+        transition: background-color .1s ease-in;
+
         & {
             padding: .5rem .75rem;
         }
@@ -172,8 +174,7 @@
         }
 
         &.active,
-        &:active,
-        &:hover {
+        &:active {
             color: $color-white;
 
             .text-muted {
@@ -192,13 +193,21 @@
             &.separated {
                 border-color: $color-theme-brand;
             }
+
+            &:hover {
+                background: $color-theme-brand-dark;
+    
+                &.separated {
+                    border-color: $color-theme-brand-dark;
+                }
+            }
         }
 
         &:hover {
-            background: $color-theme-brand;
+            background: $color-border;
 
             &.separated {
-                border-color: $color-theme-brand;
+                border-color: $color-border;
             }
         }