diff --git a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
index d95e9de9e2..10399434c5 100644
--- a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
+++ b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js
@@ -15,6 +15,8 @@ const RESTRICTED_AREA_ITEMS_CONTAINER = 190;
 
 const Dropdown = ({
     dropdownListRef,
+    scrollContainerNode,
+    shouldCloseOutsideContainer,
     value,
     options,
     onChange,
@@ -46,6 +48,9 @@ const Dropdown = ({
         'ibexa-dropdown--expanded': isExpanded,
         [extraClasses]: true,
     });
+    const getScrollContainer = () => {
+        return scrollContainerNode || document.querySelector('.ibexa-main-container__content-column');
+    };
     const toggleExpanded = () => {
         calculateAndSetItemsListStyles();
         setIsExpanded((prevState) => !prevState && !disabled);
@@ -113,6 +118,18 @@ const Dropdown = ({
             itemsStyles.transform = 'translateY(-100%)';
         }
 
+        if (shouldCloseOutsideContainer) {
+            const scrollContainer = getScrollContainer();
+            const scrollContainerRect = scrollContainer.getBoundingClientRect();
+            const { top: scrollContainerTop, bottom: scrollContainerBottom } = scrollContainerRect;
+
+            if (top <= scrollContainerTop || top >= scrollContainerBottom) {
+                setIsExpanded(false);
+
+                return;
+            }
+        }
+
         setItemsListStyles(itemsStyles);
     };
     const renderItemsList = () => {
@@ -181,7 +198,6 @@ const Dropdown = ({
             return;
         }
 
-        const scrollContainer = document.querySelector('.ibexa-main-container__content-column');
         const onInteractionOutside = (event) => {
             if (containerRef.current.contains(event.target) || containerItemsRef.current?.contains(event.target)) {
                 return;
@@ -191,11 +207,14 @@ const Dropdown = ({
         };
 
         document.body.addEventListener('click', onInteractionOutside, false);
-        scrollContainer?.addEventListener('scroll', calculateAndSetItemsListStyles, false);
+
+        const scrollContainer = getScrollContainer();
+
+        scrollContainer.addEventListener('scroll', calculateAndSetItemsListStyles, false);
 
         return () => {
             document.body.removeEventListener('click', onInteractionOutside);
-            scrollContainer?.removeEventListener('scroll', calculateAndSetItemsListStyles);
+            scrollContainer.removeEventListener('scroll', calculateAndSetItemsListStyles);
 
             setItemsListStyles({});
         };
@@ -280,6 +299,8 @@ Dropdown.propTypes = {
     extraClasses: PropTypes.string,
     renderSelectedItem: PropTypes.func,
     minSearchItems: PropTypes.number,
+    scrollContainerNode: PropTypes.node,
+    shouldCloseOutsideContainer: PropTypes.bool,
 };
 
 Dropdown.defaultProps = {
@@ -290,6 +311,8 @@ Dropdown.defaultProps = {
     extraClasses: '',
     renderSelectedItem: (item) => item?.label,
     minSearchItems: MIN_SEARCH_ITEMS_DEFAULT,
+    scrollContainerNode: null,
+    shouldCloseOutsideContainer: false,
 };
 
 export default Dropdown;
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js
index d0d85f5adc..deaefc3435 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
-const FiltersPanel = ({ children, isApplyButtonEnabled, makeSearch, clearFilters }) => {
+const FiltersPanel = ({ children, isApplyButtonEnabled, makeSearch, clearFilters, containerRef }) => {
     const Translator = getTranslator();
     const filtersLabel = Translator.trans(/*@Desc("Filters")*/ 'filters.title', {}, 'ibexa_universal_discovery_widget');
     const clearLabel = Translator.trans(/*@Desc("Clear")*/ 'filters.clear', {}, 'ibexa_universal_discovery_widget');
     const applyLabel = Translator.trans(/*@Desc("Apply")*/ 'filters.apply', {}, 'ibexa_universal_discovery_widget');
 
     return (
-        <div className="c-filters-panel">
+        <div className="c-filters-panel" ref={containerRef}>
             <div className="c-filters-panel__header">
                 <div className="c-filters-panel__header-content">{filtersLabel}</div>
                 <div className="c-filters-panel__header-actions">
@@ -37,10 +37,12 @@ FiltersPanel.propTypes = {
     isApplyButtonEnabled: PropTypes.bool.isRequired,
     makeSearch: PropTypes.func.isRequired,
     clearFilters: PropTypes.func.isRequired,
+    containerRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
 FiltersPanel.defaultProps = {
     children: null,
+    containerRef: null,
 };
 
 export default FiltersPanel;