Merge pull request #3791 from aswathkk/issue/3321

Allow removing filter on Dropdown Widget

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -259,7 +259,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
             <StyledSingleDropDown
               className={this.props.isLoading ? Classes.SKELETON : ""}
               disabled={this.props.disabled}
-              filterable
+              filterable={this.props.isFilterable}
               itemListPredicate={this.itemListPredicate}
               itemRenderer={this.renderSingleSelectItem}
               items={this.props.options}
@@ -422,6 +422,7 @@ export interface DropDownComponentProps extends ComponentProps {
   selectedIndexArr: number[];
   options: DropdownOption[];
   isLoading: boolean;
+  isFilterable: boolean;
   width: number;
   height: number;
 }

app/client/src/widgets/DropdownWidget.tsx

@@ -56,6 +56,15 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
             isTriggerProperty: false,
             validation: VALIDATION_TYPES.DEFAULT_OPTION_VALUE,
           },
+          {
+            propertyName: "isFilterable",
+            label: "Filterable",
+            helpText: "Makes the dropdown list filterable",
+            controlType: "SWITCH",
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: false,
+          },
           {
             propertyName: "isRequired",
             label: "Required",
@@ -150,6 +159,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       <DropDownComponent
         disabled={this.props.isDisabled}
         height={componentHeight}
+        isFilterable={this.props.isFilterable}
         isLoading={this.props.isLoading}
         label={`${this.props.label}`}
         onOptionRemoved={this.onOptionRemoved}
@@ -260,6 +270,7 @@ export interface DropdownWidgetProps extends WidgetProps, WithMeta {
   onOptionChange?: string;
   defaultOptionValue?: string | string[];
   isRequired: boolean;
+  isFilterable: boolean;
   selectedOptionValue: string;
   selectedOptionValueArr: string[];
   selectedOptionLabels: string[];