So it’s working perfectly with React v18, but if I upgrade to v19 and render <sp-dialog>
, it has no dimensions. I add open
attribute only when everything is already rendered, so it should have content to calculate dimensions from.
So in v18 this works:
dialogElement.setAttribute("open", "open")
In v19 I have to add a tiny timeout for it to work:
setTimeout(() => {
dialogElement.setAttribute("open", "open")
}, 10)
Here’s full snippet:
import { createRoot } from "react-dom/client"
export default (Component) => {
const dialogElement: HTMLElement = document.createElement("sp-dialog")
const root = createRoot(dialogElement)
root.render(Component({ dialog: dialogElement }))
document.body.appendChild(dialogElement)
dialogElement.addEventListener("close", () => {
dialogElement.remove()
root.unmount()
})
dialogElement.setAttribute("open", "open")
}
Any advice? I would really love to avoid yet another forced timeout