From 68858104c1d095fb53e29a46afe14e6dfe80a904 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 27 Feb 2020 12:44:32 +0530
Subject: [PATCH] Fix propertypane invalid control error

---
 .../blueprint/DropdownComponent.tsx            |  9 ++++++---
 .../Editor/PropertyPane/PropertyControl.tsx    |  7 ++++++-
 .../src/pages/Editor/PropertyPane/index.tsx    |  1 +
 .../src/utils/PropertyControlFactory.tsx       | 18 ++++--------------
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index a650341e63..6a18effe4f 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -62,7 +62,7 @@ const StyledSingleDropDown = styled(SingleDropDown)`
   }
 `;
 
-const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
+const StyledControlGroup = styled(ControlGroup)<{ haslabel: string }>`
   &&& > {
     label {
       ${labelStyle}
@@ -74,7 +74,7 @@ const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
     }
     span {
       max-width: ${props =>
-        props.hasLabel ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
+        props.haslabel === "true" ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
     }
   }
 `;
@@ -204,7 +204,10 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       : [];
     return (
       <DropdownContainer>
-        <StyledControlGroup fill hasLabel={!!this.props.label}>
+        <StyledControlGroup
+          fill
+          haslabel={!!this.props.label ? "true" : "false"}
+        >
           {this.props.label && (
             <Label
               className={
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index 99ce6c584b..06a8394ee1 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -55,9 +55,14 @@ const PropertyControl = (props: Props) => {
       false,
     );
     const isConvertible = CONVERTIBLE_CONTROLS.indexOf(config.controlType) > -1;
+    const className = propertyConfig.label
+      .split(" ")
+      .join("")
+      .toLowerCase();
     return (
       <ControlWrapper
-        key={config.key}
+        className={`t--property-control-${className}`}
+        key={config.id}
         orientation={
           config.controlType === "SWITCH" && !isDynamic
             ? "HORIZONTAL"
diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index 48311a5980..3a4f5a1e25 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -127,6 +127,7 @@ class PropertyPane extends Component<
                 try {
                   return (
                     <PropertyControl
+                      key={propertyControlOrSection.id}
                       propertyConfig={propertyControlOrSection}
                       widgetProperties={widgetProperties}
                       onPropertyChange={this.onPropertyChange}
diff --git a/app/client/src/utils/PropertyControlFactory.tsx b/app/client/src/utils/PropertyControlFactory.tsx
index c711efe9fd..fb76951f80 100644
--- a/app/client/src/utils/PropertyControlFactory.tsx
+++ b/app/client/src/utils/PropertyControlFactory.tsx
@@ -1,5 +1,5 @@
 import { ControlType } from "constants/PropertyControlConstants";
-import React from "react";
+import React, { Fragment } from "react";
 import {
   ControlBuilder,
   ControlProps,
@@ -32,25 +32,15 @@ class PropertyControlFactory {
         key: controlData.id,
       };
       const control = controlBuilder.buildPropertyControl(controlProps);
-      const className = controlProps.label
-        .split(" ")
-        .join("")
-        .toLowerCase();
-      return (
-        <div
-          key={controlProps.id}
-          className={`t--property-control-${className}`}
-        >
-          {control}
-        </div>
-      );
+      return control;
     } else {
       const ex: ControlCreationException = {
         message:
           "Control Builder not registered for control type " +
           controlData.controlType,
       };
-      throw ex;
+      console.log(ex.message);
+      return <Fragment />;
     }
   }