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.
42BV · Sep 29, 2023 · 86445cd · 86445cd
1 parent 714a4fa
commit 86445cd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
             >
-Original file line number
+Diff line change
@@ Expand Up / @@ -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"
                 >
@@ Expand Down @@