fix: resolving width inconsistencies with of text widgets & default data for widgets information pop-ups in mobile display.

Author: raktima-opensignlabs

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

@@ -215,7 +215,8 @@ function Placeholder(props) {
       "company",
       "job title",
       "date",
-      "email"
+      "email",
+      textWidget
     ].includes(props.pos.type);
 
     if (widgetTypeExist) {
@@ -594,7 +595,8 @@ function Placeholder(props) {
       disableDragging={
         props.isNeedSign
           ? true
-          : props.isPlaceholder && props.pos.type !== "date"
+          : props.isPlaceholder &&
+              !["date", textWidget].includes(props.pos.type)
             ? false
             : !isDraggingEnabled
       }
@@ -652,8 +654,18 @@ function Placeholder(props) {
           style={{
             left: props.xPos(props.pos, props.isSignYourself),
             top: props.yPos(props.pos, props.isSignYourself),
-            width: "auto", //props.posWidth(props.pos, props.isSignYourself),
+            width:
+              props.pos.type === radioButtonWidget ||
+              props.pos.type === "checkbox"
+                ? "auto"
+                : props.posWidth(props.pos, props.isSignYourself),
+            //  "auto", //props.posWidth(props.pos, props.isSignYourself),
             // height: props.posHeight(props.pos, props.isSignYourself),
+            height:
+              props.pos.type === radioButtonWidget ||
+              props.pos.type === "checkbox"
+                ? "auto"
+                : props.posHeight(props.pos, props.isSignYourself),
             zIndex: "10"
           }}
           onTouchEnd={() => handleOnClickPlaceholder()}

apps/OpenSign/src/components/pdf/PlaceholderBorder.js

@@ -31,7 +31,7 @@ function PlaceholderBorder(props) {
   };
   return (
     <div
-      onMouseEnter={!isMobile && props?.setDraggingEnabled(true)}
+      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(true)}
       className="borderResize"
       style={{
         borderColor: themeColor,

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState, forwardRef, useRef } from "react";
 import {
   getMonth,
   getYear,
+  isMobile,
   onChangeInput,
   radioButtonWidget,
   range,
@@ -741,6 +742,7 @@ function PlaceholderType(props) {
           placeholder="Enter label"
           rows={1}
           value={textValue}
+          onBlur={handleInputBlur}
           onChange={(e) => {
             setTextValue(e.target.value);
             onChangeInput(
@@ -753,7 +755,11 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className="labelTextArea"
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
           style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -317,9 +317,6 @@ function PlaceHolderSign() {
 
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
-    if (item && item.text) {
-      setWidgetName(item.text);
-    }
     getSignerPos(item, monitor);
   };
 
@@ -336,7 +333,7 @@ function PlaceHolderSign() {
       let dropData = [];
       let placeHolder;
       const dragTypeValue = item?.text ? item.text : monitor.type;
-
+      console.log("option", dragTypeValue);
       if (item === "onclick") {
         const dropObj = {
           //onclick put placeholder center on pdf
@@ -487,10 +484,11 @@ function PlaceHolderSign() {
           setIsCheckbox(true);
         } else if (dragTypeValue === radioButtonWidget) {
           setIsRadio(true);
-        } 
+        }
         setWidgetType(dragTypeValue);
         setSignKey(key);
         setCurrWidgetsDetails({});
+        setWidgetName(dragTypeValue);
       }
     }
   };
@@ -1755,7 +1753,6 @@ function PlaceHolderSign() {
             </button>
           </div>
         </ModalUi>
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/styles/signature.css

@@ -837,10 +837,18 @@ option {
   justify-content: flex-start;
 }
 
-.labelTextArea {
-  font-size: 12px;
+.labelWidthDesktop {
   min-width: 100%;
   min-height: 100%;
+}
+
+.labelWidthMobile {
+  width: 100%;
+  height: 100%;
+}
+
+.labelTextArea {
+  font-size: 12px;
   border: 1px solid #007bff;
   outline: none;
   z-index: 999;
@@ -944,7 +952,7 @@ option {
   to prevent sudden quick movement (as the
   navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
-  .stickyHead + .content {
+  .stickyHead+.content {
     padding-top: 60px;
   }
 
@@ -1173,6 +1181,7 @@ option {
   font-size: 12px;
   margin-left: 5px;
 }
+
 .defaultOptions:focus {
   outline: none;
 }
@@ -1191,6 +1200,7 @@ option {
     min-width: 90%;
     overflow-y: auto;
   }
+
   .signatureBtn {
     width: max-content;
   }
@@ -1224,4 +1234,4 @@ option {
     min-width: 78%;
     overflow-y: auto;
   }
-}
+}