From 86445cddbe345181d2b73fc8e23010daa0da777c Mon Sep 17 00:00:00 2001
From: Gido Manders <gido.manders@42.nl>
Date: Fri, 29 Sep 2023 15:58:31 +0200
Subject: [PATCH] fix: modal with form not scrollable

When using the OpenCloseModal with onSave, the form inside the modal
content causes the modal not to be scrollable.

Fixed form layout to allow scrollable content.
---
 src/core/OpenCloseModal/OpenCloseModal.tsx                | 2 +-
 .../__snapshots__/OpenCloseModal.test.tsx.snap            | 8 ++++++--
 .../__snapshots__/DateTimeModal.test.tsx.snap             | 4 +++-
 .../__snapshots__/DateTimeInput.test.tsx.snap             | 4 +++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/core/OpenCloseModal/OpenCloseModal.tsx b/src/core/OpenCloseModal/OpenCloseModal.tsx
index 4849cbb9..506e6beb 100644
--- a/src/core/OpenCloseModal/OpenCloseModal.tsx
+++ b/src/core/OpenCloseModal/OpenCloseModal.tsx
@@ -144,7 +144,7 @@ export function OpenCloseModal(props: Props) {
       scrollable={stickyFooter}
     >
       {onSave ? (
-        <form onSubmit={onSave}>
+        <form onSubmit={onSave} className="d-flex flex-column overflow-hidden">
           {header}
           {body}
           <ModalFooter className={modalFooterClassName}>
diff --git a/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap b/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
index 7cab0009..36424815 100644
--- a/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
+++ b/src/core/OpenCloseModal/__snapshots__/OpenCloseModal.test.tsx.snap
@@ -22,7 +22,9 @@ exports[`Component: OpenCloseModal ui in progress 1`] = `
         <div
           class="modal-content"
         >
-          <form>
+          <form
+            class="d-flex flex-column overflow-hidden"
+          >
             <div
               class="modal-header"
             >
@@ -211,7 +213,9 @@ exports[`Component: OpenCloseModal ui open 1`] = `
         <div
           class="modal-content"
         >
-          <form>
+          <form
+            class="d-flex flex-column overflow-hidden"
+          >
             <div
               class="modal-header"
             >
diff --git a/src/form/DateTimeInput/DateTimeModal/__snapshots__/DateTimeModal.test.tsx.snap b/src/form/DateTimeInput/DateTimeModal/__snapshots__/DateTimeModal.test.tsx.snap
index b8c86953..bafa2731 100644
--- a/src/form/DateTimeInput/DateTimeModal/__snapshots__/DateTimeModal.test.tsx.snap
+++ b/src/form/DateTimeInput/DateTimeModal/__snapshots__/DateTimeModal.test.tsx.snap
@@ -22,7 +22,9 @@ exports[`Component: DateTimeModal ui default 1`] = `
         <div
           class="modal-content"
         >
-          <form>
+          <form
+            class="d-flex flex-column overflow-hidden"
+          >
             <div
               class="modal-body"
             >
diff --git a/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap b/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap
index f8e52625..0e2c5fcd 100644
--- a/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap
+++ b/src/form/DateTimeInput/__snapshots__/DateTimeInput.test.tsx.snap
@@ -493,7 +493,9 @@ exports[`Component: DateTimeInput ui with date picker in modal 1`] = `
         <div
           class="modal-content"
         >
-          <form>
+          <form
+            class="d-flex flex-column overflow-hidden"
+          >
             <div
               class="modal-header"
             >