diff --git a/addons/website_mail_group/static/src/snippets/s_group/000.js b/addons/website_mail_group/static/src/snippets/s_group/000.js
index bb2a31b4a15..39f7b74de96 100644
--- a/addons/website_mail_group/static/src/snippets/s_group/000.js
+++ b/addons/website_mail_group/static/src/snippets/s_group/000.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import { _t } from "@web/core/l10n/translation";
+import publicWidget from "@web/legacy/js/public/public_widget";
 import MailGroup from "@mail_group/js/mail_group";
 
 MailGroup.include({
@@ -43,4 +44,40 @@ MailGroup.include({
 
         this.$el.data('isMember', this.isMember);
     },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.el.classList.add('d-none');
+        this._super(...arguments);
+    },
+});
+
+// TODO should probably have a better way to handle this, maybe the invisible
+// block system could be extended to handle this kind of things. Here we only
+// do the same as the non-edit mode public widget: showing and hiding the widget
+// but without the rest. Arguably could just enable the whole widget in edit
+// mode but not stable-friendly.
+publicWidget.registry.MailGroupEditMode = publicWidget.Widget.extend({
+    selector: MailGroup.prototype.selector,
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start: function () {
+        if (this.editableMode) {
+            this.el.classList.remove('d-none');
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        if (this.editableMode) {
+            this.el.classList.add('d-none');
+        }
+        this._super(...arguments);
+    },
 });
diff --git a/addons/website_mail_group/static/src/snippets/s_group/options.js b/addons/website_mail_group/static/src/snippets/s_group/options.js
index 47d9c0f916e..b47e69ab777 100644
--- a/addons/website_mail_group/static/src/snippets/s_group/options.js
+++ b/addons/website_mail_group/static/src/snippets/s_group/options.js
@@ -28,10 +28,8 @@ options.registry.Group = options.Class.extend({
     },
 
     cleanForSave: function () {
-        // Hide the element by default, this class will be removed
-        // if the current user has access to the group
-        this.$target.addClass('d-none');
-
+        // TODO: this should probably be done by the public widget, not the
+        // option code, not important enough to try and fix in stable though.
         const emailInput = this.$target.find('.o_mg_subscribe_email');
         emailInput.val('');
         emailInput.removeAttr('readonly');