In my previous article, I wrote that if we use the oe_chatter class chatter will not appear if opened from a modal. After I looked in more detail, it turned out that why odoo doing it was on purpose.

In odoo 12 if the chatter is opened from a modal, the chatter will be hidden with CSS code. Please take a look at the odoo source code starting on line 627 at odoo’s github page..

So if we want to display the chatter in a modal we have to override the code above, like in the code below.

.modal .modal-dialog .o_form_view .oe_chatter {
    display: block !important;
}

I’ve created a module that override the odoo’s CSS code above. Please download here. After the module is installed, when opening a modal that has a DIV element with the oe_chatter class, the chatter will appear. The Log Note button is also displayed so we can add a note manually.

I wrote the module above based on odoo 12, but it can also be used in odoo 13.

What is different is odoo 14. In odoo 14, the chatter also does not appear if it is opened from a modal by default. But it is also more complex, because apart from being hidden with CSS code, it is also hidden with javascript code. Please take a look at the javascript code starting on line 133 in odoo source code here.

In the odoo source code above, it can be seen that if there is a DIV element with the oe_chatter class and it is opened from a modal, it will return an empty DIV element. Besides, it will return the chatter block. To make the chatter appear in a modal we have to override the _renderNode method above with code like below.

odoo.define('show_chatter_on_modal.form_renderer.js', function (require) {
"use strict";

    const FormRenderer = require('web.FormRenderer');
    require('mail/static/src/widgets/form_renderer/form_renderer.js');

    FormRenderer.include({
        _renderNode(node) {
            if (node.tag === 'div' && node.attrs.class === 'oe_chatter') {
                return this._makeChatterContainerTarget();
            }else{
                return this._super.apply(this, arguments);
            }            
        },
    });

});

When we inspect the chatter view with the google chrome developer tool, the DIV element with the oe_chatter class is also missing, because the element will be replaced with the DIV element with the o_FormRenderer_chatterContainer class. By default elements with o_FormRenderer_chatterContainer class also do not appear if opened from a modal, please take a look at the CSS code starting on line 15 in odoo source code. Therefore we must override the CSS code above.

.modal .modal-dialog .o_form_view .o_FormRenderer_chatterContainer {
    display: block !important;
}

Download the show_chatter_on_modal module for odoo 14 here.