diff --git a/app/client/src/widgets/SelectWidget/component/index.test.tsx b/app/client/src/widgets/SelectWidget/component/index.test.tsx new file mode 100644 index 00000000000..b85523ddb58 --- /dev/null +++ b/app/client/src/widgets/SelectWidget/component/index.test.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import SelectComponent, { type SelectComponentProps } from "./index"; +import userEvent from "@testing-library/user-event"; + +const mockProps: SelectComponentProps = { + borderRadius: "", + compactMode: false, + dropDownWidth: 0, + height: 0, + isFilterable: false, + isLoading: false, + isValid: false, + labelText: "", + onFilterChange: jest.fn(), + onOptionSelected: jest.fn(), + onDropdownClose: jest.fn(), + onDropdownOpen: jest.fn(), + options: [], + serverSideFiltering: false, + width: 0, + widgetId: "", +}; + +describe("SelectComponent", () => { + it("should call onDropdownClose only once when select button is clicked twice", () => { + render(); + const dropdownButton = screen.getByRole("button"); + userEvent.click(dropdownButton); + + expect(mockProps.onDropdownOpen).toHaveBeenCalledTimes(1); + userEvent.click(dropdownButton); + + expect(mockProps.onDropdownClose).toHaveBeenCalledTimes(1); + }); +}); diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx index 862934a2e9c..08cef98a4ae 100644 --- a/app/client/src/widgets/SelectWidget/component/index.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.tsx @@ -75,7 +75,15 @@ class SelectComponent extends React.Component< } }; - togglePopoverVisibility = () => { + togglePopoverVisibilityFromButton = () => { + this.togglePopoverVisibility(true); + }; + + togglePopoverVisibility = (isButtonClick = false) => { + // This is an edge case, this method gets called twice if user closes it by clicking on the `SelectButton` + // which in turn triggers handleOnDropdownClose twice, to solve we have this exception to tell if click event is from button + if (isButtonClick && this.state.isOpen) return; + if (this.state.isOpen) { this.handleOnDropdownClose(); } else { @@ -189,7 +197,6 @@ class SelectComponent extends React.Component< handleCloseList = () => { if (this.state.isOpen) { this.togglePopoverVisibility(); - if (!this.props.selectedIndex) return; return this.handleActiveItemChange( @@ -456,7 +463,7 @@ class SelectComponent extends React.Component< hideCancelIcon={this.props.hideCancelIcon} isRequired={this.props.isRequired} spanRef={this.spanRef} - togglePopoverVisibility={this.togglePopoverVisibility} + togglePopoverVisibility={this.togglePopoverVisibilityFromButton} tooltipText={tooltipText} value={this.props.value?.toString()} />