<h2 dir="auto">The Problem</h2>
<p dir="auto">Currently, a newly rendered <code class="notranslate">dialog</code> element can erroneously retain the "open state" a previously rendered <code class="notranslate">dialog</code> element if React <em>thinks</em> that the same element is being re-rendered. Interestingly enough, this problem doesn't seem to happen for the element's other attributes/properties.</p>
<p dir="auto">React version: <code class="notranslate">18.2.0</code></p>
<h2 dir="auto">Steps To Reproduce</h2>
<p dir="auto">The situation is best understood with a <a href="https://codesandbox.io/s/react-typescript-forked-nruu1q?file=/src/ModalComponent.tsx" rel="nofollow">CodeSandbox</a>. Notice that after the state change (which happens on submission of the <code class="notranslate">dialog</code>'s form), the <code class="notranslate">open</code> attribute is stale, but the <code class="notranslate">data-phase</code> attribute is fresh.</p>
<p dir="auto">This is potentially a problem with the reconciler ... because if you change the "phase two version" to have a wrapping <code class="notranslate">div</code>, this problem goes away. (This is not always a viable solution, however. And it's a bit hacky.)</p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">When <a href="https://codesandbox.io/s/react-typescript-forked-nruu1q?file=/src/ModalComponent.tsx" rel="nofollow"><code class="notranslate">ModalComponent</code></a> re-renders, the new <code class="notranslate">dialog</code> element that it mounts retains the <code class="notranslate">open</code> value of the previous <code class="notranslate">dialog</code> element.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">When <a href="https://codesandbox.io/s/react-typescript-forked-nruu1q?file=/src/ModalComponent.tsx" rel="nofollow"><code class="notranslate">ModalComponent</code></a> re-renders, the new <code class="notranslate">dialog</code> element that it mounts <em>should not</em> have an <code class="notranslate">open</code> attribute since none was provided for it.</p>
<h2 dir="auto">Extra Notes</h2>
<p dir="auto">The conversation would be unrelated to the bug, but in case it's brought up: Please note that the actual project that I'm working on does not simply have virtually-duplicated content between the 2 dialog elements. (The content between the two is distinct.) So combining the content under a single <code class="notranslate">dialog</code> element is not an option for me at the moment.</p>
<p dir="auto">I'm using static markup for unit testing <a href="https://github/insin/newforms" rel="nofollow">newforms</a> output and I'd also like to support using it to render forms as static HTML.</p>
<p dir="auto">Adding a <code class="notranslate">value</code> or <code class="notranslate">defaultValue</code> to a <code class="notranslate">&lt;select&gt;</code> doesn't generate static HTML with the appropriate <code class="notranslate">selected</code> attributes. However, they do get generated if you manually add them to <code class="notranslate">&lt;option&gt;</code> components, but then you get warning messages in the console when using the development build of React.</p>
<p dir="auto">Is it possible to support both use cases without manually setting <code class="notranslate">selected</code> attributes, or will I just have to live with the warnings? :)</p>
<p dir="auto">JSFiddle showing <code class="notranslate">&lt;select&gt;</code> static HTML output: <a href="http://jsfiddle.net/insin/2tvb7/3/" rel="nofollow">http://jsfiddle.net/insin/2tvb7/3/</a></p>