From 6b803ebfd63aa07635d5176e61a4eceeed44cc9b Mon Sep 17 00:00:00 2001
From: Guy Sartorelli <guy.sartorelli@silverstripe.com>
Date: Thu, 19 Jan 2023 14:22:52 +1300
Subject: [PATCH] FIX Reuse emotion cache to avoid conflicts

Creating a new emotion cache for each provider can result in clashes
---
 .../EmotionCssCacheProvider.js                 | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/containers/EmotionCssCacheProvider/EmotionCssCacheProvider.js b/client/src/containers/EmotionCssCacheProvider/EmotionCssCacheProvider.js
index d5b0e9796..14cc80f4a 100644
--- a/client/src/containers/EmotionCssCacheProvider/EmotionCssCacheProvider.js
+++ b/client/src/containers/EmotionCssCacheProvider/EmotionCssCacheProvider.js
@@ -7,15 +7,17 @@ import { CacheProvider } from '@emotion/react';
  * the default react-select styling
  */
 function EmotionCssCacheProvider({ children }) {
-  const cache = React.useMemo(
-    () => createCache({
-        key: 'react-select',
-        insertionPoint: document.querySelector('title'),
-      }),
-    []
-  );
+  if (!window.ssReactSelectCache) {
+    window.ssReactSelectCache = React.useMemo(
+      () => createCache({
+          key: 'react-select',
+          insertionPoint: document.querySelector('title'),
+        }),
+      []
+    );
+  }
 
-  return <CacheProvider value={cache}>{children}</CacheProvider>;
+  return <CacheProvider value={window.ssReactSelectCache}>{children}</CacheProvider>;
 }
 
 export default EmotionCssCacheProvider;