fix: enable allow clear options for single select dropdown

appsmithorg · Feb 12, 2025 · 36b6c94 · 36b6c94
1 parent e878088
commit 36b6c94
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/app/client/src/components/formControls/DropDownControl.test.tsx b/app/client/src/components/formControls/DropDownControl.test.tsx
@@ -220,3 +220,77 @@ describe("DropDownControl grouping tests", () => {
     expect(screen.getByText("Option 2")).toBeInTheDocument();
   });
 });
+
+describe("DropdownControl Single select tests", () => {
+  // TODO: Fix this the next time the file is edited
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let store: any;
+
+  const initialValuesSingleSelect = {
+    actionConfiguration: {
+      testPath: "option1",
+    },
+  };
+
+  const mockActionSingleSelect = {
+    type: "API_ACTION",
+    name: "Test API Action",
+    datasource: {
+      id: "datasource1",
+      name: "Datasource 1",
+    },
+    actionConfiguration: {
+      body: "",
+      headers: [],
+      testPath: "option1",
+    },
+  };
+
+  const dropDownPropsSingleSelect = {
+    options: mockOptions,
+    placeholderText: "Select Columns",
+    configProperty: "actionConfiguration.testPath",
+    controlType: "PROJECTION",
+    propertyValue: "",
+    label: "Columns",
+    id: "column",
+    formName: "",
+    isValid: true,
+    formValues: mockActionSingleSelect,
+    isLoading: false,
+    maxTagCount: 3,
+    isAllowClear: true,
+  };
+
+  beforeEach(() => {
+    store = mockStore({
+      form: {
+        TestForm: {
+          values: initialValuesSingleSelect,
+        },
+      },
+      appState: {},
+    });
+  });
+  it("should clear selected option", async () => {
+    render(
+      <Provider store={store}>
+        <ReduxFormDecorator>
+          <DropDownControl {...dropDownPropsSingleSelect} />
+        </ReduxFormDecorator>
+      </Provider>,
+    );
+
+    const clearAllButton = document.querySelector(".rc-select-clear");
+
+    expect(clearAllButton).toBeInTheDocument();
+
+    fireEvent.click(clearAllButton!);
+
+    await waitFor(() => {
+      const options = screen.queryAllByText(/Option.../);
+
+      expect(options.length).toBe(0);
+    });
+  });
+});
diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx
@@ -304,7 +304,9 @@ function renderDropdown(
 
   return (
     <Select
-      allowClear={props.isMultiSelect && !isEmpty(selectedValue)}
+      allowClear={
+        (props.isMultiSelect || props.isAllowClear) && !isEmpty(selectedValue)
+      }
       data-testid={`t--dropdown-${props?.configProperty}`}
       defaultValue={props.initialValue}
       isDisabled={props.disabled}
@@ -365,6 +367,7 @@ export interface DropDownControlProps extends ControlProps {
   formValues: Partial<Action>;
   setFirstOptionAsDefault?: boolean;
   maxTagCount?: number;
+  isAllowClear?: boolean;
 }
 
 interface ReduxDispatchProps {