fix(widget-plugin-filtering): wrap popup in FloatingPortal

Author: rahmanunver

packages/shared/widget-plugin-filtering/src/controls/filter-selector/FilterSelector.tsx

@@ -1,3 +1,4 @@
+import { FloatingPortal } from "@floating-ui/react";
 import classNames from "classnames";
 import { createElement, useMemo } from "react";
 import { useSelect } from "./useSelect";
@@ -38,26 +39,29 @@ export function FilterSelector(props: FilterSelectorProps): React.ReactElement {
                 >
                      
                 </button>
-                <ul
-                    className={classNames("filter-selectors", { hidden: !open, visible: open })}
-                    {...listboxProps}
-                    style={floatingStyles}
-                >
-                    {open &&
-                        options.map((item, index) => (
-                            <li
-                                className={classNames("filter-listitem", {
-                                    "filter-selected": selectedItem?.value === item.value,
-                                    "filter-highlighted": highlightedIndex === index
-                                })}
-                                key={item.value}
-                                {...getItemProps({ item, index })}
-                            >
-                                <div className={classNames("filter-icon", item.value)} aria-hidden />
-                                <div className="filter-label">{item.caption}</div>
-                            </li>
-                        ))}
-                </ul>
+                {open && (
+                    <FloatingPortal>
+                        <ul
+                            className={classNames("filter-selectors", { hidden: !open, visible: open })}
+                            {...listboxProps}
+                            style={floatingStyles}
+                        >
+                            {options.map((item, index) => (
+                                <li
+                                    className={classNames("filter-listitem", {
+                                        "filter-selected": selectedItem?.value === item.value,
+                                        "filter-highlighted": highlightedIndex === index
+                                    })}
+                                    key={item.value}
+                                    {...getItemProps({ item, index })}
+                                >
+                                    <div className={classNames("filter-icon", item.value)} aria-hidden />
+                                    <div className="filter-label">{item.caption}</div>
+                                </li>
+                            ))}
+                        </ul>
+                    </FloatingPortal>
+                )}
             </div>
         </div>
     );