Fix for error when rendering multiple app checks.

Fix for Cloud css not loading correctly between projects
firecmsco · Sep 13, 2024 · b83d98e · b83d98e
1 parent 0b0366a
commit b83d98e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/firebase_firecms/src/hooks/useAppCheck.ts b/packages/firebase_firecms/src/hooks/useAppCheck.ts
@@ -69,6 +69,9 @@ export function useAppCheck({
             provider,
             isTokenAutoRefreshEnabled
         } = options;
+
+        removeCurrentAppCheckDiv();
+
         const appCheck = initializeAppCheck(firebaseApp, {
             provider,
             isTokenAutoRefreshEnabled
@@ -87,3 +90,12 @@ export function useAppCheck({
         error
     };
 }
+
+
+function removeCurrentAppCheckDiv() {
+    const div = document.getElementById("fire_app_check_[DEFAULT]");
+    if (div) {
+        div.remove();
+    }
+}
+
diff --git a/packages/firecms_cloud/src/api/projects.ts b/packages/firecms_cloud/src/api/projects.ts
@@ -212,6 +212,7 @@ export function buildProjectsApi(host: string, getBackendAuthToken: () => Promis
         doDelegatedLogin,
         getStripePortalLink,
 
+        host,
         getRemoteConfigUrl
     }
 }

diff --git a/packages/ui/src/components/Select.tsx b/packages/ui/src/components/Select.tsx
@@ -5,7 +5,8 @@ import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundInvisibleMixin,
-    fieldBackgroundMixin
+    fieldBackgroundMixin,
+    focusedDisabled
 } from "../styles";
 import { CheckIcon, ExpandMoreIcon } from "../icons";
 import { cls } from "../util";
@@ -161,7 +162,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             </div>
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content position={position}
-                                         className={cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin)}>
+                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={"p-1"}
                                               style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
@@ -205,8 +206,7 @@ export function SelectItem({
             "[&>*]:w-full",
             "overflow-visible",
             className
-        )}
-    >
+        )}>
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">