From 5fd025f0414b343abf3435cfab90bc9b24bdcea7 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Mon, 4 Dec 2023 22:13:21 +0000
Subject: [PATCH] Ensure hostelement is connected to dom for confirmation
 dialogs (#4012)

* ensure hostelement is connected to DOM for confirmation dialogs

* remove duplicate enum

* changeset
---
 .changeset/thin-ladybugs-travel.md            | 5 +++++
 src/ConfirmationDialog/ConfirmationDialog.tsx | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-ladybugs-travel.md

diff --git a/.changeset/thin-ladybugs-travel.md b/.changeset/thin-ladybugs-travel.md
new file mode 100644
index 00000000000..93489b128ce
--- /dev/null
+++ b/.changeset/thin-ladybugs-travel.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Ensure ConfirmationDialog adds host element to the DOM
diff --git a/src/ConfirmationDialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx
index d659ab23e1c..0fa9a28dd49 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -16,7 +16,7 @@ export interface ConfirmationDialogProps {
    * Required. This callback is invoked when a gesture to close the dialog
    * is performed. The first argument indicates the gesture.
    */
-  onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void
+  onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void
 
   /**
    * Required. The title of the ConfirmationDialog. This is usually a brief
@@ -145,11 +145,14 @@ export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDi
   )
 }
 
+let hostElement: Element | null = null
 export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {content: React.ReactNode}
 async function confirm(themeProps: ThemeProviderProps, options: ConfirmOptions): Promise<boolean> {
   const {content, ...confirmationDialogProps} = options
   return new Promise(resolve => {
-    const root = createRoot(document.createElement('div'))
+    hostElement = document.createElement('div')
+    if (!hostElement.isConnected) document.body.append(hostElement)
+    const root = createRoot(hostElement)
     const onClose: ConfirmationDialogProps['onClose'] = gesture => {
       root.unmount()
       if (gesture === 'confirm') {