diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 71504e2a959..2bb4dfc429d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3093,9 +3093,7 @@ registry.many2one = SnippetOptionWidget.extend({
             self.$target.html($li.data('name'));
         }
 
-        _.defer(function () {
-            self.trigger_up('deactivate_snippet');
-        });
+        this._clear();
     }
 });
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 0892b3925b4..48d2d014cd0 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -999,16 +999,6 @@ body.editor_enable.editor_has_snippets {
             }
         }
     }
-
-    .contact_menu {
-        display: block;
-        top: -24px;
-        margin: 0px;
-        padding: 2px 0px;
-        position: relative;
-        min-height: 44px;
-        position: absolute !important;
-    }
 }
 
 .s-resize-important * {
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 2497ba83352..1e962589c4e 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -51,19 +51,20 @@
         </div>
     </div>
 
-    <!-- t-field options -->
     <t t-name="web_editor.many2one.button">
         <div class="btn-group">
-            <a role="button" href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a>
-            <ul class="dropdown-menu contact_menu" role="menu">
-                <li><a role="menuitem" class="dropdown-item"><input href="#" type="email" placeholder="Search"/></a></li>
+            <a role="button" href="#" class="btn btn-secondary dropdown-toggle d-none" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact">
+                <i class="fa fa-search"></i>
+            </a>
+            <ul class="dropdown-menu contact_menu d-block list-group list-group-flush mx-1" role="menu">
+                <li class="px-1"><a role="menuitem" class="dropdown-item pl-1 pr-2"><i class="fa fa-search"></i><input href="#" type="email" placeholder="Search" class="ml-2" autocomplete="off"/></a></li>
             </ul>
         </div>
     </t>
 
     <t t-name="web_editor.many2one.search">
         <t t-foreach="contacts" t-as="item">
-            <li><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
+            <li class="list-group-item px-2"><a role="menuitem" href="#" t-att-data-id="item.id" t-att-data-name="item.display_name"><t t-esc="item.display_name"/> <t t-if="item.city or item.country_id"><small class="text-muted">(<t t-esc="item.city"/> <t t-esc="item.country_id and item.country_id[1]"/>)</small></t></a></li>
         </t>
     </t>
 </templates>