[Flags + Mentions] Floating quote button doesn't appear if post was just flagged or unflagged

Current Behavior

If you flag a post, after the flag styling is applied, selecting text doesn't bring up the quote button.

The same behavior happens when unflagging. The quote button appears on page load, but after the flag is dismissed and the default styling is restored, the quote button doesn't appear again.

After a page reload or moving the post out of the loaded page range and back in, it works again.

Steps to Reproduce

Access any post that is not flagged
Select Flag in the post action dropdown, choose any reason
Wait for the flag style and reason to be rendered around the post
Quote feature no longer works on that post content

Expected Behavior

Quote feature should continue working.

Screenshots

Environment

Flarum version: 1.5.0
Webserver: apache
Hosting environment: local
PHP version: 8.0
Browser: Firefox

Output of `php flarum info`

Flarum core 1.5.0
PHP version: 8.0.23
MySQL version: 8.0.31-0ubuntu0.20.04.1
Loaded extensions: Core, date, libxml, openssl, pcre, zlib, filter, hash, json, pcntl, Reflection, SPL, session, standard, sodium, mysqlnd, PDO, xml, calendar, ctype, curl, dom, mbstring, FFI, fileinfo, ftp, gd, gettext, iconv, intl, exif, mysqli, pdo_mysql, pdo_sqlite, Phar, posix, readline, shmop, SimpleXML, sockets, sqlite3, sysvmsg, sysvsem, sysvshm, tokenizer, xmlreader, xmlwriter, xsl, zip, Zend OPcache
+---------------------------+---------+--------+
| Flarum Extensions         |         |        |
+---------------------------+---------+--------+
| ID                        | Version | Commit |
+---------------------------+---------+--------+
| flarum-tags               | v1.5.0  |        |
| flarum-flags              | v1.5.0  |        |
| migratetoflarum-fake-data | 1.3.0   |        |
| flarum-suspend            | v1.5.0  |        |
| flarum-subscriptions      | v1.5.0  |        |
| flarum-sticky             | v1.5.0  |        |
| flarum-statistics         | v1.5.0  |        |
| flarum-mentions           | v1.5.0  |        |
| flarum-markdown           | v1.5.0  |        |
| flarum-lock               | v1.5.0  |        |
| flarum-likes              | v1.5.0  |        |
| flarum-lang-french        | v4.1.0  |        |
| flarum-lang-english       | v1.5.0  |        |
| flarum-emoji              | v1.5.0  |        |
| flarum-bbcode             | v1.5.0  |        |
| flarum-approval           | v1.5.0  |        |
+---------------------------+---------+--------+
Base URL: http://1.5.flarum.localhost
Installation path: /home/clark/Projects/flarum-1.5
Queue driver: sync
Mail driver: smtp
Debug mode: ON

Don't forget to turn off debug mode! It should never be turned on in a production system.

Possible Solution

I think the problem is with the $('.Post-body') selector/DOM. The Mentions extension captures a reference to .Post-body in oncreate:

https://github.com/flarum/framework/blob/ab56aefeaaefc93566179ba9a0213183fc8e777b/extensions/mentions/js/src/forum/addPostQuoteButton.js#L9-L14

But Flags inserts a new DOM node above .Post-body:

https://github.com/flarum/framework/blob/ab56aefeaaefc93566179ba9a0213183fc8e777b/extensions/flags/js/src/forum/addFlagsToPosts.js#L86-L95

I suspect Mithril re-uses the DOM nodes instead of shifting them, which causes the jQuery object in Mentions to now point to the post header instead.

We should maybe introduce keyed vdom nodes to prevent the DIVs from being re-purposed by Mithril in that area. But this might break backward compatibility if any extension inserts a node without a key.

Additional Context

Observed first on Discuss while approving posts flagged by Approval extension. But it's not actually related to Approval.

flarum / framework