From d881a66fac208207635b67e349445dde8ced852e Mon Sep 17 00:00:00 2001
From: "Ewe Seong, Yeoh" <eweseong.y@gmail.com>
Date: Thu, 30 Mar 2023 13:52:58 +0800
Subject: [PATCH] fix: add visibility styling to hidden modal

- hidden visibility would disallow hidden children to be focusable
---
 lib/src/Modal/modal.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/src/Modal/modal.scss b/lib/src/Modal/modal.scss
index 27b7d0e21..10270fe94 100644
--- a/lib/src/Modal/modal.scss
+++ b/lib/src/Modal/modal.scss
@@ -8,6 +8,8 @@ $modal-lg-width: 800px;
     height: 0;
     background-color: rgba(black, 0.6);
     transition: opacity 200ms linear;
+    transition: visibility 200ms ease-in-out;
+    visibility: hidden;
 
     > .modal-dialog {
         margin: 0;
@@ -21,6 +23,7 @@ $modal-lg-width: 800px;
 
     &.show {
         animation: fade-in-modal-container 200ms forwards;
+        visibility: visible;
     }
     &.hide {
         animation: fade-out-modal-container 400ms forwards;