diff --git a/addons/hr/static/src/views/fields/many2many_avatar_employee_field/many2many_avatar_employee_field.js b/addons/hr/static/src/views/fields/many2many_avatar_employee_field/many2many_avatar_employee_field.js
index b966923dc12..0af4875e896 100644
--- a/addons/hr/static/src/views/fields/many2many_avatar_employee_field/many2many_avatar_employee_field.js
+++ b/addons/hr/static/src/views/fields/many2many_avatar_employee_field/many2many_avatar_employee_field.js
@@ -6,6 +6,7 @@ import {
     KanbanMany2ManyTagsAvatarUserField,
     many2ManyTagsAvatarUserField,
     kanbanMany2ManyTagsAvatarUserField,
+    listMany2ManyTagsAvatarUserField,
 } from "@mail/web/fields/many2many_avatar_user_field/many2many_avatar_user_field";
 
 export class Many2ManyTagsAvatarEmployeeField extends Many2ManyTagsAvatarUserField {
@@ -43,6 +44,13 @@ export const kanbanMany2ManyTagsAvatarEmployeeField = {
 registry
     .category("fields")
     .add("kanban.many2many_avatar_employee", kanbanMany2ManyTagsAvatarEmployeeField);
+export const listMany2ManyTagsAvatarEmployeeField = {
+    ...listMany2ManyTagsAvatarUserField,
+    additionalClasses: [
+        ...listMany2ManyTagsAvatarUserField.additionalClasses,
+        "o_field_many2many_avatar_user",
+    ],
+};
 registry
     .category("fields")
-    .add("list.many2many_avatar_employee", kanbanMany2ManyTagsAvatarEmployeeField);
+    .add("list.many2many_avatar_employee", listMany2ManyTagsAvatarEmployeeField);
diff --git a/addons/hr/static/tests/m2x_avatar_employee_tests.js b/addons/hr/static/tests/m2x_avatar_employee_tests.js
index 1108015b67c..5a874d39169 100644
--- a/addons/hr/static/tests/m2x_avatar_employee_tests.js
+++ b/addons/hr/static/tests/m2x_avatar_employee_tests.js
@@ -347,14 +347,14 @@ QUnit.test("many2many_avatar_employee widget in kanban view", async function (as
     assert.containsN(
         document.body,
         ".o_kanban_record:first .o_field_many2many_avatar_employee img.o_m2m_avatar",
-        3,
-        "should have 2 avatar images and the default empty avatar"
+        2,
+        "should have 2 avatar images"
     );
     assert.strictEqual(
         document
             .querySelector(".o_kanban_record .o_field_many2many_avatar_employee img.o_m2m_avatar")
             .getAttribute("data-src"),
-        `/web/image/hr.employee.public/${employeeId_1}/avatar_128`
+        `/web/image/hr.employee.public/${employeeId_2}/avatar_128`,
     );
     assert.strictEqual(
         document
@@ -362,11 +362,11 @@ QUnit.test("many2many_avatar_employee widget in kanban view", async function (as
                 ".o_kanban_record .o_field_many2many_avatar_employee img.o_m2m_avatar"
             )[1]
             .getAttribute("data-src"),
-        `/web/image/hr.employee.public/${employeeId_2}/avatar_128`
+        `/web/image/hr.employee.public/${employeeId_1}/avatar_128`,
     );
 
-    await dom.click(document.querySelector(".o_kanban_record .o_m2m_avatar"));
-    await dom.click(document.querySelectorAll(".o_kanban_record .o_m2m_avatar")[1]);
+    await dom.click(document.querySelectorAll('.o_kanban_record img.o_m2m_avatar')[1]);
+    await dom.click(document.querySelectorAll('.o_kanban_record img.o_m2m_avatar')[0]);
     assert.verifySteps([
         `read hr.employee.public ${employeeId_1},${employeeId_2}`,
         `read hr.employee.public ${employeeId_1}`,
diff --git a/addons/mail/static/tests/web/fields/m2x_avatar_user_tests.js b/addons/mail/static/tests/web/fields/m2x_avatar_user_tests.js
index 342aa4562bc..7db434a06c2 100644
--- a/addons/mail/static/tests/web/fields/m2x_avatar_user_tests.js
+++ b/addons/mail/static/tests/web/fields/m2x_avatar_user_tests.js
@@ -59,10 +59,10 @@ QUnit.test("many2many_avatar_user in kanban view", async (assert) => {
     );
     const tags = document.querySelectorAll(".o_popover > .o_field_tags > .o_tag");
     assert.strictEqual(tags.length, 4);
-    assert.strictEqual(tags[0].innerText.trim(), "Mario");
-    assert.strictEqual(tags[1].innerText.trim(), "Yoshi");
-    assert.strictEqual(tags[2].innerText.trim(), "Luigi");
-    assert.strictEqual(tags[3].innerText.trim(), "Tapu");
+    assert.strictEqual(tags[0].innerText.trim(), "Tapu");
+    assert.strictEqual(tags[1].innerText.trim(), "Luigi");
+    assert.strictEqual(tags[2].innerText.trim(), "Yoshi");
+    assert.strictEqual(tags[3].innerText.trim(), "Mario");
 });
 
 QUnit.test(
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.js b/addons/web/static/src/core/autocomplete/autocomplete.js
index e2de3f4dcd8..e6567b04946 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.js
+++ b/addons/web/static/src/core/autocomplete/autocomplete.js
@@ -41,10 +41,14 @@ export class AutoComplete extends Component {
         });
 
         // position and size
-        usePosition(() => this.inputRef.el, {
-            popper: "sourcesList",
-            position: "bottom-start",
-        });
+        if (this.props.dropdown) {
+            usePosition(() => this.inputRef.el, {
+                popper: "sourcesList",
+                position: "bottom-start",
+            });
+        } else {
+            this.open(false);
+        }
     }
 
     get isOpened() {
@@ -99,6 +103,9 @@ export class AutoComplete extends Component {
             this.navigate(0);
         });
     }
+    get displayOptions() {
+        return !this.props.dropdown || (this.isOpened && this.hasOptions);
+    }
     loadOptions(options, request) {
         if (typeof options === "function") {
             return options(request);
@@ -234,7 +241,16 @@ export class AutoComplete extends Component {
         this.inputRef.el.setSelectionRange(0, this.inputRef.el.value.length);
         this.props.onFocus(ev);
     }
-
+    get autoCompleteRootClass() {
+        let classList = "";
+        if (this.props.class) {
+            classList += this.props.class;
+        }
+        if (this.props.dropdown) {
+            classList += " dropdown";
+        }
+        return classList;
+    }
     onInputKeydown(ev) {
         const hotkey = getActiveHotkey(ev);
         switch (hotkey) {
@@ -324,12 +340,14 @@ Object.assign(AutoComplete, {
         onBlur: { type: Function, optional: true },
         onFocus: { type: Function, optional: true },
         input: { type: Function, optional: true },
+        dropdown: { type: Boolean, optional: true },
         autofocus: { type: Boolean, optional: true },
         class: { type: String, optional: true },
     },
     defaultProps: {
         placeholder: "",
         autoSelect: false,
+        dropdown: true,
         onInput: () => {},
         onChange: () => {},
         onBlur: () => {},
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.xml b/addons/web/static/src/core/autocomplete/autocomplete.xml
index fef78f82f1c..8ade9a819ed 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.xml
+++ b/addons/web/static/src/core/autocomplete/autocomplete.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.AutoComplete" owl="1">
-        <div class="o-autocomplete dropdown" t-ref="root" t-att-class="props.class">
+        <div class="o-autocomplete" t-ref="root" t-att-class="autoCompleteRootClass">
             <input
                 type="text"
                 t-att-id="props.id"
@@ -18,11 +18,20 @@
                 t-on-focus="onInputFocus"
                 t-ref="input"
             />
-            <t t-if="isOpened and hasOptions">
-                <ul class="o-autocomplete--dropdown-menu dropdown-menu ui-widget ui-autocomplete show" t-on-mousedown.prevent="" t-ref="sourcesList">
+            <t t-if="displayOptions">
+                <ul class="o-autocomplete--dropdown-menu ui-widget show"
+                    t-att-class="{
+                        'dropdown-menu ui-autocomplete': props.dropdown,
+                        'list-group': !props.dropdown
+                     }"
+                    t-on-mousedown.prevent="" t-ref="sourcesList">
                     <t t-foreach="sources" t-as="source" t-key="source.id">
                         <t t-if="source.isLoading">
-                            <li class="o-autocomplete--dropdown-item ui-menu-item">
+                            <li class="ui-menu-item"
+                                t-att-class="{
+                                    'o-autocomplete--dropdown-item': props.dropdown,
+                                    'd-block': !props.dropdown
+                                }">
                                 <a href="#" class="dropdown-item ui-menu-item-wrapper">
                                     <i class="fa fa-spin fa-circle-o-notch" /> <t t-esc="source.placeholder" />
                                 </a>
@@ -31,7 +40,7 @@
                         <t t-else="">
                             <t t-foreach="source.options" t-as="option" t-key="option.id">
                                 <li
-                                    class="o-autocomplete--dropdown-item ui-menu-item"
+                                    class="o-autocomplete--dropdown-item ui-menu-item d-block"
                                     t-att-class="option.classList"
                                     t-on-mouseenter="() => this.onOptionMouseEnter([source_index, option_index])"
                                     t-on-mouseleave="() => this.onOptionMouseLeave([source_index, option_index])"
diff --git a/addons/web/static/src/core/popover/popover_service.js b/addons/web/static/src/core/popover/popover_service.js
index c84f4ec9252..99ebbf617ee 100644
--- a/addons/web/static/src/core/popover/popover_service.js
+++ b/addons/web/static/src/core/popover/popover_service.js
@@ -11,7 +11,6 @@ import { PopoverController } from "./popover_controller";
  *   popoverClass?: string;
  *   position?: import("@web/core/position_hook").Direction;
  *   onPositioned?: import("@web/core/position_hook").PositionEventHandler;
- *   preventClose?: () => void;
  * }} PopoverServiceAddOptions
  */
 
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 9dd5d289f2a..84b3853ebcf 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
@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { isMobileOS } from "@web/core/browser/feature_detection";
 import { usePopover } from "@web/core/popover/popover_hook";
 import { registry } from "@web/core/registry";
 import {
@@ -8,7 +7,6 @@ import {
     Many2ManyTagsField,
 } from "@web/views/fields/many2many_tags/many2many_tags_field";
 import { TagsList } from "../many2many_tags/tags_list";
-import { onMounted, useState } from "@odoo/owl";
 import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils";
 
 export class Many2ManyTagsAvatarField extends Many2ManyTagsField {
@@ -58,30 +56,32 @@ export class Many2ManyTagsAvatarFieldPopover extends Many2ManyTagsAvatarField {
     static props = {
         ...Many2ManyTagsAvatarField.props,
         close: { type: Function },
-        deleteTag: { type: Function },
-        updateTag: { type: Function },
     };
 
     setup() {
         super.setup();
-        this.state = useState({ tags: this.tags });
+        const originalUpdate = this.update;
         this.update = async (recordList) => {
-            const updatedVal = await this.props.updateTag(recordList);
-            this.state.tags = updatedVal.map((tag) => ({
-                ...tag,
-                onDelete: () => this.deleteTag(tag.id),
-            }));
+            await originalUpdate(recordList);
+            await this._saveUpdate();
         };
-        onMounted(() => {
-            this.autoCompleteRef.el.querySelector("input").focus();
-        });
     }
-    async deleteTag(id) {
-        const updatedVal = await this.props.deleteTag(id);
-        this.state.tags = updatedVal.map((tag) => ({
-            ...tag,
-            onDelete: () => this.deleteTag(tag.id),
-        }));
+
+    deleteTag(id) {
+        super.deleteTag(id);
+        this._saveUpdate();
+    }
+
+    async _saveUpdate() {
+        await this.props.record.save({ noReload: true });
+        // manual render to dirty record
+        this.render();
+        // update dropdown
+        this.autoCompleteRef.el.querySelector("input").click();
+    }
+
+    get tags() {
+        return super.tags.reverse();
     }
 }
 
@@ -126,15 +126,17 @@ export class KanbanMany2ManyTagsAvatarFieldTagsList extends TagsList {
                 canCreate: false,
                 canCreateEdit: false,
                 canQuickCreate: false,
+                placeholder: this.env._t("Search users..."),
             },
             {
                 position: "bottom",
+                popoverClass: "o_m2m_tags_avatar_field_popover",
+                closeOnClickAway: (target) => !target.closest(".modal"),
             }
         );
     }
-
-    get canDisplayDelete() {
-        return !this.props.readonly && !isMobileOS();
+    get canDisplayQuickAssignAvatar() {
+        return !this.props.readonly && !(this.props.tags && this.otherTags.length);
     }
 }
 
@@ -154,28 +156,12 @@ export class KanbanMany2ManyTagsAvatarField extends Many2ManyTagsAvatarField {
         const props = {
             ...this.props,
             readonly: false,
-            deleteTag: this.deleteTag.bind(this),
-            updateTag: this.updateTag.bind(this),
         };
         delete props.isEditable;
         return props;
     }
-    async deleteTag(id) {
-        super.deleteTag(id);
-        await this.props.record.save({ noReload: true });
-        return this.tags;
-    }
-    async updateTag(recordList) {
-        await this.update(recordList);
-        await this.props.record.save({ noReload: true });
-        return this.tags;
-    }
-
-    getTagProps(record) {
-        return {
-            ...super.getTagProps(record),
-            onDelete: () => this.deleteTag(record.id),
-        };
+    get tags() {
+        return super.tags.reverse();
     }
 }
 
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
index cafe8ce07e2..a2dc68b6b71 100644
--- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
@@ -81,20 +81,26 @@
     }
 }
 .o_m2m_tags_avatar_field_popover {
-    max-width: 280px;
+    z-index: $zindex-modal - 1;
+    width: 280px;
+    font-size: $dropdown-font-size;
+    .o_input.o_tags_input {
+        border: none;
+    }
     .dropdown-menu {
         width: 275px;
     }
-}
-.o_field_many2many_tags_avatar_kanban {
-    .o_field_tags .o_tag .o_delete {
-        margin-left: -12px;
-        margin-top: -4px;
-        width: 12px;
-        height: 12px;
-        visibility: hidden;
+    .o-autocomplete--dropdown-menu {
+        font-size: $dropdown-font-size;
+        .dropdown-item {
+            padding: $o-dropdown-vpadding $o-dropdown-hpadding/2;
+        }
     }
-    .o_allow_delete_hover:hover .o_delete {
-        visibility: visible;
+    .o-autocomplete .o-autocomplete--input.o_input {
+        border: 1px solid var(--o-input-border-color);
+        border-width: 0 0 1px 0;
+        margin-bottom: .5rem;
+        padding-bottom: 0.25rem;
+        background-color: var(--o-input-background-color, transparent);
     }
 }
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 3c9c06782c4..76664384e03 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
@@ -26,21 +26,15 @@
     </t>
 
     <t t-name="web.KanbanMany2ManyTagsAvatarFieldTagsList" t-inherit="web.TagsList" t-inherit-mode="primary" owl="1">
-        <xpath expr="//span[hasclass('o_m2m_avatar_empty')]" position="after">
-            <img t-elif="!props.readonly" src="/web/static/img/user_menu_avatar.png" title="Quick assign" alt="Quick assign"
-                 t-on-click.stop.prevent="openPopover" class="o_m2m_avatar rounded-circle align-self-center"/>
+        <xpath expr="//t[@t-foreach='visibleTags']" position="before">
+            <t t-if="canDisplayQuickAssignAvatar">
+                <a t-on-click.stop.prevent="openPopover" tabIndex="-1" href="#" title="Assign"
+                   aria-label="Assign" class="fa fa-user-plus o_quick_assign o_m2m_avatar d-flex align-items-center"/>
+            </t>
         </xpath>
         <xpath expr="//span[hasclass('o_m2m_avatar_empty')]" position="attributes">
             <attribute name="t-on-click.stop.prevent">openPopover</attribute>
         </xpath>
-        <xpath expr="//span[@t-att-title='tag.text']" position="attributes">
-            <attribute name="t-att-class">{'o_allow_delete_hover': canDisplayDelete}</attribute>
-        </xpath>
-        <xpath expr="//a[hasclass('o_delete')]" position="attributes">
-            <attribute name="class" remove="fa-times" add="fa-times-circle fs-6 text-danger bg-white align-self-start z-index-1 pt-0 rounded-circle" separator=" " />
-            <attribute name="title">Remove</attribute>
-            <attribute name="aria-label">Remove</attribute>
-        </xpath>
     </t>
 
     <t t-name="web.KanbanMany2ManyTagsAvatarField" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary"
@@ -52,14 +46,16 @@
     </t>
     <t t-name="web.Many2ManyTagsAvatarFieldPopover" t-inherit="web.Many2ManyTagsAvatarField" t-inherit-mode="primary" owl="1">
         <xpath expr="//div[hasclass('o_field_tags')]" position="attributes">
-            <attribute name="class" add="p-1 o_m2m_tags_avatar_field_popover o_field_widget o_field_many2many_tags_avatar" remove="d-inline-flex mw-100" separator=" " />
+            <attribute name="class" add="p-2 o_m2m_tags_avatar_field_popover o_field_widget o_field_many2many_tags_avatar" remove="d-inline-flex mw-100" separator=" " />
         </xpath>
         <xpath expr="//div[hasclass('o_field_many2many_selection')]" position="attributes">
             <attribute name="class" add="w-100" separator=" " />
         </xpath>
-        <xpath expr="//TagsList" position="attributes">
-            <attribute name="tags" remove="tags" add="state.tags" />
-        </xpath>
+        <Many2XAutocomplete position="attributes">
+            <attribute name="dropdown">false</attribute>
+            <attribute name="placeholder">props.placeholder</attribute>
+            <attribute name="autofocus">true</attribute>
+        </Many2XAutocomplete>
     </t>
 
 </templates>
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 c9b215c4b8d..bb8a03ec9bc 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
@@ -1,11 +1,10 @@
 /** @odoo-module **/
 
 import { registry } from "@web/core/registry";
-import { isMobileOS } from "@web/core/browser/feature_detection";
 import { usePopover } from "@web/core/popover/popover_hook";
 import { many2OneField, Many2OneField } from "../many2one/many2one_field";
 
-import { Component, onMounted } from "@odoo/owl";
+import { Component } from "@odoo/owl";
 import { AvatarMany2XAutocomplete } from "@web/views/fields/relational_utils";
 
 export class Many2OneAvatarField extends Component {
@@ -41,9 +40,12 @@ export class Many2OneFieldPopover extends Many2OneField {
     static components = {
         Many2XAutocomplete: AvatarMany2XAutocomplete,
     };
-    setup() {
-        super.setup();
-        onMounted(() => this.focusInput());
+    get Many2XAutocompleteProps() {
+        return {
+            ...super.Many2XAutocompleteProps,
+            dropdown: false,
+            autofocus: true,
+        };
     }
 
     async updateRecord(value) {
@@ -91,23 +93,15 @@ export class KanbanMany2OneAvatarField extends Many2OneAvatarField {
                 canCreate: false,
                 canCreateEdit: false,
                 canQuickCreate: false,
+                placeholder: this.env._t("Search user..."),
             },
             {
                 position: "bottom",
+                popoverClass: "o_m2o_tags_avatar_field_popover",
+                closeOnClickAway: (target) => !target.closest(".modal"),
             }
         );
     }
-
-    get canDisplayDelete() {
-        return this.props.isEditable && this.props.record.data[this.props.name] && !isMobileOS();
-    }
-    async remove(ev) {
-        if (!this.props.isEditable) {
-            return;
-        }
-        await this.props.record.update({ [this.props.name]: false });
-        await this.props.record.save();
-    }
 }
 
 export const kanbanMany2OneAvatarField = {
diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.scss b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.scss
index d9ba6b63aac..3d7011f1852 100644
--- a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.scss
+++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.scss
@@ -1,20 +1,18 @@
-.o_popover > .o_field_many2one_selection {
-    padding: 0.25rem;
-    .o-autocomplete--dropdown-menu {
-        width: 178px;
-    }
-}
-.o_field_many2one_avatar_kanban {
-    .o_m2o_avatar {
-        .o_delete {
-            margin-left: -12px;
-            margin-top: -4px;
-            width: 12px;
-            height: 12px;
-            visibility: hidden;
+.o_m2o_tags_avatar_field_popover {
+    z-index: $zindex-modal - 1;
+    font-size: $dropdown-font-size;
+    > .o_field_many2one_selection {
+        padding: 0.25rem;
+        .o-autocomplete--dropdown-menu {
+            width: 178px;
+            font-size: $dropdown-font-size;
+            .dropdown-item {
+                padding: $o-dropdown-vpadding $o-dropdown-hpadding/2;
+            }
         }
-        &.o_allow_delete_hover:hover .o_delete {
-            visibility: visible;
+        .o-autocomplete--input {
+            margin-bottom: .5rem;
+            padding-bottom: 0.25rem;
         }
     }
 }
diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
index 9e88761bebf..d5cec573efa 100644
--- a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
+++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
@@ -14,16 +14,12 @@
     <t t-name="web.KanbanMany2OneAvatarField" t-inherit="web.Many2OneAvatarField" t-inherit-mode="primary" owl="1">
         <xpath expr="//span[hasclass('o_m2o_avatar')]" position="attributes">
             <attribute name="class" separator=" " add="d-flex"/>
-            <attribute name="t-att-class">{'o_allow_delete_hover': canDisplayDelete}</attribute>
-        </xpath>
-        <xpath expr="//span[hasclass('o_m2o_avatar')]//img" position="after">
-            <a tabIndex="-1" href="#" title="Remove" aria-label="Remove" t-on-click.stop.prevent="remove" class="fa
-               fa-times-circle fs-6 text-danger bg-white align-self-start z-index-1 pt-0 rounded-circle o_delete" />
         </xpath>
         <xpath expr="//span[hasclass('o_m2o_avatar_empty')]" position="replace">
-            <img t-if="props.record.data[props.name] === false" title="Quick assign" alt="Quick assign"
-                 src="/web/static/img/user_menu_avatar.png" t-on-click.stop.prevent="openPopover"
-                 class="rounded-circle align-self-center "/>
+            <t t-if="props.record.data[props.name] === false">
+                <a t-on-click.stop.prevent="openPopover" tabIndex="-1" href="#" title="Assign"
+                   aria-label="Assign" class="fa fa-user-plus o_quick_assign d-flex align-items-center"/>
+            </t>
         </xpath>
     </t>
 
diff --git a/addons/web/static/src/views/fields/relational_utils.js b/addons/web/static/src/views/fields/relational_utils.js
index fc66daa7daa..135a49c17ba 100644
--- a/addons/web/static/src/views/fields/relational_utils.js
+++ b/addons/web/static/src/views/fields/relational_utils.js
@@ -384,6 +384,8 @@ Many2XAutocomplete.props = {
     autoSelect: { type: Boolean, optional: true },
     isToMany: { type: Boolean, optional: true },
     autocomplete_container: { type: Function, optional: true },
+    dropdown: { type: Boolean, optional: true },
+    autofocus: { type: Boolean, optional: true },
 };
 Many2XAutocomplete.defaultProps = {
     searchLimit: 7,
@@ -393,6 +395,7 @@ Many2XAutocomplete.defaultProps = {
     setInputFloats: () => {},
     quickCreate: null,
     context: {},
+    dropdown: true,
 };
 
 export class AvatarMany2XAutocomplete extends Many2XAutocomplete {
diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
index fba0cd9d69b..826b39effd6 100644
--- a/addons/web/static/src/views/fields/relational_utils.xml
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -33,7 +33,7 @@
 
 <t t-name="web.Many2XAutocomplete" owl="1" >
     <div class="o_input_dropdown" t-ref="autocomplete_container">
-        <input t-if="env.isSmall"
+        <input t-if="env.isSmall and props.dropdown"
             type="text"
             t-att-id="props.id"
             class="o_input"
@@ -52,6 +52,8 @@
             onSelect.bind="onSelect"
             onInput.bind="onInput"
             onChange.bind="onChange"
+            dropdown="props.dropdown"
+            autofocus="props.autofocus"
         />
         <a role="button" class="o_dropdown_button" draggable="false" />
     </div>
diff --git a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
index 7ea08d107bf..96803880bd3 100644
--- a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
@@ -1,12 +1,6 @@
 /** @odoo-module **/
 
-import {
-    click,
-    clickSave,
-    getFixture,
-    triggerEvent,
-    selectDropdownItem,
-} from "@web/../tests/helpers/utils";
+import { click, clickSave, getFixture, selectDropdownItem } from "@web/../tests/helpers/utils";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { triggerHotkey } from "../../helpers/utils";
 
@@ -279,16 +273,14 @@ QUnit.module("Fields", (hooks) => {
     );
 
     QUnit.test("widget many2many_tags_avatar in kanban view", async function (assert) {
-        assert.expect(17);
+        assert.expect(21);
 
-        const records = [];
         for (let id = 5; id <= 15; id++) {
-            records.push({
+            serverData.models.partner.records.push({
                 id,
                 display_name: `record ${id}`,
             });
         }
-        serverData.models.partner.records = serverData.models.partner.records.concat(records);
 
         serverData.models.turtle.records.push({
             id: 4,
@@ -300,6 +292,8 @@ QUnit.module("Fields", (hooks) => {
         serverData.models.turtle.records[2].partner_ids = [1, 2, 4, 5];
         serverData.views = {
             "turtle,false,form": '<form><field name="display_name"/></form>',
+            "partner,false,list": '<tree><field name="display_name"/></tree>',
+            "partner,false,search": "<search/>",
         };
 
         await makeView({
@@ -331,12 +325,10 @@ QUnit.module("Fields", (hooks) => {
                 );
             },
         });
-        assert.strictEqual(
-            target.querySelector(
-                ".o_kanban_record:first-child .o_field_many2many_tags_avatar img.o_m2m_avatar"
-            ).dataset.src,
-            "/web/image/partner/1/avatar_128",
-            "should have correct avatar image"
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:first-child .o_field_many2many_tags_avatar .o_quick_assign",
+            "should have the assign icon"
         );
 
         assert.containsN(
@@ -355,14 +347,14 @@ QUnit.module("Fields", (hooks) => {
             target.querySelector(
                 ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar img.o_m2m_avatar"
             ).dataset.src,
-            "/web/image/partner/1/avatar_128",
+            "/web/image/partner/5/avatar_128",
             "should have correct avatar image"
         );
         assert.strictEqual(
             target.querySelectorAll(
                 ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar img.o_m2m_avatar"
             )[1].dataset.src,
-            "/web/image/partner/2/avatar_128",
+            "/web/image/partner/4/avatar_128",
             "should have correct avatar image"
         );
         assert.containsOnce(
@@ -402,42 +394,49 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsNone(target, ".o_field_many2many_tags_avatar .o_field_many2many_selection");
 
-        // check delete
-        const firstTag = target.querySelector(
-            ".o_kanban_record:nth-child(2) .o_field_many2many_tags_avatar .o_tag"
-        );
-        await triggerEvent(firstTag, null, "mouseover");
-        await click(firstTag, ".o_delete");
-        assert.containsN(
-            target,
-            ".o_kanban_record:nth-child(2) .o_field_many2many_tags_avatar .o_tag",
-            2,
-            "should have 2 record"
-        );
-
         const o_kanban_record = target.querySelector(".o_kanban_record:nth-child(2)");
-        await click(o_kanban_record, ".o_field_tags > img.o_m2m_avatar", true);
+        await click(o_kanban_record, ".o_field_tags > .o_m2m_avatar_empty", true);
         const popover = document.querySelector(".o-overlay-container");
-        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 2, "Should have 2 tags");
+        assert.strictEqual(
+            document.activeElement,
+            popover.querySelector("input"),
+            "the input inside the popover should have the focus"
+        );
+        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 3, "Should have 3 tags");
         // delete inside the popover
         await click(popover.querySelector(".o_tag .o_delete"));
-        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 1, "Should have 1 tag");
-        assert.strictEqual(
-            o_kanban_record.querySelectorAll(".o_tag").length,
-            1,
-            "Should have 1 tags"
-        );
-        // select input
-        await click(popover.querySelector(".o_field_many2many_selection input"));
-        // select first input
-        await click(popover.querySelector(".o-autocomplete--dropdown-item"));
-        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 2, "Should have 2 tags");
+        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 2, "Should have 2 tag");
         assert.strictEqual(
             o_kanban_record.querySelectorAll(".o_tag").length,
             2,
             "Should have 2 tags"
         );
-        await click(target);
+        // select first input
+        await click(popover.querySelector(".o-autocomplete--dropdown-item"));
+        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 3, "Should have 3 tags");
+        assert.strictEqual(
+            o_kanban_record.querySelectorAll(".o_tag").length,
+            2,
+            "Should have 2 tags"
+        );
+        // load more
+        await click(popover.querySelector(".o_m2o_dropdown_option_search_more"));
+        // first item
+        await click(document.querySelector(".o_dialog .o_list_table .o_data_row .o_data_cell"));
+        assert.strictEqual(popover.querySelectorAll(".o_tag").length, 4, "Should have 4 tags");
+        assert.strictEqual(
+            o_kanban_record.querySelectorAll(".o_tag").length,
+            2,
+            "Should have 2 tags"
+        );
+        assert.strictEqual(
+            o_kanban_record.querySelector("img.o_m2m_avatar").dataset.src,
+            "/web/image/partner/4/avatar_128",
+            "should have correct avatar image"
+        );
+        await click(
+            target.querySelector(".o_kanban_record .o_field_many2many_tags_avatar img.o_m2m_avatar")
+        );
     });
 
     QUnit.test("widget many2many_tags_avatar delete tag", async function (assert) {
diff --git a/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
index 2681ab3bc48..71364113d94 100644
--- a/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
@@ -339,8 +339,65 @@ QUnit.module("Fields", (hooks) => {
         assert.containsOnce(target, ".o_field_widget[name=user_id] span.o_m2o_avatar_empty");
     });
 
+    QUnit.test("widget many2one_avatar in kanban view (load more dialog)", async function (assert) {
+        assert.expect(1);
+
+        for (let id = 1; id <= 10; id++) {
+            serverData.models.user.records.push({
+                id,
+                display_name: `record ${id}`,
+            });
+        }
+
+        serverData.views = {
+            "user,false,list": '<tree><field name="display_name"/></tree>',
+            "user,false,search": "<search/>",
+        };
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <div class="oe_kanban_footer">
+                                    <div class="o_kanban_record_bottom">
+                                        <div class="oe_kanban_bottom_right">
+                                            <field name="user_id" widget="many2one_avatar"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        // open popover
+        await click(
+            target.querySelector(
+                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > a.o_quick_assign"
+            )
+        );
+
+        // load more
+        await click(
+            document.querySelector(".o-overlay-container .o_m2o_dropdown_option_search_more")
+        );
+        await click(document.querySelector(".o_dialog .o_list_table .o_data_row .o_data_cell"));
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > img"
+            ).dataset.src,
+            "/web/image/user/1/avatar_128",
+            "should have correct avatar image"
+        );
+    });
+
     QUnit.test("widget many2one_avatar in kanban view", async function (assert) {
-        assert.expect(4);
+        assert.expect(5);
 
         await makeView({
             type: "kanban",
@@ -370,22 +427,23 @@ QUnit.module("Fields", (hooks) => {
             "/web/image/user/17/avatar_128",
             "should have correct avatar image"
         );
-        assert.strictEqual(
-            target.querySelector(
-                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > img"
-            ).dataset.src,
-            "/web/static/img/user_menu_avatar.png",
-            "should have empty avatar image"
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > .o_quick_assign",
+            "should have the quick assign icon"
         );
-        // open dialog
+        // open popover
         await click(
             target.querySelector(
-                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > img"
+                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > .o_quick_assign"
             )
         );
-        // select input
         const popover = document.querySelector(".o-overlay-container");
-        await click(popover.querySelector(".o_field_many2one_selection input"));
+        assert.strictEqual(
+            document.activeElement,
+            popover.querySelector("input"),
+            "the input inside the popover should have the focus"
+        );
         // select first input
         await click(popover.querySelector(".o-autocomplete--dropdown-item"));
         assert.strictEqual(
@@ -395,22 +453,10 @@ QUnit.module("Fields", (hooks) => {
             "/web/image/user/17/avatar_128",
             "should have correct avatar image"
         );
-        // check delete
-        await triggerEvent(
-            target.querySelector(".o_kanban_record:nth-child(4) .o_field_many2one_avatar"),
-            null,
-            "mouseover"
-        );
-        await click(
-            target.querySelector(".o_kanban_record:nth-child(4) .o_field_many2one_avatar"),
-            ".o_delete"
-        );
-        assert.strictEqual(
-            target.querySelector(
-                ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > img"
-            ).dataset.src,
-            "/web/static/img/user_menu_avatar.png",
-            "should have empty avatar image"
+        assert.containsNone(
+            target,
+            ".o_kanban_record:nth-child(4) .o_field_many2one_avatar .o_m2o_avatar > .o_quick_assign",
+            "should not have the quick assign icon"
         );
     });
 });