How to prevent page reload with a dialog?

Using Streamlit
, , , ,
1

Pretty much the title. I want a dialog to popup (to warn the user about unsaved changes) whenever the user tries to reload the page and therefore initiate a new session. This seems very basic and therefore I was hoping there was a clean way to accomplish this in Streamlit.

2

Not cleanly with only streamlit afaik. You could add a warning before refresh using an event listener (Window: beforeunload event - Web APIs | MDN):

image
image1492×1045 89.1 KB

app.py

import streamlit as st

with open("warn_refresh.js", "r") as f:
    js = f.read()
    st.components.v1.html(f"<script>{js}</script>", height=0)


st.title("> Confirm refresh example")
st.image("https://placecats.com/millie_neo/600/200", caption="My cat app")

warn_refresh.js

// Access the main app window
const main_window = window.parent.document.defaultView

main_window.addEventListener('beforeunload', function (event) {
    // Custom message (most browsers ignore it and show a default)   
    const message = ':( Are you sure you want to leave?';
    event.preventDefault();
    return message;
});