From b081a219a0a7d3a58e7c68ca219d084a4983e3ad Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 21 Mar 2025 14:52:41 -0300
Subject: [PATCH] fix: Improve disabled state handling in CustomInputPopover
 and InputGlobalComponent (#7213)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 (popover/index.tsx): Fix issue where input field was not disabled when disabled prop is true
🐛 (popover/index.tsx): Fix issue where placeholder was not showing when input field is disabled
🐛 (inputGlobalComponent/index.tsx): Fix issue where handleDelete function was not considering the disabled prop when deleting a key
---
 .../inputComponent/components/popover/index.tsx    | 14 ++++++++------
 .../components/inputGlobalComponent/index.tsx      |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
index d6157970a..a86574eba 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
@@ -229,7 +229,7 @@ const CustomInputPopover = ({
           className={getAnchorClassName(editNode, disabled, isFocused)}
           onClick={() => !nodeStyle && !disabled && setShowOptions(true)}
         >
-          {selectedOptions?.length > 0 ? (
+          {!disabled && selectedOptions?.length > 0 ? (
             <div className="mr-5 flex flex-wrap gap-2">
               {selectedOptions.map((option) => (
                 <OptionBadge
@@ -240,7 +240,7 @@ const CustomInputPopover = ({
                 />
               ))}
             </div>
-          ) : selectedOption?.length > 0 ? (
+          ) : !disabled && selectedOption?.length > 0 ? (
             <ShadTooltip content={selectedOption} side="left">
               <div
                 style={{
@@ -262,7 +262,7 @@ const CustomInputPopover = ({
             </ShadTooltip>
           ) : null}
 
-          {!selectedOption?.length && !selectedOptions?.length && (
+          {(!selectedOption?.length && !selectedOptions?.length) || disabled ? (
             <input
               autoComplete="off"
               onFocus={() => setIsFocused(true)}
@@ -274,7 +274,7 @@ const CustomInputPopover = ({
                 onInputLostFocus?.();
                 setIsFocused(false);
               }}
-              value={value || ""}
+              value={disabled ? "" : value || ""}
               disabled={disabled}
               required={required}
               className={getInputClassName(
@@ -285,7 +285,9 @@ const CustomInputPopover = ({
                 blockAddNewGlobalVariable,
               )}
               placeholder={
-                selectedOptions?.length > 0 || selectedOption ? "" : placeholder
+                !disabled && (selectedOptions?.length > 0 || selectedOption)
+                  ? ""
+                  : placeholder
               }
               onChange={(e) => onChange?.(e.target.value)}
               onKeyDown={(e) => {
@@ -294,7 +296,7 @@ const CustomInputPopover = ({
               }}
               data-testid={editNode ? id + "-edit" : id}
             />
-          )}
+          ) : null}
         </div>
       </PopoverAnchor>
 
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
index 12856599e..268cbfe22 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
@@ -34,7 +34,7 @@ export default function InputGlobalComponent({
   );
 
   useEffect(() => {
-    if (globalVariables) {
+    if (globalVariables && !disabled) {
       if (
         load_from_db &&
         !globalVariables.find((variable) => variable.name === value)
@@ -56,7 +56,7 @@ export default function InputGlobalComponent({
         );
       }
     }
-  }, [globalVariables, unavailableFields]);
+  }, [globalVariables, unavailableFields, disabled]);
 
   function handleDelete(key: string) {
     if (value === key && load_from_db) {