fix: show clear input icon on allow clear value (#15232)

* fix: show clear input on allow clear value

* fix: truncate select input on small size

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tree_Select_spec.js

@@ -1,18 +1,76 @@
 const dsl = require("../../../../fixtures/emptyDSL.json");
 const explorer = require("../../../../locators/explorerlocators.json");
+const formWidgetsPage = require("../../../../locators/FormWidgets.json");
 
 describe("Tree Select Widget", function() {
   before(() => {
     cy.addDsl(dsl);
   });
 
-  it("Add new widget", () => {
+  it("1. Add new widget", () => {
     cy.get(explorer.addWidget).click();
     cy.dragAndDropToCanvas("singleselecttreewidget", { x: 300, y: 300 });
     cy.get(".t--widget-singleselecttreewidget").should("exist");
   });
 
-  it("should check that empty value is allowed in options", () => {
+  it("2. toggle on allow clear selection and clear the input", () => {
+    cy.openPropertyPane("singleselecttreewidget");
+    // toggle on allow clear selection
+    cy.togglebar(
+      ".t--property-control-allowclearingvalue input[type='checkbox']",
+    );
+    // assert if cancel icon exists on the widget input
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .find(".rc-tree-select-clear")
+      .should("exist");
+    // click on the cancel icon
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .find(".rc-tree-select-clear")
+      .click({ force: true });
+    // assert if the widget input value is now empty
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .invoke("val")
+      .should("be.empty");
+    // click on the widget
+    cy.get(formWidgetsPage.treeSelectInput)
+      .last()
+      .click({ force: true });
+    // select Green option
+    cy.treeSelectDropdown("Green");
+    // again click on cancel icon in the widget
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .find(".rc-tree-select-clear")
+      .click({ force: true });
+    // assert if the widget input value is now empty
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .invoke("val")
+      .should("be.empty");
+  });
+
+  it("3. toggle of allow clear selection", () => {
+    cy.openPropertyPane("singleselecttreewidget");
+    // toggle off allow clear selection
+    cy.togglebarDisable(
+      ".t--property-control-allowclearingvalue input[type='checkbox']",
+    );
+    // assert if cancel icon does not exists on the widget input
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .find(".rc-tree-select-clear")
+      .should("not.exist");
+    // click on the widget again
+    cy.get(formWidgetsPage.treeSelectInput)
+      .last()
+      .click({ force: true });
+    // select Green option
+    cy.treeSelectDropdown("Green");
+    // assert if the widget input value is Green
+    cy.get(formWidgetsPage.singleselecttreeWidget)
+      .find(".rc-tree-select-selection-item")
+      .first()
+      .should("have.text", "Green");
+  });
+
+  it("4. should check that empty value is allowed in options", () => {
     cy.openPropertyPane("singleselecttreewidget");
     cy.updateCodeInput(
       ".t--property-control-options",
@@ -46,7 +104,7 @@ describe("Tree Select Widget", function() {
     );
   });
 
-  it("should check that more thatn empty value is not allowed in options", () => {
+  it("5. should check that more than empty value is not allowed in options", () => {
     cy.openPropertyPane("singleselecttreewidget");
     cy.updateCodeInput(
       ".t--property-control-options",

app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx

@@ -839,18 +839,13 @@ export const TreeSelectContainer = styled.div<{
       height: 100%;
       display: flex;
       align-items: center;
-      z-index: -1;
       .rc-tree-select-clear-icon {
         font-size: 18px;
         font-weight: bold;
       }
     }
   }
-  .rc-tree-select-allow-clear.rc-tree-select-focused {
-    .rc-tree-select-clear {
-      z-index: 1;
-    }
-  }
+  
   .rc-tree-select-show-arrow.rc-tree-select-multiple {
     .rc-tree-select-selector {
       padding-right: ${({ allowClear }) => (allowClear ? "40px" : "20px")};
@@ -924,8 +919,8 @@ export const TreeSelectContainer = styled.div<{
         transform: translateY(5px);
       }
     }
+    }
   }
-
 `;
 
 export const StyledCheckbox = styled(Checkbox)`

app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx

@@ -600,10 +600,10 @@ ${({ dropDownWidth, id }) => `
 	display: inline-block;
 }
 
-  }
 `;
 
 export const TreeSelectContainer = styled.div<{
+  allowClear?: boolean;
   compactMode: boolean;
   isValid: boolean;
   labelPosition?: LabelPosition;
@@ -747,7 +747,10 @@ export const TreeSelectContainer = styled.div<{
       white-space: nowrap;
       text-overflow: ellipsis;
       font-size: 14px;
-      width: calc(100% - 40px);
+      ${(props) =>
+        props.allowClear
+          ? `width: calc(100% - 58px)`
+          : `width: calc(100% - 40px)`}
     }
   }
   .rc-tree-select-multiple {
@@ -855,18 +858,13 @@ export const TreeSelectContainer = styled.div<{
       height: 100%;
       display: flex;
       align-items: center;
-      z-index: -1;
       .rc-tree-select-clear-icon {
         font-size: 18px;
         font-weight: bold;
       }
     }
   }
-  .rc-tree-select-allow-clear.rc-tree-select-focused {
-    .rc-tree-select-clear {
-      z-index: 1;
-    }
-  }
+
   .rc-tree-select-show-arrow.rc-tree-select-multiple {
     .rc-tree-select-selector {
       padding-right: 20px;
@@ -920,6 +918,7 @@ export const TreeSelectContainer = styled.div<{
           height: 20px;
         }
       fill: ${Colors.SLATE_GRAY};
+      }
     }
     .rc-tree-select-arrow-icon {
       &::after {
@@ -944,7 +943,6 @@ export const TreeSelectContainer = styled.div<{
       }
     }
   }
-
 `;
 export const StyledCheckbox = styled(Checkbox)`
   &&.${Classes.CHECKBOX}.${Classes.CONTROL} {

app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx

@@ -220,6 +220,7 @@ function SingleSelectTreeComponent({
   return (
     <TreeSelectContainer
       accentColor={accentColor}
+      allowClear={allowClear}
       borderRadius={borderRadius}
       boxShadow={boxShadow}
       compactMode={compactMode}

app/client/src/widgets/SingleSelectTreeWidget/widget/index.tsx

@@ -180,7 +180,7 @@ class SingleSelectTreeWidget extends BaseWidget<
           },
           {
             propertyName: "allowClear",
-            label: "Clear all Selections",
+            label: "Allow Clearing Value",
             helpText: "Enables Icon to clear all Selections",
             controlType: "SWITCH",
             isJSConvertible: true,