Fix dialog/hotwire interactions #135

edwardloveall commented 2026年03月31日 18:03:24 +02:00

When a <dialog> element is opened modally with .showModal(), the browser
moves it into the top layer.
Hotwire does page caching and restoration, but does not seem to know or
appropriately restore the top layer.

This causes dialogs to appear underneath content when navigating around the
site.

You can see it in previous versions of the code by:

• open the shift or shift occurrence filter
• submit the filter form
• hit back
• see filter superimposed

This fixes the problem by always closing any dialogs before turbo caches the
page.

https://github.com/hotwired/turbo/issues/1239

When a `<dialog>` element is opened modally with `.showModal()`, the browser moves it into the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). Hotwire does page caching and restoration, but does not seem to know or appropriately restore the top layer. This causes `dialog`s to appear underneath content when navigating around the site. You can see it in previous versions of the code by: - open the shift or shift occurrence filter - submit the filter form - hit back - see filter superimposed This fixes the problem by always closing any dialogs before turbo caches the page. https://github.com/hotwired/turbo/issues/1239

edwardloveall commented 2026年04月13日 15:20:37 +02:00

does the app use popovers that also need to be cleared or just dialogs

Just dialogs, but good call on popovers. I added some code to dismiss them as well.

> does the app use popovers that also need to be cleared or just dialogs Just dialogs, but good call on popovers. I added some code to dismiss them as well.