diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss
index 0e1681242b9..24324b616fa 100644
--- a/addons/web/static/src/views/fields/fields.scss
+++ b/addons/web/static/src/views/fields/fields.scss
@@ -18,3 +18,10 @@
color: inherit;
}
}
+
+.o_avatar_many2x_autocomplete > img{
+ width: 19px;
+ height: 19px;
+ object-fit: cover;
+ margin-right: 4px;
+}
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
index baf3ef89b96..7e0a39319d1 100644
--- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
@@ -3,18 +3,18 @@
import { isMobileOS } from "@web/core/browser/feature_detection";
import { usePopover } from "@web/core/popover/popover_hook";
import { registry } from "@web/core/registry";
-import { Many2XAutocomplete } from "@web/views/fields/relational_utils";
import {
many2ManyTagsField,
Many2ManyTagsField,
} from "@web/views/fields/many2many_tags/many2many_tags_field";
import { TagsList } from "../many2many_tags/tags_list";
-import { onMounted, useRef, useState } from "@odoo/owl";
+import { onMounted, useState } from "@odoo/owl";
+import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils";
export class Many2ManyTagsAvatarField extends Many2ManyTagsField {
static template = "web.Many2ManyTagsAvatarField";
static components = {
- Many2XAutocomplete,
+ Many2XAutocomplete: AvatarMany2XAutocomplete,
TagsList,
};
static props = {
@@ -100,7 +100,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList {
setup() {
super.setup();
this.popover = usePopover();
- this.emptyAvatar = useRef("emptyAvatar");
}
get visibleTagsCount() {
return this.props.itemsVisible;
@@ -116,8 +115,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList {
if (this.closePopoverFn) {
this.closePopover();
}
- this.emptyAvatar.el?.dispatchEvent(new MouseEvent("mouseleave"));
- this.emptyAvatar.el?.removeAttribute("data-tooltip-template");
this.closePopoverFn = this.popover.add(
ev.currentTarget.parentElement,
Many2ManyTagsAvatarFieldPopover,
@@ -130,12 +127,6 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList {
},
{
position: "bottom",
- onClose: () => {
- this.emptyAvatar.el?.setAttribute(
- "data-tooltip-template",
- "web.TagsList.Tooltip"
- );
- },
}
);
}
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
index 9ee33498cb3..35219e70e0c 100644
--- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
@@ -31,7 +31,6 @@
t-on-click.stop.prevent="openPopover" class="o_m2m_avatar rounded-circle align-self-center"/>
- emptyAvatar
openPopover
diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
index c5ca248d230..f698239a0a9 100644
--- a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
+++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
@@ -6,6 +6,7 @@ import { usePopover } from "@web/core/popover/popover_hook";
import { many2OneField, Many2OneField } from "../many2one/many2one_field";
import { Component, onMounted } from "@odoo/owl";
+import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils";
export class Many2OneAvatarField extends Component {
static template = "web.Many2OneAvatarField";
@@ -32,12 +33,14 @@ export const many2OneAvatarField = {
...many2OneField,
component: Many2OneAvatarField,
};
-
export class Many2OneFieldPopover extends Many2OneField {
static props = {
...Many2OneField.props,
close: { type: Function },
};
+ static components = {
+ Many2XAutocomplete: AvatarMany2XAutocomplete,
+ };
setup() {
super.setup();
onMounted(() => this.focusInput());
diff --git a/addons/web/static/src/views/fields/relational_utils.js b/addons/web/static/src/views/fields/relational_utils.js
index 95285aae247..9daa8d8e493 100644
--- a/addons/web/static/src/views/fields/relational_utils.js
+++ b/addons/web/static/src/views/fields/relational_utils.js
@@ -226,6 +226,12 @@ export class Many2XAutocomplete extends Component {
this.props.update([record], params);
}
+ mapRecordToOption(result) {
+ return {
+ value: result[0],
+ label: result[1].split("\n")[0],
+ };
+ }
async loadOptionsSource(request) {
if (this.lastProm) {
this.lastProm.abort(false);
@@ -239,10 +245,7 @@ export class Many2XAutocomplete extends Component {
});
const records = await this.lastProm;
- const options = records.map((result) => ({
- value: result[0],
- label: result[1].split("\n")[0],
- }));
+ const options = records.map((result) => this.mapRecordToOption(result));
if (this.props.quickCreate && request.length) {
options.push({
@@ -383,6 +386,21 @@ Many2XAutocomplete.defaultProps = {
context: {},
};
+export class AvatarMany2XAutocomplete extends Many2XAutocomplete {
+ mapRecordToOption(result) {
+ return {
+ ...super.mapRecordToOption(result),
+ resModel: this.props.resModel,
+ };
+ }
+ get optionsSource() {
+ return {
+ ...super.optionsSource,
+ optionTemplate: "web.AvatarMany2XAutocomplete",
+ };
+ }
+}
+
export function useOpenMany2XRecord({
resModel,
onRecordSaved,
diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
index 22c07c1e932..fba0cd9d69b 100644
--- a/addons/web/static/src/views/fields/relational_utils.xml
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -57,4 +57,12 @@
+
+
+
+
+
+
+