Turbo Morph with Dialog causes issues
Author: htcarr3Created Apr 4, 2024Updated Jun 23, 2026
When a <dialog> element is opened modally with .showModal(), the browser moves it into the top layer. Morphing seems to reload the content on the page, but does not reset the top layer. From the user's perspective, nothing on the page is interactive because everything is stuck underneath the top layer (even though the top layer is empty). I'm not sure what the solution to this is given there is no api to interact directly with the top layer. Maybe this can be solved with event listeners to either skip or .close() these sorts of elements.
Source: hotwired/turbo