Merge pull request #1197 from Infineon/1189-modal-problem-with-render…

…ing-lines Modal: Fix issue with rendering lines
Infineon · Apr 26, 2024 · c30e84e · c30e84e
2 parents de8ce93 + 481ef7c
commit c30e84e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/packages/components/src/components/modal/modal.scss b/packages/components/src/components/modal/modal.scss
@@ -7,6 +7,8 @@
 
 .modal-container {
   display: none;
+  justify-content: center;
+  align-items: center;
   position: fixed;
   top: 0;
   left: 0;
@@ -19,7 +21,7 @@
 }
 
 .modal-container.open {
-  display: block;
+  display: flex;
 }
 
 .modal-overlay {
@@ -37,9 +39,6 @@
   position: absolute;
   display: flex;
   justify-content: center;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   width: 90%;
   min-height: 218px;
   background-color: #fff;

diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx
@@ -90,8 +90,8 @@ export class IfxModal {
         // Setting focus on last item and removing immediately
         // so, on tab press first element is focused
         setTimeout(() => {
-          this.getLastFocusableElement().focus();
-          this.getLastFocusableElement().blur();
+          this.getLastFocusableElement()?.focus();
+          this.getLastFocusableElement()?.blur();
         }, 0);
 
         this.ifxModalOpen.emit();