diff --git a/src/components/CreateTeam/UpdateTeamResourceModal.tsx b/src/components/CreateTeam/UpdateTeamResourceModal.tsx index c98cf6357..28e5f6ed4 100644 --- a/src/components/CreateTeam/UpdateTeamResourceModal.tsx +++ b/src/components/CreateTeam/UpdateTeamResourceModal.tsx @@ -8,6 +8,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click'; import { useKeydown } from '../../hooks/use-keydown'; import type { TeamResourceConfig } from './RoadmapSelector'; import { useToast } from '../../hooks/use-toast'; +import {replaceChildren} from "../../lib/dom.ts"; export type ProgressMapProps = { teamId: string; @@ -81,7 +82,8 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) { fontURL: '/fonts/balsamiq.woff2', }); - containerEl.current?.replaceChildren(svg); + replaceChildren(containerEl.current!, svg); + // containerEl.current?.replaceChildren(svg); // Render team configuration removedItems.forEach((topicId: string) => { diff --git a/src/components/FrameRenderer/renderer.ts b/src/components/FrameRenderer/renderer.ts index d61d4c4ec..241477b91 100644 --- a/src/components/FrameRenderer/renderer.ts +++ b/src/components/FrameRenderer/renderer.ts @@ -10,6 +10,7 @@ import { import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress'; import { pageProgressMessage } from '../../stores/page'; import { showLoginPopup } from '../../lib/popup'; +import {replaceChildren} from "../../lib/dom.ts"; export class Renderer { resourceId: string; @@ -88,7 +89,8 @@ export class Renderer { }); }) .then((svg) => { - this.containerEl?.replaceChildren(svg); + replaceChildren(this.containerEl!, svg); + // this.containerEl?.replaceChildren(svg); }) .then(() => { return renderResourceProgress( diff --git a/src/components/TeamProgress/MemberProgressModal.tsx b/src/components/TeamProgress/MemberProgressModal.tsx index de8e8597b..70d12efa2 100644 --- a/src/components/TeamProgress/MemberProgressModal.tsx +++ b/src/components/TeamProgress/MemberProgressModal.tsx @@ -17,6 +17,7 @@ import { useToast } from '../../hooks/use-toast'; import { useAuth } from '../../hooks/use-auth'; import { pageProgressMessage } from '../../stores/page'; import { MemberProgressModalHeader } from './MemberProgressModalHeader'; +import {replaceChildren} from "../../lib/dom.ts"; export type ProgressMapProps = { member: TeamMember; @@ -91,7 +92,8 @@ export function MemberProgressModal(props: ProgressMapProps) { fontURL: '/fonts/balsamiq.woff2', }); - containerEl.current?.replaceChildren(svg); + replaceChildren(containerEl.current!, svg); + // containerEl.current?.replaceChildren(svg); } useKeydown('Escape', () => { diff --git a/src/lib/dom.ts b/src/lib/dom.ts new file mode 100644 index 000000000..a8acab84d --- /dev/null +++ b/src/lib/dom.ts @@ -0,0 +1,8 @@ +export function replaceChildren(parentNode: Element, newChild: Element) { + if (parentNode.replaceChildren) { + return parentNode.replaceChildren(newChild); + } + + parentNode.innerHTML = ''; + parentNode.append(newChild); +}