Debugging the display none issue in Discourse embeds

So after nearly breaking my computer, I’ve found a workaround — probably not the ideal one :sweat_smile:

It appears that when clicking Reply inside the Full App Embed, the composer actually opens correctly in the DOM (#reply-control.open), but for some reason it remains display: none.

I confirmed this in the browser console: the composer was present, but its computed display value was “none”. Manually running:

document.querySelector('#reply-control').style.setProperty('display', 'block', 'important');

immediately made the composer appear and everything worked normally.

As a workaround, adding the following JS to the Discourse theme fixes the issue for me:

import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
if (!document.body.classList.contains("embed-mode")) {
return;
}
const fixComposer = () => {
const composer = document.querySelector("#reply-control.open");
if (composer) {
composer.style.setProperty("display", "block", "important");
}
};
const observer = new MutationObserver(fixComposer);
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ["class"],
});
fixComposer();
});

This seems to fix it completely, and I’ve limited the workaround to embed-mode so it doesn’t affect the normal Discourse interface.

Obviously this probably isn’t the ideal long-term solution, but hopefully this helps identify what is causing the open composer to remain display: none in the Full App Embed.