fix(native-filters): Add empty text node before OutPortal (#22289)

apache · Dec 1, 2022 · ffff3e4 · ffff3e4
1 parent 3ffe782
commit ffff3e4
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -90,7 +90,14 @@ const FilterControls: FC<FilterControlsProps> = ({
   const renderer = useCallback(
     ({ id }: Filter | Divider) => {
       const index = filtersWithValues.findIndex(f => f.id === id);
-      return <OutPortal key={id} node={portalNodes[index]} inView />;
+      return (
+        // Empty text node is to ensure there's always an element preceding
+        // the OutPortal, otherwise react-reverse-portal crashes
+        <React.Fragment key={id}>
+          {'' /* eslint-disable-line react/jsx-curly-brace-presence */}
+          <OutPortal node={portalNodes[index]} inView />
+        </React.Fragment>
+      );
     },
     [filtersWithValues, portalNodes],
   );