diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tree_Select_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tree_Select_spec.js index 889784345d..5d3d1bfd33 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Tree_Select_spec.js +++ b/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", diff --git a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx index 3b6a1e7250..9ee8af76a7 100644 --- a/app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx +++ b/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)` diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx index dd79dc1a00..512bb42956 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx +++ b/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} { diff --git a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx index b6107a71c9..42c1089297 100644 --- a/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx +++ b/app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx @@ -220,6 +220,7 @@ function SingleSelectTreeComponent({ return (