How to remove a dialog from memory in React UXP plugin

InDesign
1

Im working on a plugin that utilizes dialogs as presented in this blog post from David Barranca (if theres a better method i’m all ears).

my dialog is intended to read the contents of an htmlItem on the active page, which it can, but ive noticed that closing the dialog does not remove it from memory so opening it again on another page it:

  1. does not seem to trigger a render of the element (console logs do not trigger again, either inside or outside of a useEffect) and
  2. the content it reads from the first time it was open has not updated and the reading of a new page does not happen again.

heres my initial dialog component:

export default function KnowledgeCheckDialog() {
    let kcDialog = null
    
    const handleClose = async () => {
        kcDialog.close()
    }

    const openKC = async () => {
        if (!kcDialog) {
            kcDialog = document.createElement("dialog")
            kcDialog.style.padding = "1rem"

            const root = createRoot(kcDialog)
            root.render(<KnowledgeCheck dialog={kcDialog} handleClose={handleClose} />)
        }
        document.body.appendChild(kcDialog)

        await kcDialog.uxpShowModal({
            title: "Make or Edit Knowledge Checks",
        })
    }
    return (
        <sp-action-button onClick={openKC} width="200" style={{ margin: "10px" }}>
            <div slot="icon">
                <EducationIcon />
            </div>
            Knowledge Check
        </sp-action-button>
    )
}

the handle close triggers when the cancel button is clicked (not shown), but the dialogs data is not cleared. Using remove() instead of close() throws a warning in UDT debug stating ​ The dialog was detached from the node without being closed. Even if handleClose has close() then remove() it still throws the warning, and neither instance clears it from memory.

anyone have any tips or advise?

2

Nevermind, i think i figured it out. i added

        kcDialog.onclose = () => {
            kcDialog = null
        }

into the bottom of the openKC function and that seems to do it.