From b4b4284a564b0eea8e8dc1c91c9a0882fdab75f5 Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Fri, 9 Sep 2022 12:55:31 +0100
Subject: [PATCH] fix:allow clear button in tree select widget (#16542)

* Fix: tree select allowClear button

* fix: import duplication

* Fix: add tests for bug

* fix: Add Placeholder fix

* fix: test case

* fix: remove comments
---
 .../Widgets/Select/Single_Select_Tree_spec.js | 22 +++++++++++++++++++
 app/client/cypress/locators/FormWidgets.json  |  2 ++
 .../component/index.tsx                       | 14 ++++++++----
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js
index 7d56c9ef23..e783da1c78 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js
@@ -111,6 +111,28 @@ describe("Single Select Widget Functionality", function() {
       "No Results Found",
     );
   });
+
+  it("8. To Check Clear all functionality", function() {
+    cy.openPropertyPane("textwidget");
+    cy.updateCodeInput(
+      ".t--property-control-text",
+      `{{SingleSelectTree1.selectedOptionValue}}`,
+    );
+    cy.openPropertyPane("singleselecttreewidget");
+    cy.togglebar(
+      '.t--property-control-allowclearingvalue input[type="checkbox"]',
+    );
+    cy.get(formWidgetsPage.treeSelectClearAll)
+      .last()
+      .click({ force: true });
+    cy.wait(100);
+    cy.get(".t--widget-textwidget").should("contain", "");
+    cy.get(formWidgetsPage.treeSelectClearAll).should("not.exist");
+    cy.get(formWidgetsPage.treeSelectPlaceholder).should(
+      "contain",
+      "select option",
+    );
+  });
 });
 afterEach(() => {
   // put your clean up code if any
diff --git a/app/client/cypress/locators/FormWidgets.json b/app/client/cypress/locators/FormWidgets.json
index 0d085ca3cd..1ec89366f0 100644
--- a/app/client/cypress/locators/FormWidgets.json
+++ b/app/client/cypress/locators/FormWidgets.json
@@ -30,6 +30,8 @@
   "dropdownInput": ".bp3-tag-input-values",
   "mulitiselectInput": ".rc-select-selection-search-input",
   "treeSelectInput": ".rc-tree-select-selection-search-input",
+  "treeSelectClearAll":".rc-tree-select-clear",
+  "treeSelectPlaceholder":".rc-tree-select-single .rc-tree-select-selection-placeholder",
   "treeSelectFilterInput": ".tree-select-dropdown .bp3-input",
   "multiTreeSelectFilterInput": ".tree-multiselect-dropdown .bp3-input",
   "labelradio": ".t--draggable-radiogroupwidget label",
diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
index 881d6468e6..968c9410a6 100644
--- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
+++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx
@@ -22,11 +22,11 @@ import styled from "styled-components";
 import { RenderMode, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
-import { Icon } from "design-system";
+import { Icon, LabelWithTooltip } from "design-system";
 import { Colors } from "constants/Colors";
 import { LabelPosition } from "components/constants";
-import { LabelWithTooltip } from "design-system";
 import useDropdown from "widgets/useDropdown";
+import { isNil } from "lodash";
 
 export interface TreeSelectProps
   extends Required<
@@ -220,6 +220,12 @@ function SingleSelectTreeComponent({
     // Clear the search input on closing the widget
     setFilter("");
   };
+  const allowClearMemo = useMemo(
+    () => allowClear && !isNil(value) && value !== "",
+    [allowClear, value],
+  );
+
+  const memoValue = useMemo(() => (value !== "" ? value : undefined), [value]);
 
   return (
     <TreeSelectContainer
@@ -257,7 +263,7 @@ function SingleSelectTreeComponent({
       )}
       <InputContainer compactMode={compactMode} labelPosition={labelPosition}>
         <TreeSelect
-          allowClear={allowClear}
+          allowClear={allowClearMemo}
           animation="slide-up"
           choiceTransitionName="rc-tree-select-selection__choice-zoom"
           className="rc-tree-select"
@@ -304,7 +310,7 @@ function SingleSelectTreeComponent({
           treeDefaultExpandAll={expandAll}
           treeIcon
           treeNodeFilterProp="label"
-          value={filter ? "" : value} // value should empty when filter value exist otherwise dropdown flickers #12714
+          value={memoValue}
         />
       </InputContainer>
     </TreeSelectContainer>