fix(background): multiple backgrounds, separate pattern ids closes #1037

src/additional-components/Background/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, HTMLAttributes } from 'react';
+import React, { memo, useMemo, FC, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
@@ -17,15 +17,17 @@ const defaultColors = {
   [BackgroundVariant.Lines]: '#eee',
 };
 
-const Background = ({
+const Background: FC<BackgroundProps> = ({
   variant = BackgroundVariant.Dots,
   gap = 15,
   size = 0.5,
   color,
   style,
   className,
-}: BackgroundProps) => {
+}) => {
   const [x, y, scale] = useStoreState((s) => s.transform);
+  // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
+  const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []);
 
   const bgClasses = cc(['react-flow__background', className]);
   const scaledGap = gap * scale;
@@ -45,11 +47,17 @@ const Background = ({
         height: '100%',
       }}
     >
-      <pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
+      <pattern
+        id={patternId}
+        x={xOffset}
+        y={yOffset}
+        width={scaledGap}
+        height={scaledGap}
+        patternUnits="userSpaceOnUse"
+      >
         {path}
       </pattern>
-
-      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
     </svg>
   );
 };