diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 07c6468a4b1..228e2ec7e5c 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1467,6 +1467,20 @@
 .openerp .oe_form .oe_form_field_many2manytags .text-wrap textarea {
   width: 100% !important;
 }
+.openerp .oe_form .oe_form_field_many2manytags .oe_form_field_many2manytags_box {
+  border-radius: 2px;
+  box-sizing: border-box;
+  position: relative;
+  float: left;
+  border: 1px solid #9daccc;
+  background: #e2e6f0;
+  color: black;
+  padding: 0px 3px 0px 3px;
+  margin: 0 2px 2px 0;
+  cursor: pointer;
+  height: 16px;
+  font: 11px "lucida grande", tahoma, verdana, arial, sans-serif;
+}
 .openerp .oe_form .oe_datepicker_container {
   display: none;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 5e43a411ef9..262cc738dfe 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1211,10 +1211,24 @@ $colour4: #8a89ba
             padding-top: 4px
         .oe_form_field_datetime input
             min-width: 11em
-        .oe_form_field_many2manytags .text-wrap
-            width: 100% !important
-            textarea
+        .oe_form_field_many2manytags
+            .text-wrap
                 width: 100% !important
+                textarea
+                    width: 100% !important
+            .oe_form_field_many2manytags_box
+                border-radius: 2px
+                box-sizing: border-box
+                position: relative
+                float: left
+                border: 1px solid #9DACCC
+                background: #E2E6F0
+                color: black
+                padding: 0px 3px 0px 3px
+                margin: 0 2px 2px 0
+                cursor: pointer
+                height: 16px
+                font: 11px "lucida grande", tahoma, verdana, arial, sans-serif
         .oe_datepicker_container
             display: none
         .oe_datepicker_root
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 6f4503b76bf..486fd85f855 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -3051,17 +3051,27 @@ instance.web.form.One2ManyKanbanView = instance.web_kanban.KanbanView.extend({
 });
 }
 
-instance.web.form.FieldMany2ManyTags = instance.web.form.AbstractField.extend(_.extend({}, instance.web.form.CompletionFieldMixin, {
+instance.web.form.FieldMany2ManyTags = instance.web.form.AbstractField.extend(_.extend({}, instance.web.form.CompletionFieldMixin,
+                                                                                       instance.web.form.ReinitializeFieldMixin, {
     template: "FieldMany2ManyTags",
     init: function() {
         this._super.apply(this, arguments);
-        this.limit = 7;
-        this.orderer = new instance.web.DropMisordered();
+        instance.web.form.CompletionFieldMixin.init.call(this);
+        this.set({"value": []});
+        this.display_orderer = new instance.web.DropMisordered();
     },
     start: function() {
+        this._super();
+        instance.web.form.ReinitializeFieldMixin.start.call(this);
+        this.on("change:value", this, this.render_value);
+    },
+    initialize_content: function() {
+        if (this.get("effective_readonly"))
+            return;
         var self = this;
-        var $textarea = $("textarea", this.$element).textext({
-            plugins : 'arrow prompt autocomplete',
+        self. $text = $("textarea", this.$element);
+        self.$text.textext({
+            plugins : 'tags arrow prompt autocomplete',
             prompt : "Add one...",
             autocomplete: {
                 render: function(suggestion) {
@@ -3071,9 +3081,22 @@ instance.web.form.FieldMany2ManyTags = instance.web.form.AbstractField.extend(_.
             ext: {
                 autocomplete: {
                     selectFromDropdown: function(a, b, c) {
-                        var index = this.selectedSuggestionElement().children().children().data('index');
-                        debugger;
                         $(this).trigger('hideDropdown');
+                        var index = Number(this.selectedSuggestionElement().children().children().data('index'));
+                        var data = self.search_result[index];
+                        self.set({'value': self.get('value').concat([data.id])});
+                    },
+                },
+                tags: {
+                    isTagAllowed: function(tag) {
+                        if (! tag.name)
+                            return false;
+                        return true;
+                    },
+                },
+                itemManager: {
+                    itemToString: function(item) {
+                        return item.name;
                     },
                 },
             },
@@ -3087,6 +3110,30 @@ instance.web.form.FieldMany2ManyTags = instance.web.form.AbstractField.extend(_.
                 })});
             });
         });
+        self.tags = self.$text.textext()[0].tags();
+    },
+    set_value: function(value_) {
+        value_ = value_ || [];
+        if (value_.length >= 1 && value_[0] instanceof Array) {
+            value_ = value_[0][2];
+        }
+        this._super(value_);
+    },
+    get_value: function() {
+        var tmp = this._super();
+        return tmp;
+    },
+    render_value: function() {
+        var self = this;
+        var dataset = new instance.web.DataSetStatic(this, this.field.relation, self.view.dataset.get_context());
+        this.display_orderer.add(dataset.name_get(self.get("value"))).then(function(data) {
+            if (! self.get("effective_readonly")) {
+                self.tags.containerElement().children().remove();
+                self.tags.addTags(_.map(data, function(el) {return {name: el[1]};}));
+            } else {
+                self.$element.html(QWeb.render("FieldMany2ManyTags.box", {elements: data}));
+            }
+        });
     },
 }));
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index e0ae9adf9e2..a142ac40756 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1041,9 +1041,20 @@
 </t>
 <t t-name="FieldMany2ManyTags">
     <div class="oe_form_field_many2manytags">
-        <textarea rows="1" style="width: 100%"></textarea>
+        <t t-if="! widget.get('effective_readonly')">
+            <textarea rows="1" style="width: 100%"></textarea>
+        </t>
     </div>
 </t>
+<t t-name="FieldMany2ManyTags.box">
+    <t t-set="i" t-value="0"/>
+    <t t-foreach="elements" t-as="el">
+        <span class="oe_form_field_many2manytags_box" t-att-data-index="i">
+            <t t-esc="el[1]"/>
+        </span>
+        <t t-set="i" t-value="i + 1"/>
+    </t>
+</t>
 <t t-name="FieldReference">
     <table class="oe_form_field_reference oe_frame oe_forms" border="0" cellpadding="0" cellspacing="0">
     <tr>