From 4ca1f5b02ed6eadde7a6f83b702d222f2d326cae Mon Sep 17 00:00:00 2001
From: "vicky_primathon.in" <vicky.bansal@primathon.in>
Date: Wed, 3 Jun 2020 10:14:11 +0530
Subject: [PATCH] delete icon placement fix, spacing in auto complete for
 lightning menu icon added

---
 .../DynamicAutocompleteInput.tsx              | 33 ++++++++++++++-----
 .../LightningMenu/LightningMenuTrigger.tsx    | 27 ++++++++++-----
 .../ColumnActionSelectorControl.tsx           | 11 +++++--
 .../propertyControls/KeyValueComponent.tsx    |  3 +-
 4 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
index b7ac5a39cd..d539be32d4 100644
--- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
+++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
@@ -135,6 +135,8 @@ const Wrapper = styled.div<{
   disabled?: boolean;
   setMaxHeight?: boolean;
 }>`
+  width: ${props =>
+    props.editorTheme === THEMES.DARK ? "calc(100% - 32px)" : "100%"};
   ${props =>
     props.singleLine && props.isFocused
       ? `
@@ -142,7 +144,7 @@ const Wrapper = styled.div<{
   position: absolute;
   right: 0;
   left: 0;
-  top: 0;
+  top: 0;  
   `
       : `z-index: 0; position: relative`}
   background-color: ${props =>
@@ -256,6 +258,9 @@ const DynamicAutocompleteInputWrapper = styled.div<{
 }>`
   width: 100%;
   height: 100%;
+  border-radius: 4px;
+  box-sizing: border-box;
+  background: ${props => (props.skin === Skin.DARK ? "#272822" : "none")};
   flex: 1;
   position: relative;
   border: ${props =>
@@ -544,10 +549,16 @@ class DynamicAutocompleteInput extends Component<Props, State> {
   };
 
   updatePropertyValue(value: string, cursor?: number) {
-    this.editor.setValue(value);
+    if (value) {
+      this.editor.setValue(value);
+    }
     this.editor.focus();
     if (cursor === undefined) {
-      cursor = value.length - 2;
+      if (value) {
+        cursor = value.length - 2;
+      } else {
+        cursor = 1;
+      }
     }
     this.editor.setCursor({
       line: 0,
@@ -558,6 +569,14 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     });
   }
 
+  onMouseOver = () => {
+    this.setState({ isHover: true });
+  };
+
+  onMouseOut = () => {
+    this.setState({ isHover: false });
+  };
+
   render() {
     const {
       input,
@@ -577,12 +596,8 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     }
     return (
       <DynamicAutocompleteInputWrapper
-        onMouseOver={() => {
-          this.setState({ isHover: true });
-        }}
-        onMouseOut={() => {
-          this.setState({ isHover: false });
-        }}
+        onMouseOver={this.onMouseOver}
+        onMouseOut={this.onMouseOut}
         theme={this.props.theme}
         skin={this.props.theme === "DARK" ? Skin.DARK : Skin.LIGHT}
         isActive={(this.state.isFocused && !hasError) || this.state.isOpened}
diff --git a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
index b32bfa6f7b..db30966bdf 100644
--- a/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/LightningMenuTrigger.tsx
@@ -47,18 +47,29 @@ export default class LightningMenuTrigger extends React.Component<
   componentDidUpdate(prevProps: LightningMenuTriggerProps) {
     const { menuState } = this.state;
     const { isHover, isFocused, isClosed } = this.props;
+    // if (menuState !== "none") {
+    //   console.log(
+    //     "isHover, isFocused, isClosed",
+    //     isHover,
+    //     isFocused,
+    //     isClosed,
+    //     menuState,
+    //   );
+    // }
     if (menuState === "none" && isHover) {
       this.setState({ menuState: "hover" });
-    } else if (menuState === "active" && isFocused) {
+    } else if (
+      (menuState === "active" && isFocused) ||
+      (menuState === "none" && isFocused)
+    ) {
       this.setState({ menuState: "default" });
-    } else if (menuState === "default" && !isFocused) {
+    } else if (
+      (menuState === "default" && !isFocused) ||
+      (menuState === "hover" && !isHover) ||
+      (menuState === "active" && isClosed) ||
+      (menuState !== "none" && !isHover && !isFocused && isClosed)
+    ) {
       this.setState({ menuState: "none" });
-    } else if (menuState === "hover" && !isHover) {
-      this.setState({ menuState: "none" });
-    } else if (menuState === "active" && isClosed) {
-      this.setState({ menuState: "none" });
-    } else if (menuState === "none" && isFocused) {
-      this.setState({ menuState: "default" });
     }
   }
 
diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index 8deb783940..33dfe01b26 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -17,11 +17,16 @@ export interface ColumnAction {
 const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
   padding: 5px 0px;
   position: absolute;
-  right: 8px;
+  right: 0px;
   cursor: pointer;
   top: 0px;
 `;
 
+const InputTextWrapper = styled.div`
+  margin-bottom: 8px;
+  width: calc(100% - 30px);
+`;
+
 const Wrapper = styled.div`
   margin-bottom: 8px;
 `;
@@ -41,7 +46,7 @@ class ColumnActionSelectorControl extends BaseControl<
                   position: "relative",
                 }}
               >
-                <Wrapper>
+                <InputTextWrapper>
                   <InputText
                     label={columnAction.label}
                     value={columnAction.label}
@@ -51,7 +56,7 @@ class ColumnActionSelectorControl extends BaseControl<
                     )}
                     isValid={true}
                   />
-                </Wrapper>
+                </InputTextWrapper>
                 <Wrapper>
                   <ActionCreator
                     value={columnAction.dynamicTrigger}
diff --git a/app/client/src/components/propertyControls/KeyValueComponent.tsx b/app/client/src/components/propertyControls/KeyValueComponent.tsx
index 5fe20eda43..e5e304f908 100644
--- a/app/client/src/components/propertyControls/KeyValueComponent.tsx
+++ b/app/client/src/components/propertyControls/KeyValueComponent.tsx
@@ -48,7 +48,7 @@ function updateOptionValue<T>(
 const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
   padding: 0px 5px;
   position: absolute;
-  right: -2px;
+  right: 8px;
   cursor: pointer;
 `;
 
@@ -60,6 +60,7 @@ const StyledOptionControlWrapper = styled(ControlWrapper)`
   display: flex;
   justify-content: flex-start;
   padding-right: 16px;
+  width: calc(100% - 10px);
 `;
 
 type KeyValueComponentProps = {