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],
  );