From 5456786ff48210db795e0252e9a04e7d447ab75c Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Wed, 31 Jul 2024 10:02:21 +0530
Subject: [PATCH] fix : icons are not getting hidden (#10509)

---
 frontend/src/Editor/Components/NumberInput.jsx   | 6 +++---
 frontend/src/Editor/Components/PasswordInput.jsx | 8 ++++----
 frontend/src/Editor/Components/TextInput.jsx     | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index cf2a5dcc2a..480ac9b381 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -140,7 +140,7 @@ export const NumberInput = function NumberInput({
     width,
     auto,
     defaultAlignment,
-    component?.definition?.styles?.iconVisibility?.value,
+    styles?.iconVisibility,
     labelRef?.current?.getBoundingClientRect()?.width,
     isMandatory,
     padding,
@@ -157,7 +157,7 @@ export const NumberInput = function NumberInput({
     height: height == 36 ? (padding == 'default' ? '36px' : '40px') : padding == 'default' ? height : height + 4,
     borderRadius: `${borderRadius}px`,
     boxShadow: boxShadow,
-    padding: styles.iconVisibility
+    padding: styles?.iconVisibility
       ? height < 20
         ? '0px 10px 0px 29px'
         : '8px 10px 8px 29px'
@@ -316,7 +316,7 @@ export const NumberInput = function NumberInput({
             _width={_width}
             labelWidth={labelWidth}
           />
-          {component?.definition?.styles?.iconVisibility?.value && !isResizing && (
+          {styles?.iconVisibility && !isResizing && (
             <IconElement
               data-cy={'text-input-icon'}
               style={{
diff --git a/frontend/src/Editor/Components/PasswordInput.jsx b/frontend/src/Editor/Components/PasswordInput.jsx
index ad9fa007fb..e5b82862c6 100644
--- a/frontend/src/Editor/Components/PasswordInput.jsx
+++ b/frontend/src/Editor/Components/PasswordInput.jsx
@@ -55,7 +55,7 @@ export const PasswordInput = function PasswordInput({
   const tinycolor = require('tinycolor2');
 
   const _width = (width / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
-
+  console.log('style---', styles);
   const computedStyles = {
     height: height == 36 ? (padding == 'default' ? '36px' : '40px') : padding == 'default' ? height : height + 4,
     borderRadius: `${borderRadius}px`,
@@ -67,7 +67,7 @@ export const PasswordInput = function PasswordInput({
         : 'var(--surfaces-surface-03)'
       : 'var(--surfaces-surface-01)',
     boxShadow: boxShadow,
-    padding: styles.iconVisibility ? '8px 10px 8px 29px' : '8px 10px 8px 10px',
+    padding: styles?.iconVisibility ? '8px 10px 8px 29px' : '8px 10px 8px 10px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     color: textColor !== '#1B1F24' ? textColor : disable || loading ? 'var(--text-disabled)' : 'var(--text-primary)',
@@ -120,7 +120,7 @@ export const PasswordInput = function PasswordInput({
     width,
     auto,
     defaultAlignment,
-    component?.definition?.styles?.iconVisibility?.value,
+    styles?.iconVisibility,
     label?.length,
     isMandatory,
     padding,
@@ -277,7 +277,7 @@ export const PasswordInput = function PasswordInput({
           _width={_width}
           labelWidth={labelWidth}
         />
-        {component?.definition?.styles?.iconVisibility?.value && !isResizing && (
+        {styles?.iconVisibility && !isResizing && (
           <IconElement
             data-cy={'text-input-icon'}
             style={{
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index ad7902d48b..b524286435 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -76,7 +76,7 @@ export const TextInput = function TextInput({
           : 'var(--surfaces-surface-03)'
         : 'var(--surfaces-surface-01)',
     boxShadow: boxShadow,
-    padding: styles.iconVisibility
+    padding: styles?.iconVisibility
       ? height < 20
         ? '0px 10px 0px 29px'
         : '8px 10px 8px 29px'
@@ -117,7 +117,7 @@ export const TextInput = function TextInput({
     width,
     auto,
     defaultAlignment,
-    component?.definition?.styles?.iconVisibility?.value,
+    styles?.iconVisibility,
     label?.length,
     isMandatory,
     padding,
@@ -271,7 +271,7 @@ export const TextInput = function TextInput({
           isMandatory={isMandatory}
           _width={_width}
         />
-        {component?.definition?.styles?.iconVisibility?.value && !isResizing && (
+        {styles?.iconVisibility && !isResizing && (
           <IconElement
             data-cy={'text-input-icon'}
             style={{