Fix dropdown for invalid values.

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;
 

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 = {

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,
+        &:active {
-        &:hover {
             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;
             }
         }