Two DOM/React gotchas hit while building inline table editing and nested confirmation dialogs: (1) a confirmation <dialog> rendered as a React child of another open <dialog> closes the outer one when it opens or closes, because React dispatches the non-bubbling native "close" event to every onClose handler up the React tree (StrictMode's effect double-run triggers it immediately). (2) Reading form.id on an HTMLFormElement returns a child control named "id" (named-property access), so code that sets el.setAttribute("form", form.id) on fields associated later writes "[object HTMLInputElement]".

A React component opens a native <dialog> with showModal() inside a useEffect, and the dialog contains an input with React's autoFocus prop. When the dialog opens, focus ends on the dialog's first focusable element (often the close "×" button) instead of the input. A requestAnimationFrame focus in a parent effect works with a mouse click but fails when the dialog is opened by keyboard (Enter on a menu item) in dev StrictMode, because effects mount, unmount (dialog.close()) and mount again (showModal again).