fix: textInput widget popup select arrow key design

Author: raktima-opensignlabs

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

@@ -595,8 +595,7 @@ function Placeholder(props) {
       disableDragging={
         props.isNeedSign
           ? true
-          : props.isPlaceholder &&
-              !["date", textWidget].includes(props.pos.type)
+          : props.isPlaceholder && ![textWidget].includes(props.pos.type)
             ? false
             : !isDraggingEnabled
       }

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

@@ -129,27 +129,15 @@ const WidgetNameModal = (props) => {
               >
                 <div style={{ width: "100%", position: "relative" }}>
                   <input
-                    style={{
-                      padding: "0.5rem 0.75rem",
-                      width: "92%",
-                      borderWidth: "1px",
-                      borderColor: "#d1d5db",
-                      borderTopLeftRadius: "0.375rem",
-                      borderBottomLeftRadius: "0.375rem",
-                      outline: "none",
-                      fontSize: "0.75rem",
-                      position: "relative",
-                      zIndex: 2
-                    }}
+                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
                     name="textvalidate"
                     placeholder="Enter custom expression"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    style={{ position: "absolute", left: 0, zIndex: 1 }}
-                    className="addUserInput"
+                    className="validationlist addUserInput"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}

apps/OpenSign/src/styles/AddUser.css

@@ -60,6 +60,7 @@
   color: #ffffff;
   outline: none;
 }
+
 /* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
 .resetbutton {
   background-color: #188ae2;
@@ -75,3 +76,29 @@
   outline: none;
   margin-left: 8px;
 }
+
+.validationlist {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  appearance: none;
+  -moz-appearance: "none";
+  -webkit-appearance: "none";
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAnUlEQVR4nO2QMQrCQBBFX51NbWMp2uox7Gw8h22uYEguIZNKyB0lMIElTNzdGBvdB8PC8Gces5DJ/Cxn4Aa4QM5pbsgncQF6rQYoZ3IFcPey11jByRsaqzYuctqfZo8xki3QBURuRtDpfBQ74GEsaYHN5It8wYFEhgExlj2NniwRhC7qP70gRSRrCN6JZE2BJZJvCEb2QKVvJvMvvAD2WzaK/35kGAAAAABJRU5ErkJggg==");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 1rem auto;
+}
+
+
+@media (max-width: 375px) {
+  .validationlist {
+    background-position: right 0.5rem top 50%;
+  }
+}
+
+@media (min-width:375px) and (max-width: 767px) {
+  .validationlist {
+    background-position: right 1rem top 50%;
+  }
+}