diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
index b77663d6cc..6be2a5dda0 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss
@@ -138,7 +138,6 @@ $root: ".widget-dropdown-filter";
     &-clear {
         @include btn-with-cross;
         align-items: center;
-        align-self: center;
         display: flex;
         flex-shrink: 0;
         justify-self: end;
@@ -150,6 +149,11 @@ $root: ".widget-dropdown-filter";
         &:has(+ #{$root}-toggle) {
             border-inline-end: 1px solid var(--gray, #787d87);
         }
+
+        &:focus {
+            border-radius: 2px;
+            outline: 2px solid var(--brand-primary, $brand-primary);
+        }
     }
 
     &-state-icon {
@@ -262,9 +266,13 @@ $root: ".widget-dropdown-filter";
         justify-content: center;
         line-height: 1.334;
         padding: var(--wdf-tag-padding);
+        margin: var(--spacing-smallest, 2px);
         &:focus-visible {
             outline: var(--brand-primary, #264ae5) auto 1px;
         }
+        &:focus {
+            background-color: var(--color-primary-light, $color-primary-light);
+        }
     }
 
     #{$root}-input {
@@ -273,6 +281,14 @@ $root: ".widget-dropdown-filter";
         width: initial;
     }
 
+    &:not(:focus-within):not([data-empty]) {
+        #{$root}-input {
+            opacity: 0;
+            flex-shrink: 1;
+            min-width: 1px;
+        }
+    }
+
     #{$root}-clear {
         border-color: transparent;
     }
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts
index cd2dbe6373..5194e4211a 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts
@@ -20,6 +20,8 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     if (values.filterable) {
         hidePropertyIn(defaultProperties, values, "clearable");
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
+    } else {
+        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
     if (!showSelectedItemsStyle) {
@@ -54,7 +56,7 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
                             text({
                                 fontColor: palette.text.secondary,
                                 italic: true
-                            })(values.emptyOptionCaption || " ")
+                            })(values.emptySelectionCaption || " ")
                         ],
                         grow: 1
                     } as ContainerProps,
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx
index 9d42df5e76..9fede9d5c2 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx
@@ -14,6 +14,7 @@ function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
             options={[]}
             empty={!props.clearable}
             clearable={props.clearable}
+            showCheckboxes={false}
             value={getPreviewValue(props)}
             onClear={noop}
             useSelectProps={() => ({ items: [] })}
@@ -25,11 +26,7 @@ const noop = (): void => {};
 
 function getPreviewValue(props: DatagridDropdownFilterPreviewProps): string {
     let value = props.defaultValue;
-    if (!props.filterable) {
-        value ||= props.emptyOptionCaption || "Select";
-    } else {
-        value ||= "Search";
-    }
+    value ||= props.emptySelectionCaption || (props.filterable ? "Search" : "Select");
     return value;
 }
 
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx
index 5435f96422..fb7ff098a6 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx
@@ -16,7 +16,9 @@ function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAP
         parentChannelName: props.parentChannelName,
         name: props.name,
         multiselect: props.multiSelect,
-        emptyCaption: props.emptyOptionCaption?.value,
+        emptySelectionCaption: props.emptySelectionCaption?.value ?? "",
+        emptyOptionCaption: props.emptyOptionCaption?.value ?? "",
+        placeholder: props.filterInputPlaceholderCaption?.value ?? "",
         defaultValue: props.defaultValue?.value,
         filterable: props.filterable,
         selectionMethod: props.selectionMethod,
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml
index 5e32a4a329..b28a99f14d 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml
@@ -83,13 +83,23 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
-        <propertyGroup caption="Accessibility">
+        <propertyGroup caption="Advanced">
             <propertyGroup caption="Accessibility">
                 <property key="ariaLabel" type="textTemplate" required="false">
                     <caption>Input caption</caption>
                     <description>Assistive technology will read this upon reaching the input element.</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Texts">
+                <property key="emptySelectionCaption" type="textTemplate" required="false">
+                    <caption>Empty selection caption</caption>
+                    <description>This text is shown if no options are selected. For example 'No options are selected' or 'Select color'.</description>
+                </property>
+                <property key="filterInputPlaceholderCaption" type="textTemplate" required="false">
+                    <caption>Filter input placeholder</caption>
+                    <description>This text is shown as placeholder for filterable filters. For example 'type to search'.</description>
+                </property>
+            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx
index 5b332e833e..50dd78fec4 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx
@@ -18,7 +18,9 @@ export interface RefFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterStore: RefFilterStore;
     multiselect: boolean;
     name: string;
@@ -80,6 +82,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -109,6 +112,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContai
             onFocus={ctrl3.handleFocus}
             onMenuScroll={handleMenuScroll}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx
index cd0e25c46f..2e7e32259b 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx
@@ -22,7 +22,9 @@ export interface StaticFilterContainerProps {
     ariaLabel?: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterOptions: FilterOptionsType[];
     filterStore: StaticSelectFilterStore;
     multiselect: boolean;
@@ -81,6 +83,7 @@ const ComboboxWidget = observer(function ComboboxWidget(props: StaticFilterConta
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -106,6 +109,7 @@ const TagPickerWidget = observer(function TagPickerWidget(props: StaticFilterCon
             onClear={ctrl3.handleClear}
             onBlur={ctrl3.handleBlur}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx
index 2306dd4a38..ac36e7f529 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx
@@ -22,6 +22,8 @@ const commonProps = {
     groupKey: "dropdown-filter",
     filterable: false,
     clearable: true,
+    emptyOptionCaption: dynamicValue("None"),
+    emptySelectOptionCaption: dynamicValue("Select"),
     selectionMethod: "checkbox" as const,
     selectedItemsStyle: "text" as const
 };
diff --git a/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts b/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts
index c1c4cd5e41..4b9390aa8d 100644
--- a/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts
+++ b/packages/pluggableWidgets/datagrid-dropdown-filter-web/typings/DatagridDropdownFilterProps.d.ts
@@ -37,6 +37,8 @@ export interface DatagridDropdownFilterContainerProps {
     valueAttribute?: EditableValue<string>;
     onChange?: ActionValue;
     ariaLabel?: DynamicValue<string>;
+    emptySelectionCaption?: DynamicValue<string>;
+    filterInputPlaceholderCaption?: DynamicValue<string>;
 }
 
 export interface DatagridDropdownFilterPreviewProps {
@@ -62,4 +64,6 @@ export interface DatagridDropdownFilterPreviewProps {
     valueAttribute: string;
     onChange: {} | null;
     ariaLabel: string;
+    emptySelectionCaption: string;
+    filterInputPlaceholderCaption: string;
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/PickerBaseController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/PickerBaseController.ts
index a762277879..d88aaffd5f 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/PickerBaseController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/PickerBaseController.ts
@@ -58,5 +58,6 @@ export interface PickerBaseControllerProps<S extends FilterStore> {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
+    emptyOptionCaption?: string;
+    emptySelectionCaption?: string;
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefBaseController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefBaseController.ts
index c355a2e530..43a282cd76 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefBaseController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefBaseController.ts
@@ -35,6 +35,7 @@ export interface RefBaseControllerProps {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
-    placeholder?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefComboboxController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefComboboxController.ts
index d211132988..bbc714374b 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefComboboxController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefComboboxController.ts
@@ -4,7 +4,8 @@ import { RefBaseController, RefBaseControllerProps } from "./RefBaseController";
 export class RefComboboxController extends ComboboxControllerMixin(RefBaseController) {
     constructor(props: RefBaseControllerProps) {
         super({ ...props, multiselect: false });
-        this.inputPlaceholder = props.placeholder ?? "Search";
+        this.inputPlaceholder = props.placeholder;
+        this.emptyCaption = props.emptySelectionCaption;
     }
 
     handleFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefSelectController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefSelectController.ts
index 6d5c46280c..d79b1844a0 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefSelectController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefSelectController.ts
@@ -4,8 +4,8 @@ import { SelectControllerMixin } from "./mixins/SelectControllerMixin";
 export class RefSelectController extends SelectControllerMixin(RefBaseController) {
     constructor(props: RefBaseControllerProps) {
         super(props);
-        this.emptyOption.caption = props.emptyCaption || "None";
-        this.placeholder = props.placeholder || "Search";
+        this.emptyOption.caption = props.emptyOptionCaption;
+        this.emptyCaption = props.emptySelectionCaption;
     }
 
     handleFocus = (): void => {
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefTagPickerController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefTagPickerController.ts
index 0595766f8d..43ba9178a7 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/RefTagPickerController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/RefTagPickerController.ts
@@ -15,7 +15,8 @@ export class RefTagPickerController extends TagPickerControllerMixin(RefBaseCont
 
     constructor(props: Props) {
         super(props);
-        this.inputPlaceholder = props.placeholder ?? "Search";
+        this.inputPlaceholder = props.placeholder;
+        this.emptyCaption = props.emptySelectionCaption;
         this.filterSelectedOptions = props.selectionMethod === "rowClick";
         this.selectedStyle = props.selectedItemsStyle;
         this.selectionMethod = this.selectedStyle === "boxes" ? props.selectionMethod : "checkbox";
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticBaseController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticBaseController.ts
index b9506dcd99..62d75fa38a 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticBaseController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticBaseController.ts
@@ -55,8 +55,9 @@ export interface StaticBaseControllerProps {
     multiselect: boolean;
     onChange?: ActionValue;
     valueAttribute?: EditableValue<string>;
-    emptyCaption?: string;
-    placeholder?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
 }
 
 export interface CustomOption<T> {
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticComboboxController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticComboboxController.ts
index c6410a631c..a22e8ccf1b 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticComboboxController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticComboboxController.ts
@@ -5,5 +5,6 @@ export class StaticComboboxController extends ComboboxControllerMixin(StaticBase
     constructor(props: StaticBaseControllerProps) {
         super({ ...props, multiselect: false });
         this.inputPlaceholder = props.placeholder ?? "Search";
+        this.emptyCaption = props.emptySelectionCaption;
     }
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticSelectController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticSelectController.ts
index 8174fbb975..5159b517c6 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticSelectController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticSelectController.ts
@@ -4,7 +4,7 @@ import { SelectControllerMixin } from "./mixins/SelectControllerMixin";
 export class StaticSelectController extends SelectControllerMixin(StaticBaseController) {
     constructor(props: StaticBaseControllerProps) {
         super(props);
-        this.emptyOption.caption = props.emptyCaption || "None";
-        this.placeholder = props.emptyCaption || "Select";
+        this.emptyOption.caption = props.emptyOptionCaption;
+        this.emptyCaption = props.emptySelectionCaption;
     }
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticTagPickerController.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticTagPickerController.ts
index 11bc90fd30..9ca14499a7 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticTagPickerController.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/StaticTagPickerController.ts
@@ -15,7 +15,8 @@ export class StaticTagPickerController extends TagPickerControllerMixin(StaticBa
 
     constructor(props: Props) {
         super(props);
-        this.inputPlaceholder = props.placeholder ?? "Search";
+        this.inputPlaceholder = props.placeholder;
+        this.emptyCaption = props.emptySelectionCaption;
         this.filterSelectedOptions = props.selectionMethod === "rowClick";
         this.selectedStyle = props.selectedItemsStyle;
         this.selectionMethod = this.selectedStyle === "boxes" ? props.selectionMethod : "checkbox";
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/ComboboxControllerMixin.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/ComboboxControllerMixin.ts
index 0364d9331f..cf24e575e0 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/ComboboxControllerMixin.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/ComboboxControllerMixin.ts
@@ -26,6 +26,7 @@ export function ComboboxControllerMixin<TBase extends BaseController>(Base: TBas
         touched = false;
         inputValue = "";
         inputPlaceholder = "";
+        emptyCaption = "";
 
         constructor(...args: any[]) {
             super(...args);
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/SelectControllerMixin.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/SelectControllerMixin.ts
index c765116ed8..fe2ab40320 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/SelectControllerMixin.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/SelectControllerMixin.ts
@@ -22,11 +22,11 @@ const none = "[[__none__]]" as const;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function SelectControllerMixin<TBase extends BaseController>(Base: TBase) {
     return class SelectControllerMixin extends Base {
-        placeholder = "Select";
+        emptyCaption = "";
 
         readonly emptyOption = {
             value: none,
-            caption: "None",
+            caption: "",
             selected: false
         };
 
@@ -41,6 +41,9 @@ export function SelectControllerMixin<TBase extends BaseController>(Base: TBase)
         }
 
         get options(): OptionWithState[] {
+            if (this.multiselect) {
+                return this.filterStore.options;
+            }
             return [this.emptyOption, ...this.filterStore.options];
         }
 
@@ -52,7 +55,7 @@ export function SelectControllerMixin<TBase extends BaseController>(Base: TBase)
             const selected = this.filterStore.selectedOptions;
 
             if (selected.length < 1) {
-                return this.placeholder;
+                return this.emptyCaption;
             }
 
             return selected.map(option => option.caption).join(", ");
@@ -84,6 +87,18 @@ export function SelectControllerMixin<TBase extends BaseController>(Base: TBase)
             if (this.multiselect) {
                 props.stateReducer = (state, { changes, type }) => {
                     switch (type) {
+                        case useSelect.stateChangeTypes.ToggleButtonClick:
+                            if (state.isOpen) {
+                                return {
+                                    ...changes,
+                                    isOpen: true,
+                                    highlightedIndex: state.highlightedIndex
+                                };
+                            }
+
+                            return {
+                                ...changes
+                            };
                         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
                         case useSelect.stateChangeTypes.ItemClick:
                             return {
diff --git a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/TagPickerControllerMixin.ts b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/TagPickerControllerMixin.ts
index 42ed406a37..5a2079b33c 100644
--- a/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/TagPickerControllerMixin.ts
+++ b/packages/shared/widget-plugin-filtering/src/controllers/picker/mixins/TagPickerControllerMixin.ts
@@ -27,6 +27,7 @@ export function TagPickerControllerMixin<TBase extends BaseController>(Base: TBa
         touched = false;
         inputValue = "";
         inputPlaceholder = "";
+        emptyCaption = "";
         filterSelectedOptions = false;
 
         constructor(...args: any[]) {
@@ -142,6 +143,15 @@ export function TagPickerControllerMixin<TBase extends BaseController>(Base: TBa
                                 highlightedIndex: state.highlightedIndex,
                                 inputValue: state.inputValue
                             };
+                        case useCombobox.stateChangeTypes.InputClick:
+                            if (state.isOpen) {
+                                return {
+                                    ...changes,
+                                    isOpen: true,
+                                    highlightedIndex: state.highlightedIndex
+                                };
+                            }
+                            return changes;
                         default:
                             return {
                                 ...changes,
diff --git a/packages/shared/widget-plugin-filtering/src/controls/base/ClearButton.tsx b/packages/shared/widget-plugin-filtering/src/controls/base/ClearButton.tsx
index 6dba754f23..2a70606529 100644
--- a/packages/shared/widget-plugin-filtering/src/controls/base/ClearButton.tsx
+++ b/packages/shared/widget-plugin-filtering/src/controls/base/ClearButton.tsx
@@ -1,4 +1,4 @@
-import { createElement, Fragment, ReactElement } from "react";
+import { createElement, ReactElement, useCallback } from "react";
 import { Cross } from "../picker-primitives";
 
 type ClearButtonClassNamesProps = {
@@ -10,18 +10,26 @@ type ClearButtonClassNamesProps = {
 type ClearButtonProps = {
     cls: ClearButtonClassNamesProps;
     onClick?: () => void;
-    showSeparator?: boolean;
     visible: boolean;
 };
 
 export function ClearButton(props: ClearButtonProps): ReactElement | null {
-    const { cls, onClick, showSeparator, visible } = props;
+    const { cls, onClick, visible } = props;
+
+    const onClickHandler = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            e.preventDefault();
+            if (onClick) {
+                onClick();
+            }
+        },
+        [onClick]
+    );
+
     return visible ? (
-        <Fragment>
-            <button className={cls.clear} tabIndex={-1} aria-label="Clear combobox" onClick={onClick}>
-                <Cross className={cls.clearIcon} />
-            </button>
-            {showSeparator && <div className={cls.separator} role="presentation" />}
-        </Fragment>
+        <button className={cls.clear} aria-label="Clear selection" onClick={onClickHandler}>
+            <Cross className={cls.clearIcon} />
+        </button>
     ) : null;
 }
diff --git a/packages/shared/widget-plugin-filtering/src/controls/base/OptionsWrapper.tsx b/packages/shared/widget-plugin-filtering/src/controls/base/OptionsWrapper.tsx
index b0b0170054..00962c98eb 100644
--- a/packages/shared/widget-plugin-filtering/src/controls/base/OptionsWrapper.tsx
+++ b/packages/shared/widget-plugin-filtering/src/controls/base/OptionsWrapper.tsx
@@ -18,8 +18,7 @@ type OptionsWrapperProps = {
     isOpen: boolean;
     options: OptionWithState[];
     highlightedIndex: number;
-    showCheckboxes?: boolean;
-    haveEmptyFirstOption?: boolean;
+    showCheckboxes: boolean;
 } & (
     | Pick<UseComboboxPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
     | Pick<UseSelectPropGetters<OptionWithState>, "getMenuProps" | "getItemProps">
@@ -28,17 +27,7 @@ type OptionsWrapperProps = {
 const noop = (): void => {};
 
 export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
-    const {
-        cls,
-        style,
-        onMenuScroll,
-        isOpen,
-        highlightedIndex,
-        showCheckboxes,
-        haveEmptyFirstOption,
-        getMenuProps,
-        getItemProps
-    } = props;
+    const { cls, style, onMenuScroll, isOpen, highlightedIndex, showCheckboxes, getMenuProps, getItemProps } = props;
     return (
         <div className={cls.popover} hidden={!isOpen} ref={ref} style={style}>
             <div className={cls.menuSlot}>
@@ -50,26 +39,29 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                                 data-highlighted={highlightedIndex === index || undefined}
                                 key={item.value || index}
                                 className={cls.menuItem}
-                                {...getItemProps({ item, index, "aria-selected": item.selected })}
+                                {...getItemProps({
+                                    item,
+                                    index,
+                                    "aria-selected": item.selected,
+                                    onClick: e => {
+                                        e.stopPropagation();
+                                    }
+                                })}
                             >
                                 {showCheckboxes && (
                                     <span className={cls.checkboxSlot}>
-                                        {haveEmptyFirstOption && index === 0 ? (
-                                            <div style={{ width: 16, height: 16 }} />
-                                        ) : (
-                                            <input
-                                                className={props.cls.checkbox}
-                                                role="presentation"
-                                                type="checkbox"
-                                                checked={item.selected}
-                                                value={item.caption}
-                                                onChange={noop}
-                                                tabIndex={-1}
-                                            />
-                                        )}
+                                        <input
+                                            className={props.cls.checkbox}
+                                            role="presentation"
+                                            type="checkbox"
+                                            checked={item.selected}
+                                            value={item.caption}
+                                            onChange={noop}
+                                            tabIndex={-1}
+                                        />
                                     </span>
                                 )}
-                                {item.caption}
+                                {item.caption || "\u00A0"}
                             </li>
                         ))}
                 </ul>
diff --git a/packages/shared/widget-plugin-filtering/src/controls/combobox/Combobox.tsx b/packages/shared/widget-plugin-filtering/src/controls/combobox/Combobox.tsx
index 6abe9f341e..cc3c92c3d2 100644
--- a/packages/shared/widget-plugin-filtering/src/controls/combobox/Combobox.tsx
+++ b/packages/shared/widget-plugin-filtering/src/controls/combobox/Combobox.tsx
@@ -11,6 +11,7 @@ import { Arrow, classes } from "../picker-primitives";
 interface ComboboxProps {
     options: OptionWithState[];
     inputPlaceholder: string;
+    emptyCaption: string;
     empty: boolean;
     className?: string;
     style?: React.CSSProperties;
@@ -25,9 +26,8 @@ const cls = classes();
 
 export const Combobox = observer(function Combobox(props: ComboboxProps) {
     const inputRef = useRef<HTMLInputElement>(null);
-    const { isOpen, highlightedIndex, getInputProps, getToggleButtonProps, getMenuProps, getItemProps } = useCombobox(
-        props.useComboboxProps()
-    );
+    const { isOpen, highlightedIndex, getInputProps, getToggleButtonProps, getMenuProps, getItemProps, getLabelProps } =
+        useCombobox(props.useComboboxProps());
 
     const { refs, floatingStyles } = useFloatingMenu(isOpen);
 
@@ -39,25 +39,19 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
             data-empty={props.empty ? true : undefined}
             style={props.style}
         >
+            <div className={"sr-only"} {...getLabelProps()}>
+                {props.emptyCaption}
+            </div>
             <input
                 className={cls.input}
                 {...getInputProps({
-                    "aria-label": props.inputPlaceholder || "Search",
                     ref: inputRef,
                     onBlur: props.onBlur,
                     onFocus: props.onFocus,
-                    placeholder: props.inputPlaceholder
+                    placeholder: props.empty ? (isOpen ? props.inputPlaceholder : props.emptyCaption) : undefined
                 })}
             />
-            <ClearButton
-                cls={cls}
-                onClick={() => {
-                    props.onClear();
-                    inputRef.current?.focus();
-                }}
-                showSeparator={false}
-                visible={!props.empty}
-            />
+            <ClearButton cls={cls} onClick={props.onClear} visible={!props.empty} />
             <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
                 <Arrow className={cls.stateIcon} />
             </button>
@@ -70,7 +64,6 @@ export const Combobox = observer(function Combobox(props: ComboboxProps) {
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={false}
-                haveEmptyFirstOption={false}
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />
diff --git a/packages/shared/widget-plugin-filtering/src/controls/select/Select.tsx b/packages/shared/widget-plugin-filtering/src/controls/select/Select.tsx
index 71b18e0582..2df0d24218 100644
--- a/packages/shared/widget-plugin-filtering/src/controls/select/Select.tsx
+++ b/packages/shared/widget-plugin-filtering/src/controls/select/Select.tsx
@@ -1,7 +1,7 @@
 import cn from "classnames";
 import { useSelect, UseSelectProps } from "downshift";
 import { observer } from "mobx-react-lite";
-import React, { createElement, useRef } from "react";
+import React, { createElement } from "react";
 import { OptionWithState } from "../../typings/OptionWithState";
 import { ClearButton } from "../base/ClearButton";
 import { OptionsWrapper } from "../base/OptionsWrapper";
@@ -14,11 +14,11 @@ interface SelectProps {
     clearable: boolean;
     empty: boolean;
     className?: string;
-    showCheckboxes?: boolean;
+    showCheckboxes: boolean;
     style?: React.CSSProperties;
     useSelectProps: () => UseSelectProps<OptionWithState>;
     onClear: () => void;
-    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onMenuScroll?: React.UIEventHandler<HTMLUListElement>;
 }
 
@@ -26,7 +26,6 @@ const cls = classes();
 
 export const Select = observer(function Select(props: SelectProps): React.ReactElement {
     const { empty: isEmpty, showCheckboxes, clearable } = props;
-    const toggleRef = useRef<HTMLButtonElement>(null);
     const { getToggleButtonProps, getMenuProps, getItemProps, isOpen, highlightedIndex } = useSelect(
         props.useSelectProps()
     );
@@ -37,33 +36,22 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
     return (
         <div
             className={cn(cls.root, "form-control", "variant-select", props.className)}
-            ref={refs.setReference}
             data-expanded={isOpen}
             data-empty={isEmpty ? true : undefined}
             style={props.style}
+            {...getToggleButtonProps({
+                "aria-label": props.value,
+                ref: refs.setReference,
+                onFocus: props.onFocus
+            })}
         >
-            <button
-                className={cls.inputContainer}
-                {...getToggleButtonProps({
-                    "aria-label": props.value,
-                    ref: toggleRef,
-                    onFocus: props.onFocus
-                })}
-            >
+            <div className={cls.inputContainer}>
                 <span className={cls.toggle}>{props.value}</span>
                 <div className={`${cls.root}-controls`}>
-                    <ClearButton
-                        cls={cls}
-                        onClick={() => {
-                            props.onClear();
-                            toggleRef.current?.focus();
-                        }}
-                        showSeparator={false}
-                        visible={showClear}
-                    />
+                    <ClearButton cls={cls} onClick={props.onClear} visible={showClear} />
                     <Arrow className={cls.stateIcon} />
                 </div>
-            </button>
+            </div>
             <OptionsWrapper
                 cls={cls}
                 ref={refs.setFloating}
@@ -73,7 +61,6 @@ export const Select = observer(function Select(props: SelectProps): React.ReactE
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={showCheckboxes}
-                haveEmptyFirstOption
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />
diff --git a/packages/shared/widget-plugin-filtering/src/controls/tag-picker/TagPicker.tsx b/packages/shared/widget-plugin-filtering/src/controls/tag-picker/TagPicker.tsx
index 23f9dc04c5..0288a7c68b 100644
--- a/packages/shared/widget-plugin-filtering/src/controls/tag-picker/TagPicker.tsx
+++ b/packages/shared/widget-plugin-filtering/src/controls/tag-picker/TagPicker.tsx
@@ -13,6 +13,7 @@ interface TagPickerProps {
     options: OptionWithState[];
     empty: boolean;
     inputPlaceholder: string;
+    emptyCaption: string;
     showCheckboxes: boolean;
     selectedStyle?: "boxes" | "text";
     ariaLabel?: string;
@@ -31,12 +32,20 @@ const cls = classes();
 export const TagPicker = observer(function TagPicker(props: TagPickerProps): React.ReactElement {
     const [inputContainerId, helperText1] = [useId(), useId()];
     const { showCheckboxes, selectedStyle = "boxes", ariaLabel: inputLabel = "Search" } = props;
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputContainerRef = useRef<HTMLDivElement>(null);
     const { getSelectedItemProps, getDropdownProps, removeSelectedItem } = useMultipleSelection(
         props.useMultipleSelectionProps()
     );
-    const { inputValue, isOpen, highlightedIndex, getInputProps, getToggleButtonProps, getMenuProps, getItemProps } =
-        useCombobox(props.useComboboxProps());
+    const {
+        inputValue,
+        isOpen,
+        highlightedIndex,
+        getInputProps,
+        getToggleButtonProps,
+        getMenuProps,
+        getItemProps,
+        openMenu
+    } = useCombobox(props.useComboboxProps());
     const { refs, floatingStyles } = useFloatingMenu(isOpen);
 
     return (
@@ -54,19 +63,20 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
             data-expanded={isOpen}
             data-empty={props.empty ? true : undefined}
             style={props.style}
+            onClick={event => {
+                if (event.target === event.currentTarget || event.target === inputContainerRef.current) {
+                    if (!isOpen) {
+                        openMenu();
+                    } else {
+                        inputContainerRef.current?.querySelector("input")?.focus();
+                    }
+                }
+            }}
         >
             <span id={helperText1} className="sr-only">
                 Current filter values:
             </span>
-            <div
-                id={inputContainerId}
-                className={cls.inputContainer}
-                onClick={event => {
-                    if (event.currentTarget === event.target) {
-                        inputRef.current?.focus();
-                    }
-                }}
-            >
+            <div id={inputContainerId} className={cls.inputContainer} ref={inputContainerRef}>
                 {selectedStyle === "boxes" &&
                     props.selected.map((item, index) => (
                         <div
@@ -92,8 +102,8 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                         "aria-label": inputLabel,
                         onBlur: props.onBlur,
                         onFocus: props.onFocus,
-                        placeholder: props.empty ? props.inputPlaceholder : undefined,
-                        ...getDropdownProps({ preventKeyAction: isOpen, ref: inputRef }),
+                        placeholder: props.empty ? (isOpen ? props.inputPlaceholder : props.emptyCaption) : undefined,
+                        ...getDropdownProps(),
                         "aria-describedby": props.empty ? undefined : `${helperText1} ${inputContainerId}`
                     })}
                 />
@@ -103,14 +113,7 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                     </div>
                 )}
             </div>
-            <ClearButton
-                cls={cls}
-                onClick={() => {
-                    props.onClear();
-                    inputRef.current?.focus();
-                }}
-                visible={!props.empty}
-            />
+            <ClearButton cls={cls} onClick={props.onClear} visible={!props.empty} />
             <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
                 <Arrow className={cls.stateIcon} />
             </button>
@@ -123,7 +126,6 @@ export const TagPicker = observer(function TagPicker(props: TagPickerProps): Rea
                 options={props.options}
                 highlightedIndex={highlightedIndex}
                 showCheckboxes={showCheckboxes}
-                haveEmptyFirstOption={false}
                 getMenuProps={getMenuProps}
                 getItemProps={getItemProps}
             />