hotwired / turbo

The speed of a single-page web application without having to write any JavaScript
https://turbo.hotwired.dev
MIT License
6.75k stars 430 forks source link

Busy state of frame committed to history #1337

Open aleho opened 2 weeks ago

aleho commented 2 weeks ago

When submitting a form to a frame with advance action the frame's busy state is not cleared and committed to history. Navigating back the frame will then appear busy.

Is this the intended behavior?

A small reproducer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="turbo-refresh-method" content="morph">
    <title>Turbo reproducer</title>
    <script src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.12/dist/turbo.es2017-umd.min.js"></script>
    <style>
        html { font-family: sans-serif; }
        turbo-frame { display: block; margin-top: 2em; padding: 1em; }
        turbo-frame[aria-busy="true"] { background-color: lightblue; }
    </style>
</head>
<body>

<turbo-frame id="top-frame" data-turbo-action="advance">
    <p>This frame is fine.</p>

    <form method="get" data-turbo-frame="_top">
        <input type="hidden" value="submitted" name="top-frame" />
        <button type="submit">Submit [target=_top]</button>
    </form>
</turbo-frame>

<turbo-frame id="busy-frame" data-turbo-action="advance">
    <p>This frame will be busy on history back navigation.</p>

    <form method="get" data-turbo-frame="busy-frame">
        <input type="hidden" value="submitted" name="busy-frame" />
        <button type="submit">Submit [target=busy-frame]</button>
    </form>
</turbo-frame>

</body>
</html>
aleho commented 4 days ago

It's not only the busy state, by the way. Form submit elements stay disabled. This gets complicated pretty quickly when submitting forms with action="get" and history navigation.