nohype/main-site
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix server-rendered admin messages never auto-dismissing
All checks were successful
CI / nightly-e2e (pull_request) Has been skipped
Details
CI / deploy (pull_request) Has been skipped
Details
CI / ci (pull_request) Successful in 1m25s
Details
CI / pr-e2e (pull_request) Successful in 1m24s
Details

Browse Source 
Root cause: Wagtail's w-messages Stimulus controller only auto-clears
messages added dynamically via JavaScript (the add() method).  Server-
rendered messages — the <li> elements produced by Django's messages
framework after a redirect — have no connect() lifecycle handler and
sit in the DOM indefinitely.

PR #64 added data-w-messages-auto-clear-value="8000" which correctly
handles dynamic messages, but server-rendered ones were unaffected.
PR #64 also added {% ifchanged %} for de-duplication, which doesn't
address persistence.

Fix: mark server-rendered <li> elements with data-server-rendered and
add an inline script that removes them after 8 seconds (matching the
auto-clear timeout for dynamic messages).  Also remove the ineffective
{% ifchanged %} de-duplication.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-03-19 10:55:30 +00:00
parent 0fab9ac0bf
commit ff587d9e1b
2 changed files with 77 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/wagtailadmin/base.html
View File

@@ -8,25 +8,24 @@
{% keyboard_shortcuts_dialog %}
<main class="content-wrapper w-overflow-x-hidden" id="main">
<div class="content">
{# Always show messages div so it can be appended to by JS #}
<div class="messages" role="status" data-controller="w-messages" data-action="w-messages:add@document->w-messages#add" data-w-messages-added-class="new" data-w-messages-show-class="appear" data-w-messages-show-delay-value="100" data-w-messages-auto-clear-value="8000">
<ul data-w-messages-target="container">
{% if messages %}
{% for message in messages %}
{% message_level_tag message as level_tag %}
{% ifchanged level_tag message.extra_tags message %}
<li class="{% message_tags message %}">
{% if level_tag == "error" %}
{% icon name="warning" classname="messages-icon" %}
{% elif message.extra_tags == "lock" %}
{% icon name="lock" classname="messages-icon" %}
{% elif message.extra_tags == "unlock" %}
{% icon name="lock-open" classname="messages-icon" %}
{% else %}
{% icon name=level_tag classname="messages-icon" %}
{% endif %}
{{ message }}
</li>
{% endifchanged %}
<li class="{% message_tags message %}" data-server-rendered>
{% if level_tag == "error" %}
{% icon name="warning" classname="messages-icon" %}
{% elif message.extra_tags == "lock" %}
{% icon name="lock" classname="messages-icon" %}
{% elif message.extra_tags == "unlock" %}
{% icon name="lock-open" classname="messages-icon" %}
{% else %}
{% icon name=level_tag classname="messages-icon" %}
{% endif %}
{{ message }}
</li>
{% endfor %}
{% endif %}
</ul>
@@ -41,6 +40,27 @@
</template>
</div>
{% comment %}
Wagtail's w-messages Stimulus controller only auto-clears messages
added dynamically via JavaScript (the add() method). Server-rendered
messages — the <li> elements above — have no connect() handler and
sit in the DOM forever. This script schedules their removal so they
auto-dismiss after the same timeout used for dynamic messages.
{% endcomment %}
<script>
(function () {
var items = document.querySelectorAll('[data-server-rendered]');
if (!items.length) return;
setTimeout(function () {
items.forEach(function (el) { el.remove(); });
var ul = document.querySelector('[data-w-messages-target="container"]');
if (ul && !ul.children.length) {
document.body.classList.remove('has-messages');
}
}, 8000);
})();
</script>
{% block content %}{% endblock %}
</div>
</main>