[FIX] web: keydown traceback on empty m2m_tags(_avatar)_field

- Before this commit
On an empty m2m_tags(_avatar)_field, triggering a keydown event yields to a traceback due to an owl issue.
This will be fixed in owl later.

- After this commit
The 't-on-keydown' attribute on TagsList component has been moved into the tags themselves.

closes odoo/odoo#98840

Signed-off-by: Samuel Degueldre <sad@odoo.com>

addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js

@@ -88,10 +88,12 @@ export class Many2ManyTagsField extends Component {
     get tags() {
         return this.props.value.records.map((record) => ({
             id: record.id, // datapoint_X
+            resId: record.resId,
             text: record.data.display_name,
             colorIndex: record.data[this.props.colorField],
             onClick: (ev) => this.onBadgeClick(ev, record),
             onDelete: !this.props.readonly ? () => this.deleteTag(record.id) : undefined,
+            onKeydown: this.onTagKeydown.bind(this),
         }));
     }
 
@@ -230,7 +232,7 @@ export class Many2ManyTagsField extends Component {
         ev.stopPropagation();
     }
 
-    onTagsKeydown(ev) {
+    onTagKeydown(ev) {
         if (this.props.readonly) {
             return;
         }

addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml

@@ -6,7 +6,7 @@
             class="o_field_tags d-inline-flex flex-wrap mw-100"
             t-att-class="{'o_tags_input o_input': !props.readonly}"
         >
-            <TagsList tags="tags" t-on-keydown="onTagsKeydown"/>
+            <TagsList tags="tags"/>
             <div t-if="showM2OSelectionField" class="o_field_many2many_selection d-inline-flex w-100" t-on-keydown="onAutoCompleteKeydown" t-ref="autoComplete">
                 <Many2XAutocomplete
                     id="props.id"

addons/web/static/src/views/fields/many2many_tags/tags_list.xml

@@ -3,7 +3,7 @@
 
     <t t-name="web.TagsList" owl="1">
         <t t-foreach="visibleTags" t-as="tag" t-key="tag.id or tag_index">
-            <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge rounded-pill' : ''}`}} o_tag d-inline-flex align-items-center h-100" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)">
+            <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge rounded-pill' : ''}`}} o_tag d-inline-flex align-items-center h-100" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)" t-on-keydown="tag.onKeydown">
                 <img t-if="tag.img" t-att-src="tag.img" class="o_m2m_avatar rounded-circle"/>
                 <div t-if="props.displayBadge" class="o_tag_badge_text" t-esc="tag.text" />
                 <t t-else="">

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

@@ -7,11 +7,10 @@ import { TagsList } from "../many2many_tags/tags_list";
 
 export class Many2ManyTagsAvatarField extends Many2ManyTagsField {
     get tags() {
-        return this.props.value.records.map((record) => ({
-            id: record.id, // datapoint_X
-            text: record.data.display_name,
-            img: `/web/image/${this.props.relation}/${record.resId}/avatar_128`,
-            onDelete: !this.props.readonly ? () => this.deleteTag(record.id) : undefined,
+        return super.tags.map((tag) => ({
+            ...tag,
+            img: `/web/image/${this.props.relation}/${tag.resId}/avatar_128`,
+            onDelete: !this.props.readonly ? () => this.deleteTag(tag.id) : undefined,
         }));
     }
 }

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

@@ -6,7 +6,7 @@
             class="o_field_tags d-inline-flex flex-wrap mw-100"
             t-att-class="{'o_tags_input o_input': !props.readonly}"
         >
-            <TagsList tags="tags" itemsVisible="itemsVisible"  t-on-keydown="onTagsKeydown"/>
+            <TagsList tags="tags" itemsVisible="itemsVisible"/>
             <div t-if="showM2OSelectionField" class="o_field_many2many_selection d-inline-flex w-100" t-on-keydown="onAutoCompleteKeydown" t-ref="autoComplete">
                 <Many2XAutocomplete
                     id="props.id"