fix: Unable to toggle JS button for table column (#14843)

app/client/src/components/propertyControls/BaseControl.tsx

@@ -30,6 +30,12 @@ class BaseControl<P extends ControlProps, S = {}> extends Component<P, S> {
   static canDisplayValueInUI(config: ControlData, value: any): boolean {
     return false;
   }
+
+  // Only applicable for JSONFormComputeControl & ComputeTablePropertyControl
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  static getInputComputedValue(value: string, widgetName: string): string {
+    return "";
+  }
 }
 
 export interface ControlBuilder<T extends ControlProps> {

app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx

@@ -95,7 +95,10 @@ class ComputeTablePropertyControl extends BaseControl<
     const tableId = this.props.widgetProperties.widgetName;
     const value =
       propertyValue && isDynamicValue(propertyValue)
-        ? this.getInputComputedValue(propertyValue, tableId)
+        ? ComputeTablePropertyControl.getInputComputedValue(
+            propertyValue,
+            tableId,
+          )
         : propertyValue
         ? propertyValue
         : defaultValue;
@@ -126,7 +129,7 @@ class ComputeTablePropertyControl extends BaseControl<
     );
   }
 
-  getInputComputedValue = (propertyValue: string, tableId: string) => {
+  static getInputComputedValue = (propertyValue: string, tableId: string) => {
     const value = `${propertyValue.substring(
       `{{${tableId}.sanitizedTableData.map((currentRow) => ( `.length,
       propertyValue.length - 4,

app/client/src/components/propertyControls/JSONFormComputeControl.tsx

@@ -178,8 +178,10 @@ export const JSToString = (js: string): string => {
 };
 
 class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
-  getInputComputedValue = (propertyValue: string) => {
+  static getInputComputedValue = (
-    const { widgetName } = this.props.widgetProperties;
+    propertyValue: string,
+    widgetName: string,
+  ) => {
     const { prefixTemplate, suffixTemplate } = getBindingTemplate(widgetName);
 
     const value = propertyValue.substring(
@@ -236,7 +238,11 @@ class JSONFormComputeControl extends BaseControl<JSONFormComputeControlProps> {
 
     const value = (() => {
       if (propertyValue && isDynamicValue(propertyValue)) {
-        return this.getInputComputedValue(propertyValue);
+        const { widgetName } = this.props.widgetProperties;
+        return JSONFormComputeControl.getInputComputedValue(
+          propertyValue,
+          widgetName,
+        );
       }
 
       return propertyValue || defaultValue;

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -480,22 +480,39 @@ const PropertyControl = memo((props: Props) => {
       config.controlType,
     );
 
+    const customJSControl = getCustomJSControl();
+
     let isToggleDisabled = false;
     if (
-      isDynamic && // JS mode is enabled
+      isDynamic // JS toggle button is ON
-      propertyValue !== "" && // value is not empty
-      !canDisplayValueInUI?.(config, propertyValue) // value can't be represented in UI mode
     ) {
-      isToggleDisabled = true;
+      if (
-    }
+        // Check if value is not empty
+        propertyValue !== undefined &&
+        propertyValue !== ""
+      ) {
+        let value = propertyValue;
+        // extract out the value from binding, if there is custom JS control (Table & JSONForm widget)
+        if (customJSControl && isDynamicValue(value)) {
+          const extractValue = PropertyControlFactory.inputComputedValueMap.get(
+            customJSControl,
+          );
+          if (extractValue)
+            value = extractValue(value, widgetProperties.widgetName);
+        }
 
-    // Checks if the value is same as the one defined in theme stylesheet.
+        // disable button if value can't be represented in UI mode
-    if (
+        if (!canDisplayValueInUI?.(config, value)) isToggleDisabled = true;
-      typeof propertyStylesheetValue === "string" &&
+      }
-      THEME_BINDING_REGEX.test(propertyStylesheetValue) &&
+
-      propertyStylesheetValue === propertyValue
+      // Enable button if the value is same as the one defined in theme stylesheet.
-    ) {
+      if (
-      isToggleDisabled = false;
+        typeof propertyStylesheetValue === "string" &&
+        THEME_BINDING_REGEX.test(propertyStylesheetValue) &&
+        propertyStylesheetValue === propertyValue
+      ) {
+        isToggleDisabled = false;
+      }
     }
 
     try {
@@ -571,7 +588,7 @@ const PropertyControl = memo((props: Props) => {
               theme: props.theme,
             },
             isDynamic,
-            getCustomJSControl(),
+            customJSControl,
             additionAutocomplete,
             hideEvaluatedValue(),
           )}

app/client/src/utils/PropertyControlFactory.tsx

@@ -12,14 +12,20 @@ class PropertyControlFactory {
     ControlType,
     typeof BaseControl.canDisplayValueInUI
   > = new Map();
+  static inputComputedValueMap: Map<
+    ControlType,
+    typeof BaseControl.getInputComputedValue
+  > = new Map();
 
   static registerControlBuilder(
     controlType: ControlType,
     controlBuilder: ControlBuilder<ControlProps>,
     validationFn: typeof BaseControl.canDisplayValueInUI,
+    inputComputedValueFn: typeof BaseControl.getInputComputedValue,
   ) {
     this.controlMap.set(controlType, controlBuilder);
     this.controlUIToggleValidation.set(controlType, validationFn);
+    this.inputComputedValueMap.set(controlType, inputComputedValueFn);
   }
 
   static createControl(

app/client/src/utils/PropertyControlRegistry.tsx

@@ -20,6 +20,7 @@ class PropertyControlRegistry {
             },
           },
           Control.canDisplayValueInUI,
+          Control.getInputComputedValue,
         );
       },
     );