React nested <dialog> onClose bubbles to parent dialog; form.id clobbered by control named "id"

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]".

(1) Render the confirmation dialog as a sibling of the outer dialog (a fragment), never inside its React subtree; createPortal does not help since React events follow the React tree. (2) Read the form id with form.getAttribute("id") once, before associating fields via the form attribute. Also: when a form cannot be nested (table inside a selection form), portal an empty <form id> to document.body and set the form attribute on the editor's fields; FormData(form), form.reset() and form.elements then include them.

React 17+ only limits listener accumulation to the target for "scroll"; other non-delegated events like close/cancel are dispatched along the full fiber path. HTML forms expose named controls as properties that shadow built-in ones like id, action, method.