Merge pull request #2083 from OpenSignLabs/updates-20846982071

fix: handle overlapping of date modal

Author: prafull-opensignlabs

apps/OpenSign/src/components/pdf/EditTemplate.jsx

@@ -577,6 +577,7 @@ const EditTemplate = ({
                   e.target.setCustomValidity(t("input-required"))
                 }
                 onInput={(e) => e.target.setCustomValidity("")}
+                min={1}
                 required
               />
             </div>

apps/OpenSign/src/components/pdf/Placeholder.jsx

@@ -25,13 +25,13 @@ import {
 import PlaceholderType from "./PlaceholderType";
 import moment from "moment";
 import "../../styles/opensigndrive.css";
-import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { setIsShowModal } from "../../redux/reducers/widgetSlice";
 import { themeColor } from "../../constant/const";
 import { useGuidelinesContext } from "../../context/GuidelinesContext";
 import DatePicker from "react-datepicker";
+import DateWidgetModal from "../../primitives/DateWidgetModal";
 
 function Placeholder(props) {
   const { t } = useTranslation();
@@ -655,6 +655,9 @@ function Placeholder(props) {
     setIsToday(false);
     setSelectDate((prev) => ({ ...prev, date: "" }));
   };
+  const handleCloseDateModal = () => {
+    setIsDateModal(false);
+  };
   return (
     <>
       {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
@@ -923,7 +926,7 @@ function Placeholder(props) {
           </div>
         </Rnd>
       )}
-      <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
+      <DateWidgetModal isOpen={isDateModal} title={t("widget-info")}>
         <div className="text-base-content h-[100%] p-[20px]">
           <div className="flex flex-col gap-3">
             <div className="flex flex-col md:items-center md:flex-row gap-y-3">
@@ -1132,8 +1135,15 @@ function Placeholder(props) {
           >
             {t("save")}
           </button>
+          <button
+            type="button"
+            className="op-btn op-btn-ghost text-base-content ml-1"
+            onClick={() => handleCloseDateModal()}
+          >
+            {t("cancel")}
+          </button>
         </div>
-      </ModalUi>
+      </DateWidgetModal>
     </>
   );
 }

apps/OpenSign/src/pages/Form.jsx

@@ -960,6 +960,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1059,6 +1060,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1109,6 +1111,7 @@ const Forms = (props) => {
                               e.target.setCustomValidity(t("input-required"))
                             }
                             onInput={(e) => e.target.setCustomValidity("")}
+                            min={1}
                             required
                           />
                         </div>

apps/OpenSign/src/primitives/DateWidgetModal.jsx

@@ -0,0 +1,27 @@
+import "../styles/signature.css";
+import { createPortal } from "react-dom";
+
+const DateWidgetModal = ({
+  children,
+  title,
+  isOpen
+}) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div id="dateWidgetModal" className="items-center op-modal op-modal-open">
+      <div className="md:min-w-[500px] op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm">
+        {title && (
+          <h3 className="text-base-content text-left font-bold text-lg pt-[15px] px-[20px]">
+            {title}
+          </h3>
+        )}
+
+        <div>{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default DateWidgetModal;