[FIX] web: m2x_tags_avatar is in edit mode

Since commit 2ecfed335d, m2x_tags_avatar
are based on dynamic.readonly to know if they are readonly or not. This
is a mistake, the only information that depends on dynamic.readonly is
the presence or absence of the popover.
In this commit, we'll set the initial value to readonly and add the
isEditable props that will tell iif you can delete or add records with
the popover.

closes odoo/odoo#116782

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js

@@ -144,15 +144,21 @@ export class KanbanMany2ManyTagsAvatarField extends Many2ManyTagsAvatarField {
         ...Many2ManyTagsAvatarField.components,
         TagsList: KanbanMany2ManyTagsAvatarFieldTagsList,
     };
+    static props = {
+        ...Many2ManyTagsAvatarField.props,
+        isEditable: { type: Boolean, optional: true },
+    };
     itemsVisible = 2;
 
     get popoverProps() {
-        return {
+        const props = {
             ...this.props,
-            readonly: this.props.readonly,
+            readonly: false,
             deleteTag: this.deleteTag.bind(this),
             updateTag: this.updateTag.bind(this),
         };
+        delete props.isEditable;
+        return props;
     }
     async deleteTag(id) {
         super.deleteTag(id);
@@ -178,7 +184,7 @@ export const kanbanMany2ManyTagsAvatarField = {
     component: KanbanMany2ManyTagsAvatarField,
     extractProps(fieldInfo, dynamicInfo) {
         const props = many2ManyTagsAvatarField.extractProps(...arguments);
-        props.readonly = dynamicInfo.readonly;
+        props.isEditable = !dynamicInfo.readonly;
         return props;
     },
 };

addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml

@@ -47,7 +47,7 @@
        owl="1">
         <xpath expr="//TagsList" position="attributes">
             <attribute name="popoverProps">popoverProps</attribute>
-            <attribute name="readonly">props.readonly</attribute>
+            <attribute name="readonly">!props.isEditable</attribute>
         </xpath>
     </t>
     <t t-name="web.Many2ManyTagsAvatarFieldPopover" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary" owl="1">

addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js

@@ -55,6 +55,10 @@ export class Many2OneFieldPopover extends Many2OneField {
 
 export class KanbanMany2OneAvatarField extends Many2OneAvatarField {
     static template = "web.KanbanMany2OneAvatarField";
+    static props = {
+        ...Many2OneAvatarField.props,
+        isEditable: { type: Boolean, optional: true },
+    };
     setup() {
         super.setup();
         this.popover = usePopover();
@@ -65,13 +69,15 @@ export class KanbanMany2OneAvatarField extends Many2OneAvatarField {
         this.closePopoverFn = null;
     }
     get popoverProps() {
-        return {
+        const props = {
             ...this.props,
             readonly: false,
         };
+        delete props.isEditable;
+        return props;
     }
     openPopover(ev) {
-        if (this.props.readonly) {
+        if (!this.props.isEditable) {
             return;
         }
         if (this.closePopoverFn) {
@@ -93,10 +99,10 @@ export class KanbanMany2OneAvatarField extends Many2OneAvatarField {
     }
 
     get canDisplayDelete() {
-        return !this.props.readonly && this.props.record.data[this.props.name] && !isMobileOS();
+        return this.props.isEditable && this.props.record.data[this.props.name] && !isMobileOS();
     }
     async remove(ev) {
-        if (this.props.readonly) {
+        if (!this.props.isEditable) {
             return;
         }
         await this.props.record.update({ [this.props.name]: false });
@@ -110,7 +116,7 @@ export const kanbanMany2OneAvatarField = {
     additionalClasses: ["o_field_many2one_avatar_kanban"],
     extractProps(fieldInfo, dynamicInfo) {
         const props = many2OneField.extractProps(...arguments);
-        props.readonly = dynamicInfo.readonly;
+        props.isEditable = !dynamicInfo.readonly;
         return props;
     },
 };

addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js

@@ -279,7 +279,7 @@ QUnit.module("Fields", (hooks) => {
     );
 
     QUnit.test("widget many2many_tags_avatar in kanban view", async function (assert) {
-        assert.expect(16);
+        assert.expect(17);
 
         const records = [];
         for (let id = 5; id <= 15; id++) {
@@ -400,6 +400,7 @@ QUnit.module("Fields", (hooks) => {
             "9+",
             "should have 9+ in o_m2m_avatar_empty"
         );
+        assert.containsNone(target, ".o_field_many2many_tags_avatar .o_field_many2many_selection");
 
         // check delete
         const firstTag = target.querySelector(