From dbbb19e37f5cb1a105846675fa6b85b6d13ea2a9 Mon Sep 17 00:00:00 2001
From: Yura <yura.bondarenko@atmire.com>
Date: Tue, 2 Nov 2021 18:13:12 +0100
Subject: [PATCH 1/2] Fix modal backdrop animation

---
 src/styles/_global-styles.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 2098fc4f74..f7f38f77cd 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -59,3 +59,18 @@ ds-admin-sidebar {
     display: none;
   }
 }
+
+ngb-modal-backdrop {
+  // ng-bootsrap animates opacity, causing the fully opaque background to flash briefly before the transition starts
+  // animating background-color between transparent & a RGBA color instead looks smoother
+  &.fade {
+    opacity: 1 !important;
+    background-color: transparent;
+    transition: background-color 0.15s linear;
+
+    &.show {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+

From 8d8b24f00a7803bef3cfac5314bea20035386ad9 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Tue, 23 Nov 2021 15:19:23 +0100
Subject: [PATCH 2/2] Fix scrolling background when auto-focusing in modal

---
 .../dso-selector/dso-selector/dso-selector.component.html       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index ab2ea6cd8b..4b46d3bc3f 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -3,7 +3,7 @@
            class="form-control"
            (click)="$event.stopPropagation();"
            placeholder="{{'dso-selector.placeholder' | translate: { type: typesString } }}"
-           [formControl]="input" dsAutoFocus (keyup.enter)="selectSingleResult()">
+           [formControl]="input" ngbAutofocus (keyup.enter)="selectSingleResult()">
 </div>
 <div class="dropdown-divider"></div>
 <div class="scrollable-menu list-group">