<p></p>
<p><b>@grekko</b> commented on this pull request.</p>

<hr>

<p>In <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4562#discussion_r1514201971">app/assets/javascripts/messages.js</a>:</p>
<pre style='color:#555'>>    });
 
-  $(".inbox-mark-read").on("ajax:success", function (event, data) {
-    updateHtml(data);
-    updateReadState(this, true);
+  $(".messages-table .message-summary").on("turbo:before-morph-element", function (event) {
</pre>
<p dir="auto">AFAIU the <code class="notranslate">turbo:before-morph-element</code>-event is only fired for DOM elements with an <code class="notranslate">id</code>. Therefore I had to set the <code class="notranslate">id</code>-attribute in <code class="notranslate">app/views/messages/_sent_message_summary.html.erb</code> which is non-obvious here.</p>
<p dir="auto">I tried to dig into the responsible underlying Idiomorph-lib <a href="https://github.com/bigskysoftware/idiomorph/blob/8e40c42cc573609eb6863e72fa3403574974dd7d/src/idiomorph.js#L122-L155">code</a> which is used by Turbo (see <a href="https://github.com/hotwired/turbo/blob/8c668612b3715cdae0b291abd2ce61baf5813c71/src/core/drive/morph_renderer.js#L28-L41">https://github.com/hotwired/turbo/blob/8c668612b3715cdae0b291abd2ce61baf5813c71/src/core/drive/morph_renderer.js#L28-L41</a>) to figure out if there is a more obvious configuration e.g. a <code class="notranslate">data</code>-attribute to subscribe to such events, but could not find anything useful yet.</p>
<p dir="auto">It is a bit unfortunate that the <code class="notranslate">id</code> is set just to subscribe for the <code class="notranslate">turbo:before-morph-element</code>-event. We could rename the <code class="notranslate">id</code> so reflect this since we do not care about the actual value here, e.g. to <code class="notranslate">id="turbo-morph-element-#{message_summary.id}"</code>.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4562#pullrequestreview-1919325918">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLLB4CFX37O3IEQA5ATYW3UBJAVCNFSM6AAAAABEIVPY5KVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSMJZGMZDKOJRHA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLOKDURGOAVZUCKQSN3YW3UBJA5CNFSM6AAAAABEIVPY5KWGG33NNVSW45C7OR4XAZNRKB2WY3CSMVYXKZLTORJGK5TJMV32UY3PNVWWK3TUL5UWJTTSM2LN4.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4562/review/1919325918</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4562#pullrequestreview-1919325918",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4562#pullrequestreview-1919325918",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>