diff --git a/web_widget_one2many_product_picker/README.rst b/web_widget_one2many_product_picker/README.rst
index 10fb845f2..b0687d670 100644
--- a/web_widget_one2many_product_picker/README.rst
+++ b/web_widget_one2many_product_picker/README.rst
@@ -86,6 +86,7 @@ Widget options:
 * show_discount > Enable/Disable display discount (False by default)
 * show_subtotal > Enable/Disable show subtotal (True by default)
 * auto_save > Enable/Disable auto save (False by default)
+* auto_save_delay > The time (in milliseconds) to wait after the last interaction before launching the autosave (1500 by default)
 * all_domain > The domain used in 'All' section ([] by default)
 
   If using auto save feature, you should keep in mind that the "Save" and "Discard" buttons
@@ -95,6 +96,7 @@ Widget options:
 * ignore_warning > Enable/Disable display onchange warnings (False by default)
 * instant_search > Enable/Disable instant search mode (False by default)
 * trigger_refresh_fields > Fields in the main record that dispatch a widget refresh (["partner_id", "currency_id"] by default)
+* auto_focus > Keep the focus on the search box after performing a search (True by default)
 
 All widget options are optional.
 Notice that you can call '_' method to use translations. This only can be used with this widget.
@@ -215,7 +217,8 @@ Known issues / Roadmap
 ======================
 
 * Translations in the xml 'options' attribute of the field that use the widget can't be exported automatically to be translated
-* The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects.
+* The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects
+* sale.order onchanges that affects to "order_line" subfields will be ommitted to increase the performance
 
 Bug Tracker
 ===========
@@ -244,6 +247,8 @@ Contributors
     * Pedro M. Baeza
     * David Vidal
 
+* Giovanni Serra <giovanni@gslab.it>
+
 Maintainers
 ~~~~~~~~~~~
 
diff --git a/web_widget_one2many_product_picker/__init__.py b/web_widget_one2many_product_picker/__init__.py
index f0e48908c..28345b82a 100644
--- a/web_widget_one2many_product_picker/__init__.py
+++ b/web_widget_one2many_product_picker/__init__.py
@@ -1,2 +1,3 @@
 # Copyright 2020 Tecnativa - Alexandre Díaz
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+from . import models
diff --git a/web_widget_one2many_product_picker/i18n/es.po b/web_widget_one2many_product_picker/i18n/es.po
index 8caba4d46..ae4f8cad2 100644
--- a/web_widget_one2many_product_picker/i18n/es.po
+++ b/web_widget_one2many_product_picker/i18n/es.po
@@ -6,118 +6,130 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 12.0\n"
 "Report-Msgid-Bugs-To: \n"
-"PO-Revision-Date: 2021-02-17 13:45+0000\n"
-"Last-Translator: claudiagn <claudia.gargallo@qubiq.es>\n"
-"Language-Team: none\n"
+"POT-Creation-Date: 2022-03-24 13:16+0000\n"
+"PO-Revision-Date: 2022-03-24 14:17+0100\n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: \n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
-"X-Generator: Weblate 4.3.2\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: \n"
+"X-Generator: Poedit 3.0.1\n"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:6
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
+#, python-format
+msgid "Accept"
+msgstr "Aceptar"
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
 #, python-format
 msgid "Add"
 msgstr "Añadir"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:193
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:0
 #, python-format
 msgid "All"
 msgstr "Todo"
 
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_base
+msgid "Base"
+msgstr ""
+
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:35
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:0
+#, python-format
+msgid "By Name"
+msgstr "Por Nombre"
+
+#. module: web_widget_one2many_product_picker
+#: code:addons/web_widget_one2many_product_picker/models/base.py:0
+#, python-format
+msgid "Can't create the %s: Duplicated product! (Already in database)"
+msgstr ""
+"No se puede crear el %s: Producto duplicado! (Actualmente en la base de "
+"datos)"
+
+#. module: web_widget_one2many_product_picker
+#: code:addons/web_widget_one2many_product_picker/models/base.py:0
+#, python-format
+msgid "Can't create the %s: Duplicated product! (Inside query)"
+msgstr "No se puede crear el %s: Producto duplicado! (En la petición)"
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
+#, python-format
+msgid "Discard"
+msgstr "Descartar"
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
 #, python-format
 msgid "Groups"
 msgstr "Grupos"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:43
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
+#, python-format
+msgid "LOADING..."
+msgstr "CARGANDO..."
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
 #, python-format
 msgid "Lines"
-msgstr "Línias"
+msgstr "Líneas"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:67
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
 #, python-format
 msgid "Load More"
-msgstr "Carga más"
+msgstr "Cargar más"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml:11
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml:0
 #, python-format
-msgid "Price:"
-msgstr "Precio:"
-
-#. module: web_widget_one2many_product_picker
-#: model:ir.model,name:web_widget_one2many_product_picker.model_product_product
-msgid "Product"
-msgstr "Producto"
+msgid "Price"
+msgstr "Precio"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:13
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
 #, python-format
 msgid "Remove"
 msgstr "Eliminar"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:23
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
 #, python-format
 msgid "Search..."
 msgstr "Buscar..."
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:58
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
 #, python-format
 msgid "Subtotal:"
 msgstr "Subtotal:"
 
-#. module: web_widget_one2many_product_picker
-#: model:ir.model.fields,help:web_widget_one2many_product_picker.field_product_product__image_variant_medium
-msgid ""
-"This field holds the image used as image for the product variantor product "
-"image medium, limited to 512x512px."
-msgstr ""
-"Aquest camp conté la imatge que s'utilitza com a imatge per al mitjà "
-"d'imatge del producte que varia el producte, limitada a 512x512px."
-
-#. module: web_widget_one2many_product_picker
-#: model:ir.model.fields,help:web_widget_one2many_product_picker.field_product_product__image_variant_big
-msgid ""
-"This field holds the image used as image for the product variantor product "
-"image, limited to 1024x1024px."
-msgstr ""
-"Aquest camp conté la imatge que s'utilitza com a imatge per al mitjà "
-"d'imatge del producte que varia el producte, limitada a 1024x1024px."
-
-#. module: web_widget_one2many_product_picker
-#: model:ir.model.fields,field_description:web_widget_one2many_product_picker.field_product_product__image_variant_big
-msgid "Variant Image Big (Computed)"
-msgstr "Imagen variante grande (calculada)"
-
-#. module: web_widget_one2many_product_picker
-#: model:ir.model.fields,field_description:web_widget_one2many_product_picker.field_product_product__image_variant_medium
-msgid "Variant Image Medium (Computed)"
-msgstr "Imagen variante media (calculada)"
-
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:341
+#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:0
 #, python-format
 msgid "[No widget %s]"
 msgstr "[Sin widget %s]"
-
-#~ msgid "Add 1"
-#~ msgstr "Añadir 1"
diff --git a/web_widget_one2many_product_picker/i18n/web_widget_one2many_product_picker.pot b/web_widget_one2many_product_picker/i18n/web_widget_one2many_product_picker.pot
index b2273e96f..2fd1cdeb1 100644
--- a/web_widget_one2many_product_picker/i18n/web_widget_one2many_product_picker.pot
+++ b/web_widget_one2many_product_picker/i18n/web_widget_one2many_product_picker.pot
@@ -6,6 +6,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 13.0\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-03-24 13:16+0000\n"
+"PO-Revision-Date: 2022-03-24 13:16+0000\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -13,6 +15,13 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
+#, python-format
+msgid "Accept"
+msgstr ""
+
 #. module: web_widget_one2many_product_picker
 #. openerp-web
 #: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
@@ -27,6 +36,11 @@ msgstr ""
 msgid "All"
 msgstr ""
 
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_base
+msgid "Base"
+msgstr ""
+
 #. module: web_widget_one2many_product_picker
 #. openerp-web
 #: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:0
@@ -34,6 +48,26 @@ msgstr ""
 msgid "By Name"
 msgstr ""
 
+#. module: web_widget_one2many_product_picker
+#: code:addons/web_widget_one2many_product_picker/models/base.py:0
+#, python-format
+msgid "Can't create the %s: Duplicated product! (Already in database)"
+msgstr ""
+
+#. module: web_widget_one2many_product_picker
+#: code:addons/web_widget_one2many_product_picker/models/base.py:0
+#, python-format
+msgid "Can't create the %s: Duplicated product! (Inside query)"
+msgstr ""
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:0
+#, python-format
+msgid "Discard"
+msgstr ""
+
 #. module: web_widget_one2many_product_picker
 #. openerp-web
 #: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
@@ -41,6 +75,13 @@ msgstr ""
 msgid "Groups"
 msgstr ""
 
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
+#, python-format
+msgid "LOADING..."
+msgstr ""
+
 #. module: web_widget_one2many_product_picker
 #. openerp-web
 #: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml:0
diff --git a/web_widget_one2many_product_picker/models/__init__.py b/web_widget_one2many_product_picker/models/__init__.py
new file mode 100644
index 000000000..0e4444933
--- /dev/null
+++ b/web_widget_one2many_product_picker/models/__init__.py
@@ -0,0 +1 @@
+from . import base
diff --git a/web_widget_one2many_product_picker/models/base.py b/web_widget_one2many_product_picker/models/base.py
new file mode 100644
index 000000000..86a1cd305
--- /dev/null
+++ b/web_widget_one2many_product_picker/models/base.py
@@ -0,0 +1,60 @@
+# Copyright 2022 Tecnativa - Alexandre D. Díaz
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl)
+from odoo import _, api, models
+from odoo.exceptions import ValidationError
+
+
+class BaseModel(models.BaseModel):
+    _inherit = "base"
+
+    @api.model
+    def _check_product_picker_duplicated_products(self, vals_list):
+        relation = self.env.context.get("product_picker_relation")
+        if relation != self._name or not len(vals_list):
+            return
+        product_field = self.env.context.get("product_picker_product_field")
+        product_ids = [
+            values[product_field] for values in vals_list if product_field in values
+        ]
+        num_products = len(product_ids)
+        if not num_products:
+            return
+        elif num_products != len(set(product_ids)):
+            raise ValidationError(
+                _("Can't create the %s: Duplicated product! (Inside query)") % relation
+            )
+        relation_field = self.env.context.get("product_picker_relation_field")
+        # All records have the same 'relation id' when created with the product picker
+        relation_id = vals_list[0][relation_field]
+        # When write maybe need get the value from the record
+        if not relation_id:
+            field_obj = self[relation_field]
+            if field_obj:
+                relation_id = relation_id.id
+        has_product = (
+            self.search(
+                [
+                    (relation_field, "=", relation_id),
+                    (product_field, "in", product_ids),
+                ],
+                count=True,
+                limit=1,
+            )
+            != 0
+        )
+        if has_product:
+            raise ValidationError(
+                _("Can't create the %s: Duplicated product! (Already in database)")
+                % relation
+            )
+
+    @api.model_create_multi
+    def create(self, vals_list):
+        """Avoid create lines that have a product currently used when use the product picker"""
+        self._check_product_picker_duplicated_products(vals_list)
+        return super().create(vals_list)
+
+    def write(self, values):
+        """Avoid write lines that have a product currently used when use the product picker"""
+        self._check_product_picker_duplicated_products([values])
+        return super().write(values)
diff --git a/web_widget_one2many_product_picker/readme/CONFIGURE.rst b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
index 9d6350245..46f18715d 100644
--- a/web_widget_one2many_product_picker/readme/CONFIGURE.rst
+++ b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
@@ -44,6 +44,7 @@ Widget options:
 * show_discount > Enable/Disable display discount (False by default)
 * show_subtotal > Enable/Disable show subtotal (True by default)
 * auto_save > Enable/Disable auto save (False by default)
+* auto_save_delay > The time (in milliseconds) to wait after the last interaction before launching the autosave (1500 by default)
 * all_domain > The domain used in 'All' section ([] by default)
 
   If using auto save feature, you should keep in mind that the "Save" and "Discard" buttons
@@ -53,6 +54,7 @@ Widget options:
 * ignore_warning > Enable/Disable display onchange warnings (False by default)
 * instant_search > Enable/Disable instant search mode (False by default)
 * trigger_refresh_fields > Fields in the main record that dispatch a widget refresh (["partner_id", "currency_id"] by default)
+* auto_focus > Keep the focus on the search box after performing a search (True by default)
 
 All widget options are optional.
 Notice that you can call '_' method to use translations. This only can be used with this widget.
diff --git a/web_widget_one2many_product_picker/readme/CONTRIBUTORS.rst b/web_widget_one2many_product_picker/readme/CONTRIBUTORS.rst
index 150026f71..35d1357ea 100644
--- a/web_widget_one2many_product_picker/readme/CONTRIBUTORS.rst
+++ b/web_widget_one2many_product_picker/readme/CONTRIBUTORS.rst
@@ -3,3 +3,5 @@
     * Alexandre D. Díaz
     * Pedro M. Baeza
     * David Vidal
+
+* Giovanni Serra <giovanni@gslab.it>
diff --git a/web_widget_one2many_product_picker/readme/ROADMAP.rst b/web_widget_one2many_product_picker/readme/ROADMAP.rst
index 0e3fe6e62..47177187e 100644
--- a/web_widget_one2many_product_picker/readme/ROADMAP.rst
+++ b/web_widget_one2many_product_picker/readme/ROADMAP.rst
@@ -1,2 +1,3 @@
 * Translations in the xml 'options' attribute of the field that use the widget can't be exported automatically to be translated
-* The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects.
+* The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects
+* sale.order onchanges that affects to "order_line" subfields will be ommitted to increase the performance
diff --git a/web_widget_one2many_product_picker/static/description/index.html b/web_widget_one2many_product_picker/static/description/index.html
index 823f5446b..f7fa79025 100644
--- a/web_widget_one2many_product_picker/static/description/index.html
+++ b/web_widget_one2many_product_picker/static/description/index.html
@@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
 <title>Web Widget One2Many Product Picker</title>
 <style type="text/css">
 
@@ -474,6 +474,8 @@ You need to define the view fields. The view must be of <tt class="docutils lite
 </li>
 <li><p class="first">auto_save &gt; Enable/Disable auto save (False by default)</p>
 </li>
+<li><p class="first">auto_save_delay &gt; The time (in milliseconds) to wait after the last interaction before launching the autosave (1500 by default)</p>
+</li>
 <li><p class="first">all_domain &gt; The domain used in ‘All’ section ([] by default)</p>
 <p>If using auto save feature, you should keep in mind that the “Save” and “Discard” buttons
 will lose part of its functionality as the document will be saved every time you
@@ -485,6 +487,8 @@ modify/create a record with the widget.</p>
 </li>
 <li><p class="first">trigger_refresh_fields &gt; Fields in the main record that dispatch a widget refresh ([“partner_id”, “currency_id”] by default)</p>
 </li>
+<li><p class="first">auto_focus &gt; Keep the focus on the search box after performing a search (True by default)</p>
+</li>
 </ul>
 <p>All widget options are optional.
 Notice that you can call ‘_’ method to use translations. This only can be used with this widget.</p>
@@ -605,7 +609,8 @@ accept changes.</p>
 <h1><a class="toc-backref" href="#id10">Known issues / Roadmap</a></h1>
 <ul class="simple">
 <li>Translations in the xml ‘options’ attribute of the field that use the widget can’t be exported automatically to be translated</li>
-<li>The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects.</li>
+<li>The product card animations can be improved. Currently the card is recreated, so we lost some elements to apply correct effects</li>
+<li>sale.order onchanges that affects to “order_line” subfields will be ommitted to increase the performance</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">
@@ -636,6 +641,8 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 </ul>
 </blockquote>
 </li>
+<li><p class="first">Giovanni Serra &lt;<a class="reference external" href="mailto:giovanni&#64;gslab.it">giovanni&#64;gslab.it</a>&gt;</p>
+</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
diff --git a/web_widget_one2many_product_picker/static/src/js/tools.js b/web_widget_one2many_product_picker/static/src/js/tools.js
index a839b884d..00f7f4f81 100644
--- a/web_widget_one2many_product_picker/static/src/js/tools.js
+++ b/web_widget_one2many_product_picker/static/src/js/tools.js
@@ -3,17 +3,35 @@
 odoo.define("web_widget_one2many_product_picker.tools", function(require) {
     "use strict";
 
-    const field_utils = require("web.field_utils");
+    var field_utils = require("web.field_utils");
+
+    /**
+     * Truncate floats
+     *
+     * @param {Number} value
+     * @param {Object} field_info
+     * @param {Array} digist
+     * @returns {Number}
+     */
+    function float(value, field_info, digist) {
+        var options = digist && {digist: digist};
+        return field_utils.format.float(value, field_info, options);
+    }
 
     /**
      * Calculate the price with discount
      *
      * @param {Number} price
      * @param {Number} discount
+     * @param {Array} digist
      * @returns {Number}
      */
-    function priceReduce(price, discount) {
-        return price * (1.0 - discount / 100.0);
+    function priceReduce(price, discount, digist) {
+        var price_reduce = price * (1.0 - discount / 100.0);
+        if (digist) {
+            return float(price_reduce, undefined, digist);
+        }
+        return price_reduce;
     }
 
     /**
@@ -34,12 +52,6 @@ odoo.define("web_widget_one2many_product_picker.tools", function(require) {
         });
     }
 
-    function float(value, field_info, digits) {
-        return field_utils.format.float(value, field_info, {
-            digits: digits,
-        });
-    }
-
     return {
         monetary: monetary,
         float: float,
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js
index 63a54b389..2bb31ec93 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js
@@ -6,27 +6,23 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
 ) {
     "use strict";
 
-    const core = require("web.core");
-    const Widget = require("web.Widget");
-    const widgetRegistry = require("web.widget_registry");
-    const ProductPickerQuickCreateFormView = require("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView")
+    var core = require("web.core");
+    var Widget = require("web.Widget");
+    var widgetRegistry = require("web.widget_registry");
+    var ProductPickerQuickCreateFormView = require("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView")
         .ProductPickerQuickCreateFormView;
 
-    const qweb = core.qweb;
+    var qweb = core.qweb;
 
     /**
      * This widget render a Form. Used by FieldOne2ManyProductPicker
      */
-    const ProductPickerQuickCreateForm = Widget.extend({
+    var ProductPickerQuickCreateForm = Widget.extend({
         className: "oe_one2many_product_picker_quick_create",
         xmlDependencies: [
             "/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml",
         ],
 
-        custom_events: {
-            reload_view: "_onReloadView",
-        },
-
         /**
          * @override
          */
@@ -51,54 +47,53 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
          * @override
          */
         start: function() {
-            const def1 = this._super.apply(this, arguments);
-            const form_arch = this._generateFormArch();
-            const fieldsView = {
-                arch: form_arch,
-                fields: this.fields,
-                viewFields: this.fields,
-                base_model: this.basicFieldParams.field.relation,
-                type: "form",
-                model: this.basicFieldParams.field.relation,
-            };
+            var self = this;
+            return this._super.apply(this, arguments).then(function() {
+                var form_arch = self._generateFormArch();
+                var fieldsView = {
+                    arch: form_arch,
+                    fields: self.fields,
+                    viewFields: self.fields,
+                    base_model: self.basicFieldParams.field.relation,
+                    type: "form",
+                    model: self.basicFieldParams.field.relation,
+                };
 
-            const node_context = this.node.attr("context") || "{}";
-            this.nodeContext = py.eval(node_context, {
-                active_id: this.res_id || false,
+                var node_context = self.node.attr("context") || "{}";
+                self.nodeContext = py.eval(node_context, {
+                    active_id: self.res_id || false,
+                });
+                var refinedContext = _.extend(
+                    {},
+                    self.main_state.getContext(),
+                    self.nodeContext
+                );
+                _.extend(refinedContext, self.editContext);
+                self.formView = new ProductPickerQuickCreateFormView(fieldsView, {
+                    context: refinedContext,
+                    compareKey: self.compareKey,
+                    fieldMap: self.fieldMap,
+                    modelName: self.basicFieldParams.field.relation,
+                    userContext: self.getSession().user_context,
+                    ids: self.res_id ? [self.res_id] : [],
+                    currentId: self.res_id || undefined,
+                    mode: self.res_id && self.readonly ? "readonly" : "edit",
+                    recordID: self.id,
+                    index: 0,
+                    parentID: self.basicFieldParams.parentID,
+                    default_buttons: false,
+                    withControlPanel: false,
+                    model: self.basicFieldParams.model,
+                    mainRecordData: self.getParent().getParent().state,
+                });
+                return self.formView.getController(self).then(function(controller) {
+                    self.controller = controller;
+                    self.$el.empty();
+                    self.controller.appendTo(self.$el);
+                    self.trigger_up("back_form_loaded");
+                    return controller;
+                });
             });
-            const refinedContext = _.extend(
-                {},
-                this.main_state.getContext(),
-                this.nodeContext
-            );
-            _.extend(refinedContext, this.editContext);
-            this.formView = new ProductPickerQuickCreateFormView(fieldsView, {
-                context: refinedContext,
-                compareKey: this.compareKey,
-                fieldMap: this.fieldMap,
-                modelName: this.basicFieldParams.field.relation,
-                userContext: this.getSession().user_context,
-                ids: this.res_id ? [this.res_id] : [],
-                currentId: this.res_id || undefined,
-                mode: this.res_id && this.readonly ? "readonly" : "edit",
-                recordID: this.id,
-                index: 0,
-                parentID: this.basicFieldParams.parentID,
-                default_buttons: false,
-                withControlPanel: false,
-                model: this.basicFieldParams.model,
-                mainRecordData: this.getParent().getParent().state,
-            });
-            // If (this.id) {
-            //     this.basicFieldParams.model.save(this.id, {savePoint: true});
-            // }
-            const def2 = this.formView.getController(this).then(controller => {
-                this.controller = controller;
-                this.$el.empty();
-                this.controller.appendTo(this.$el);
-            });
-
-            return Promise.all([def1, def2]);
         },
 
         on_attach_callback: function() {
@@ -112,7 +107,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
          * @returns {String}
          */
         _generateFormArch: function() {
-            let template =
+            var template =
                 "<templates><t t-name='One2ManyProductPicker.QuickCreateForm'>";
             template += this.basicFieldParams.field.views.form.arch;
             template += "</t></templates>";
@@ -122,42 +117,6 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
                 record_search: this.searchRecord,
             });
         },
-
-        /**
-         * @private
-         * @param {CustomEvent} evt
-         */
-        _onReloadView: function(evt) {
-            this.editContext = {
-                ignore_onchanges: [this.compareKey],
-                base_record_id: evt.data.baseRecordID || null,
-                base_record_res_id: evt.data.baseRecordResID || null,
-                base_record_compare_value: evt.data.baseRecordCompareValue || null,
-            };
-
-            if (evt.data.baseRecordCompareValue === evt.data.compareValue) {
-                this.res_id = evt.data.baseRecordResID;
-                this.id = evt.data.baseRecordID;
-                this.start();
-            } else {
-                this.getParent()
-                    ._generateVirtualState({}, this.editContext)
-                    .then(state => {
-                        const data = {};
-                        data[this.compareKey] = {
-                            operation: "ADD",
-                            id: evt.data.compareValue,
-                        };
-                        this.basicFieldParams.model
-                            ._applyChange(state.id, data)
-                            .then(() => {
-                                this.res_id = state.res_id;
-                                this.id = state.id;
-                                this.start();
-                            });
-                    });
-            }
-        },
     });
 
     widgetRegistry.add(
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js
index 0c5b178bb..89001fb45 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js
@@ -10,19 +10,19 @@ odoo.define(
          * is used by the RecordQuickCreate in One2ManyProductPicker views.
          */
 
-        const QuickCreateFormView = require("web.QuickCreateFormView");
-        const BasicModel = require("web.BasicModel");
-        const core = require("web.core");
+        var QuickCreateFormView = require("web.QuickCreateFormView");
+        var BasicModel = require("web.BasicModel");
+        var core = require("web.core");
 
-        const qweb = core.qweb;
+        var qweb = core.qweb;
 
         BasicModel.include({
             _applyOnChange: function(values, record, viewType) {
                 // Ignore changes by record context 'ignore_onchanges' fields
                 if ("ignore_onchanges" in record.context) {
-                    const ignore_changes = record.context.ignore_onchanges;
-                    for (const index in ignore_changes) {
-                        const field_name = ignore_changes[index];
+                    var ignore_changes = record.context.ignore_onchanges;
+                    for (var index in ignore_changes) {
+                        var field_name = ignore_changes[index];
                         delete values[field_name];
                     }
                     delete record.context.ignore_onchanges;
@@ -31,7 +31,7 @@ odoo.define(
             },
         });
 
-        const ProductPickerQuickCreateFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
+        var ProductPickerQuickCreateFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
             {
                 /**
                  * @override
@@ -45,7 +45,7 @@ odoo.define(
             }
         );
 
-        const ProductPickerQuickCreateFormController = QuickCreateFormView.prototype.config.Controller.extend(
+        var ProductPickerQuickCreateFormController = QuickCreateFormView.prototype.config.Controller.extend(
             {
                 events: _.extend({}, QuickCreateFormView.prototype.events, {
                     "click .oe_record_add": "_onClickAdd",
@@ -66,8 +66,9 @@ odoo.define(
                  * @override
                  */
                 _applyChanges: function() {
-                    return this._super.apply(this, arguments).then(() => {
-                        this._updateButtons();
+                    var self = this;
+                    return this._super.apply(this, arguments).then(function() {
+                        self._updateButtons();
                     });
                 },
 
@@ -75,17 +76,13 @@ odoo.define(
                  * Create or accept changes
                  */
                 auto: function() {
-                    const record = this.model.get(this.handle);
-                    if (
-                        record.context.has_changes_confirmed ||
-                        typeof record.context.has_changes_confirmed === "undefined"
-                    ) {
+                    var record = this.model.get(this.handle);
+                    if (!record.context.has_changes_unconfirmed) {
                         return;
                     }
-                    const state = this._getRecordState();
-                    if (state === "new") {
+                    if (this.model.isNew(record.id)) {
                         this._add();
-                    } else if (state === "dirty") {
+                    } else if (this.model.isDirty(record.id)) {
                         this._change();
                     }
                 },
@@ -99,16 +96,19 @@ odoo.define(
                  * @returns {Object}
                  */
                 _getRecordState: function() {
-                    const record = this.model.get(this.handle);
-                    let state = "record";
-                    if (this.model.isNew(record.id)) {
+                    var record = this.model.get(this.handle);
+                    var state = "record";
+                    if (
+                        this.model.isNew(record.id) &&
+                        this.model.isPureVirtual(record.id)
+                    ) {
                         state = "new";
-                    } else if (record.isDirty()) {
+                    } else if (record.context.has_changes_unconfirmed) {
                         state = "dirty";
                     }
                     if (state === "new") {
-                        for (const index in this.mainRecordData.data) {
-                            const recordData = this.mainRecordData.data[index];
+                        for (var index in this.mainRecordData.data) {
+                            var recordData = this.mainRecordData.data[index];
                             if (recordData.ref === record.ref) {
                                 if (record.isDirty()) {
                                     state = "dirty";
@@ -174,8 +174,8 @@ odoo.define(
                  * @returns {Boolean}
                  */
                 _needReloadCard: function(fields_changed) {
-                    for (const index in fields_changed) {
-                        const field = fields_changed[index];
+                    for (var index in fields_changed) {
+                        var field = fields_changed[index];
                         if (field === this.fieldMap[this.compareKey]) {
                             return true;
                         }
@@ -192,51 +192,18 @@ odoo.define(
                  * @param {ChangeEvent} ev
                  */
                 _onFieldChanged: function(ev) {
-                    const fields_changed = Object.keys(ev.data.changes);
-                    if (this._needReloadCard(fields_changed)) {
-                        const field = ev.data.changes[fields_changed[0]];
-                        let new_value = false;
-                        if (typeof field === "object") {
-                            new_value = field.id;
-                        } else {
-                            new_value = field;
-                        }
-                        const reload_values = {
-                            compareValue: new_value,
-                        };
-                        const record = this.model.get(this.handle);
-                        if ("base_record_id" in record.context) {
-                            reload_values.baseRecordID = record.context.base_record_id;
-                            reload_values.baseRecordResID =
-                                record.context.base_record_res_id;
-                            reload_values.baseRecordCompareValue =
-                                record.context.base_record_compare_value;
-                        } else {
-                            let old_value = record.data[this.compareKey];
-                            if (typeof old_value === "object") {
-                                old_value = old_value.data.id;
-                            }
-                            reload_values.baseRecordID = record.id;
-                            reload_values.baseRecordResID = record.ref;
-                            reload_values.baseRecordCompareValue = old_value;
-                        }
-                        this.trigger_up("reload_view", reload_values);
-
-                        // Discard current change
-                        ev.data.changes = {};
-                    } else {
-                        this._super.apply(this, arguments);
-                        if (!_.isEmpty(ev.data.changes)) {
-                            if (this.model.isPureVirtual(this.handle)) {
-                                this.model.unsetDirty(this.handle);
-                            }
-                            this.model.updateRecordContext(this.handle, {
-                                has_changes_confirmed: false,
-                            });
-                            this.trigger_up("quick_record_updated", {
-                                changes: ev.data.changes,
-                            });
+                    this._super.apply(this, arguments);
+                    if (!_.isEmpty(ev.data.changes)) {
+                        if (this.model.isPureVirtual(this.handle)) {
+                            this.model.unsetDirty(this.handle);
                         }
+                        this.model.updateRecordContext(this.handle, {
+                            has_changes_unconfirmed: true,
+                        });
+                        this.trigger_up("quick_record_updated", {
+                            changes: ev.data.changes,
+                            highlight: {qty: true},
+                        });
                     }
                 },
 
@@ -244,12 +211,14 @@ odoo.define(
                  * @returns {Deferred}
                  */
                 _add: function() {
+                    var self = this;
                     if (this._disabled) {
                         // Don't do anything if we are already creating a record
-                        return Promise.resolve();
+                        return $.Deferred().resolve();
                     }
                     this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
+                        need_notify: true,
+                        modified: true,
                     });
                     this._disableQuickCreate();
                     return this.saveRecord(this.handle, {
@@ -257,105 +226,145 @@ odoo.define(
                         reload: true,
                         savePoint: true,
                         viewType: "form",
-                    }).then(() => {
-                        const record = this.model.get(this.handle);
-                        this.model.updateRecordContext(this.handle, {saving: true});
-                        this.trigger_up("restore_flip_card", {
-                            success_callback: () => {
-                                this.trigger_up("create_quick_record", {
+                    }).then(function() {
+                        var record = self.model.get(self.handle);
+                        self.model.updateRecordContext(record.id, {
+                            has_changes_unconfirmed: false,
+                            lazy_qty: record.data[self.fieldMap.product_uom_qty],
+                        });
+                        self.trigger_up("block_card", {status: true});
+                        self.trigger_up("modify_quick_record", {
+                            id: record.id,
+                        });
+                        self.trigger_up("restore_flip_card", {
+                            success_callback: function() {
+                                self.trigger_up("create_quick_record", {
                                     id: record.id,
-                                    callback: () => {
-                                        this.model.updateRecordContext(this.handle, {
-                                            saving: false,
-                                        });
-                                        this.model.unsetDirty(this.handle);
-                                        this._enableQuickCreate();
+                                    on_onchange: function() {
+                                        self.trigger_up("block_card", {status: false});
+                                        self._enableQuickCreate();
                                     },
                                 });
                             },
-                            block: true,
                         });
                     });
                 },
 
                 _remove: function() {
+                    var self = this;
                     if (this._disabled) {
-                        return Promise.resolve();
+                        return $.Deferred().resolve();
                     }
 
+                    this.model.updateRecordContext(this.handle, {
+                        need_notify: true,
+                        modified: true,
+                    });
                     this._disableQuickCreate();
-                    this.trigger_up("restore_flip_card", {block: true});
-                    const record = this.model.get(this.handle);
-                    this.trigger_up("list_record_remove", {
+                    var record = this.model.get(this.handle);
+                    this.trigger_up("block_card", {status: true});
+                    this.trigger_up("modify_quick_record", {
                         id: record.id,
                     });
+                    this.trigger_up("restore_flip_card", {
+                        success_callback: function() {
+                            self.trigger_up("list_record_remove", {
+                                id: record.id,
+                                on_onchange: function() {
+                                    self.trigger_up("block_card", {status: false});
+                                    self._enableQuickCreate();
+                                },
+                            });
+                        },
+                    });
                 },
 
                 _change: function() {
-                    const self = this;
+                    var self = this;
                     if (this._disabled) {
                         // Don't do anything if we are already creating a record
-                        return Promise.resolve();
+                        return $.Deferred().resolve();
+                    }
+                    var record = self.model.get(self.handle);
+                    if (
+                        !this.model.isDirty(this.handle) ||
+                        !record.context.has_changes_unconfirmed
+                    ) {
+                        this.trigger_up("restore_flip_card");
+                        return $.Deferred().resolve();
                     }
-                    this._disableQuickCreate();
-                    this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
-                    });
-                    const record = this.model.get(this.handle);
 
-                    this.trigger_up("restore_flip_card", {
-                        success_callback: function() {
-                            // Qty are handled in a special way because can be modified without
-                            // wait for server response
-                            self.model.localData[record.id].data[
-                                self.fieldMap.product_uom_qty
-                            ] = record.data[self.fieldMap.product_uom_qty];
-                            // SaveRecord used to make a save point.
-                            self.saveRecord(self.handle, {
-                                stayInEdit: true,
-                                reload: true,
-                                savePoint: true,
-                                viewType: "form",
-                            }).then(() => {
+                    this.model.updateRecordContext(this.handle, {
+                        need_notify: true,
+                        modified: true,
+                    });
+
+                    this._disableQuickCreate();
+                    // SaveRecord used to make a save point.
+                    return this.saveRecord(this.handle, {
+                        stayInEdit: true,
+                        reload: true,
+                        savePoint: true,
+                        viewType: "form",
+                    }).then(function() {
+                        record = self.model.get(self.handle);
+                        self.model.updateRecordContext(record.id, {
+                            has_changes_unconfirmed: false,
+                            lazy_qty: record.data[self.fieldMap.product_uom_qty],
+                        });
+                        self.trigger_up("block_card", {status: true});
+                        self.trigger_up("modify_quick_record", {
+                            id: record.id,
+                        });
+                        self.trigger_up("restore_flip_card", {
+                            success_callback: function() {
                                 self.trigger_up("update_quick_record", {
                                     id: record.id,
-                                    callback: function() {
-                                        self.model.unsetDirty(self.handle);
+                                    on_onchange: function() {
+                                        self.trigger_up("block_card", {status: false});
                                         self._enableQuickCreate();
                                     },
                                 });
-                            });
-                        },
-                        block: true,
+                            },
+                        });
                     });
                 },
 
                 _discard: function() {
+                    var self = this;
                     if (this._disabled) {
                         // Don't do anything if we are already creating a record
-                        return;
+                        return $.Deferred().resolve();
+                    }
+
+                    var record = self.model.get(self.handle);
+                    if (
+                        !this.model.isDirty(this.handle) ||
+                        !record.context.has_changes_unconfirmed
+                    ) {
+                        this.trigger_up("restore_flip_card");
+                        return $.Deferred().resolve();
                     }
 
-                    this._disableQuickCreate();
                     this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
+                        has_changes_unconfirmed: false,
                     });
+                    this._disableQuickCreate();
                     // Rollback to restore the save point
                     this.model.discardChanges(this.handle, {
                         rollback: true,
                     });
-                    const record = this.model.get(this.handle);
-                    this.trigger_up("quick_record_updated", {
-                        changes: record.data,
-                    });
-
-                    this.update({}, {reload: false}).then(() => {
-                        if (!this.model.isNew(record.id)) {
-                            this.model.unsetDirty(this.handle);
-                        }
-                        this.trigger_up("restore_flip_card");
-                        this._updateButtons();
-                        this._enableQuickCreate();
+                    return this.update({}, {reload: false}).then(function() {
+                        record = self.model.get(self.handle);
+                        self.trigger_up("quick_record_updated", {
+                            changes: record.data,
+                        });
+                        self.trigger_up("restore_flip_card", {
+                            success_callback: function() {
+                                self._updateButtons();
+                                self._enableQuickCreate();
+                            },
+                        });
                     });
                 },
 
@@ -397,7 +406,7 @@ odoo.define(
             }
         );
 
-        const ProductPickerQuickCreateFormView = QuickCreateFormView.extend({
+        var ProductPickerQuickCreateFormView = QuickCreateFormView.extend({
             config: _.extend({}, QuickCreateFormView.prototype.config, {
                 Renderer: ProductPickerQuickCreateFormRenderer,
                 Controller: ProductPickerQuickCreateFormController,
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js
index 2b3f3b552..0fcf2c037 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js
@@ -1,3 +1,4 @@
+/* global py */
 // Copyright 2020 Tecnativa - Alexandre Díaz
 // License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 odoo.define(
@@ -5,21 +6,23 @@ odoo.define(
     function(require) {
         "use strict";
 
-        const core = require("web.core");
-        const Widget = require("web.Widget");
-        const ProductPickerQuickModifPriceFormView = require("web_widget_one2many_product_picker.ProductPickerQuickModifPriceFormView")
+        var core = require("web.core");
+        var Widget = require("web.Widget");
+        var widgetRegistry = require("web.widget_registry");
+        var ProductPickerQuickModifPriceFormView = require("web_widget_one2many_product_picker.ProductPickerQuickModifPriceFormView")
             .ProductPickerQuickModifPriceFormView;
 
-        const qweb = core.qweb;
+        var qweb = core.qweb;
 
         /**
          * This widget render a Form. Used by FieldOne2ManyProductPicker
          */
-        const ProductPickerQuickModifPriceForm = Widget.extend({
+        var ProductPickerQuickModifPriceForm = Widget.extend({
             className: "oe_one2many_product_picker_quick_modif_price",
             xmlDependencies: [
                 "/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml",
             ],
+
             events: {
                 "click .oe_record_change": "_onClickChange",
                 "click .oe_record_discard": "_onClickDiscard",
@@ -30,13 +33,14 @@ odoo.define(
              */
             init: function(parent, options) {
                 this._super.apply(this, arguments);
+                this.trigger_up("pause_auto_save");
                 this.state = options.state;
                 this.main_state = options.main_state;
                 this.node = options.node;
                 this.fields = options.fields;
                 this.fieldMap = options.fieldMap;
                 this.searchRecord = options.searchRecord;
-                this.fieldsInfo = options.fieldsInfo;
+                this.fieldsInfo = _.extend({}, options.fieldsInfo);
                 this.readonly = options.readonly;
                 this.basicFieldParams = options.basicFieldParams;
                 this.canEditPrice = options.canEditPrice;
@@ -45,56 +49,76 @@ odoo.define(
                 this.res_id = this.state && this.state.res_id;
                 this.id = this.state && this.state.id;
                 this.editContext = {};
+                this._fieldsInvisible = [];
             },
 
             /**
              * @override
              */
             start: function() {
-                const def1 = this._super.apply(this, arguments);
-                const fieldsView = {
-                    arch: this._generateFormArch(),
-                    fields: this.fields,
-                    viewFields: this.fields,
-                    base_model: this.basicFieldParams.field.relation,
-                    type: "form",
-                    model: this.basicFieldParams.field.relation,
-                };
-                this.formView = new ProductPickerQuickModifPriceFormView(fieldsView, {
-                    context: this.main_state.getContext(),
-                    fieldMap: this.fieldMap,
-                    modelName: this.basicFieldParams.field.relation,
-                    userContext: this.getSession().user_context,
-                    ids: this.res_id ? [this.res_id] : [],
-                    currentId: this.res_id || undefined,
-                    mode: this.res_id && this.readonly ? "readonly" : "edit",
-                    recordID: this.id,
-                    index: 0,
-                    parentID: this.basicFieldParams.parentID,
-                    default_buttons: true,
-                    withControlPanel: false,
-                    model: this.basicFieldParams.model,
-                    parentRecordData: this.basicFieldParams.recordData,
-                    currencyField: this.currencyField,
-                    disable_autofocus: true,
-                });
-                if (this.id) {
-                    this.basicFieldParams.model.save(this.id, {savePoint: true});
-                }
-                const def2 = this.formView.getController(this).then(controller => {
-                    this.controller = controller;
-                    this.$(".modal-body").empty();
-                    this.controller.appendTo(this.$(".modal-body"));
-                    this.$el.on("hidden.bs.modal", this._onModalHidden.bind(this));
-                });
+                var self = this;
+                this._super.apply(this, arguments).then(function() {
+                    var fieldsView = {
+                        arch: self._generateFormArch(),
+                        fields: self.fields,
+                        viewFields: self.fields,
+                        base_model: self.basicFieldParams.field.relation,
+                        type: "form",
+                        model: self.basicFieldParams.field.relation,
+                    };
 
-                return Promise.all([def1, def2]);
+                    var node_context = self.node.attr("context") || "{}";
+                    self.nodeContext = py.eval(node_context, {
+                        active_id: self.res_id || false,
+                    });
+                    var refinedContext = _.extend(
+                        {},
+                        self.main_state.getContext(),
+                        self.nodeContext
+                    );
+                    _.extend(refinedContext, self.editContext);
+
+                    self.formView = new ProductPickerQuickModifPriceFormView(
+                        fieldsView,
+                        {
+                            context: refinedContext,
+                            fieldMap: self.fieldMap,
+                            modelName: self.basicFieldParams.field.relation,
+                            userContext: self.getSession().user_context,
+                            ids: self.res_id ? [self.res_id] : [],
+                            currentId: self.res_id || undefined,
+                            mode: self.res_id && self.readonly ? "readonly" : "edit",
+                            recordID: self.id,
+                            index: 0,
+                            parentID: self.basicFieldParams.parentID,
+                            default_buttons: true,
+                            withControlPanel: false,
+                            model: self.basicFieldParams.model,
+                            parentRecordData: self.getParent().getParent().state,
+                            currencyField: self.currencyField,
+                            disable_autofocus: true,
+                        }
+                    );
+                    if (self.id) {
+                        self.basicFieldParams.model.save(self.id, {savePoint: true});
+                    }
+                    return self.formView.getController(self).then(function(controller) {
+                        self.controller = controller;
+                        self.$(".modal-body").empty();
+                        self.controller.appendTo(self.$(".modal-body"));
+                        self.$el.on("hidden.bs.modal", self._onModalHidden.bind(self));
+                        self.$el.find(".oe_record_change").removeClass("d-none");
+                        return controller;
+                    });
+                });
             },
 
             /**
              * @override
              */
             destroy: function() {
+                this._restoreNoFetch();
+                this.trigger_up("resume_auto_save");
                 this.$el.off("hidden.bs.modal");
                 this._super.apply(this, arguments);
             },
@@ -108,29 +132,32 @@ odoo.define(
              * @returns {String}
              */
             _generateFormArch: function() {
-                const wanted_field_states = this._getWantedFieldState();
-                let template =
+                var wanted_field_states = this._getWantedFieldState();
+                var template =
                     "<templates><t t-name='One2ManyProductPicker.QuickModifPrice.Form'>";
                 template += this.basicFieldParams.field.views.form.arch;
                 template += "</t></templates>";
                 qweb.add_template(template);
-                const $arch = $(
+                var $arch = $(
                     qweb.render("One2ManyProductPicker.QuickModifPrice.Form", {
                         field_map: this.fieldMap,
                         record_search: this.searchRecord,
                     })
                 );
 
-                const field_names = Object.keys(
+                var field_names = Object.keys(
                     this.basicFieldParams.field.views.form.fields
                 );
-                let gen_arch = "<form><group>";
-                for (const index in field_names) {
-                    const field_name = field_names[index];
-                    const $field = $arch.find("field[name='" + field_name + "']");
-                    const modifiers = $field.attr("modifiers")
+                var gen_arch = "<form><group>";
+                for (var index in field_names) {
+                    var field_name = field_names[index];
+                    var $field = $arch.find("field[name='" + field_name + "']");
+                    var modifiers = $field.attr("modifiers")
                         ? JSON.parse($field.attr("modifiers"))
                         : {};
+                    if (!modifiers.invisible && !(field_name in wanted_field_states)) {
+                        this._fieldsInvisible.push(field_name);
+                    }
                     modifiers.invisible = !(field_name in wanted_field_states);
                     modifiers.readonly = wanted_field_states[field_name];
                     $field.attr("modifiers", JSON.stringify(modifiers));
@@ -160,12 +187,40 @@ odoo.define(
              * @returns {Object}
              */
             _getWantedFieldState: function() {
-                const wantedFieldState = {};
+                var wantedFieldState = {};
                 wantedFieldState[this.fieldMap.discount] = !this.canEditDiscount;
                 wantedFieldState[this.fieldMap.price_unit] = !this.canEditPrice;
                 return wantedFieldState;
             },
 
+            /**
+             * @private
+             */
+            _onClickDiscard: function(ev) {
+                if (this.controller) {
+                    this._hideControlButtons(true);
+                    this.controller._onClickDiscard(ev);
+                }
+            },
+
+            /**
+             * @private
+             */
+            _onClickChange: function(ev) {
+                var self = this;
+                if (!this.controller) {
+                    return;
+                }
+                self._hideControlButtons(true);
+                this.controller._onClickChange(ev).then(function(res) {
+                    if (res) {
+                        self.$el.modal("hide");
+                    } else {
+                        self._hideControlButtons(false);
+                    }
+                });
+            },
+
             /**
              * @private
              */
@@ -173,84 +228,28 @@ odoo.define(
                 this.destroy();
             },
 
+            _hideControlButtons: function(status) {
+                this.$el.find(".oe_record_change").toggleClass("d-none", status);
+                this.$el.find(".oe_record_discard").toggleClass("d-none", status);
+            },
+
             /**
              * @private
-             * @param {MouseEvent} ev
              */
-            _onClickChange: function(ev) {
-                ev.stopPropagation();
-                const model = this.basicFieldParams.model;
-                model.updateRecordContext(this.id, {
-                    has_changes_confirmed: true,
-                });
-                const is_virtual = model.isPureVirtual(this.id);
-
-                // If is a 'pure virtual' record, save it in the selected list
-                if (is_virtual) {
-                    if (model.isDirty(this.id)) {
-                        this._disableQuickCreate();
-                        this.controller
-                            .saveRecord(this.id, {
-                                stayInEdit: true,
-                                reload: true,
-                                savePoint: true,
-                                viewType: "form",
-                            })
-                            .then(() => {
-                                this._enableQuickCreate();
-                                model.unsetDirty(this.id);
-                                this.trigger_up("create_quick_record", {
-                                    id: this.id,
-                                });
-                            });
-                    }
-                } else {
-                    // If is a "normal" record, update it
-                    this.trigger_up("update_quick_record", {
-                        id: this.id,
-                    });
-                    model.unsetDirty(this.id);
+            _restoreNoFetch: function() {
+                var record = this.basicFieldParams.model.get(this.id);
+                for (var field_name of this._fieldsInvisible) {
+                    record.fieldsInfo[record.viewType][field_name].__no_fetch = false;
                 }
-            },
-
-            /**
-             * @private
-             * @param {MouseEvent} ev
-             */
-            _onClickDiscard: function(ev) {
-                ev.stopPropagation();
-                const model = this.basicFieldParams.model;
-                model.discardChanges(this.id, {
-                    rollback: true,
-                });
-                this.trigger_up("update_quick_record", {
-                    id: this.id,
-                });
-            },
-
-            /**
-             * @private
-             */
-            _disableQuickCreate: function() {
-                // Ensures that the record won't be created twice
-                this.$el.addClass("o_disabled");
-                this.$("input:not(:disabled),button:not(:disabled)")
-                    .addClass("o_temporarily_disabled")
-                    .attr("disabled", "disabled");
-            },
-
-            /**
-             * @private
-             */
-            _enableQuickCreate: function() {
-                // Allows to create again
-                this.$el.removeClass("o_disabled");
-                this.$("input.o_temporarily_disabled,button.o_temporarily_disabled")
-                    .removeClass("o_temporarily_disabled")
-                    .attr("disabled", false);
+                this._fieldsInvisible = [];
             },
         });
 
+        widgetRegistry.add(
+            "product_picker_quick_modif_price_form",
+            ProductPickerQuickModifPriceForm
+        );
+
         return ProductPickerQuickModifPriceForm;
     }
 );
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js
index d0040b4e7..e5b95f5e2 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js
@@ -10,23 +10,24 @@ odoo.define(
          * is used by the RecordQuickCreate in One2ManyProductPicker views.
          */
 
-        const QuickCreateFormView = require("web.QuickCreateFormView");
-        const core = require("web.core");
-        const tools = require("web_widget_one2many_product_picker.tools");
+        var QuickCreateFormView = require("web.QuickCreateFormView");
+        var core = require("web.core");
+        var tools = require("web_widget_one2many_product_picker.tools");
 
-        const qweb = core.qweb;
+        var qweb = core.qweb;
 
-        const ProductPickerQuickModifPriceFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
+        var ProductPickerQuickModifPriceFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
             {
                 /**
                  * @override
                  */
                 start: function() {
+                    var self = this;
                     this.$el.addClass(
                         "oe_one2many_product_picker_form_view o_xxs_form_view"
                     );
-                    return this._super.apply(this, arguments).then(() => {
-                        this._appendPrice();
+                    return this._super.apply(this, arguments).then(function() {
+                        self._appendPrice();
                     });
                 },
 
@@ -42,7 +43,7 @@ odoo.define(
             }
         );
 
-        const ProductPickerQuickModifPriceFormController = QuickCreateFormView.prototype.config.Controller.extend(
+        var ProductPickerQuickModifPriceFormController = QuickCreateFormView.prototype.config.Controller.extend(
             {
                 /**
                  * @override
@@ -50,18 +51,20 @@ odoo.define(
                 init: function(parent, model, renderer, params) {
                     this.fieldMap = params.fieldMap;
                     this.context = params.context;
-                    this._super.apply(this, arguments);
                     this.currencyField = params.currencyField;
                     this.parentRecordData = params.parentRecordData;
+                    this.fields = parent.state.fields;
+                    this._super.apply(this, arguments);
                 },
 
                 /**
                  * @override
                  */
                 start: function() {
-                    return this._super.apply(this, arguments).then(() => {
-                        const record = this.model.get(this.handle);
-                        this._updatePrice(record.data);
+                    var self = this;
+                    return this._super.apply(this, arguments).then(function() {
+                        var record = self.model.get(self.handle);
+                        self._updatePrice(record.data);
                     });
                 },
 
@@ -70,8 +73,21 @@ odoo.define(
                  */
                 _onFieldChanged: function(ev) {
                     this._super.apply(this, arguments);
-                    const record = this.model.get(this.handle);
-                    this._updatePrice(_.extend({}, record.data, ev.data.changes));
+                    if (!_.isEmpty(ev.data.changes)) {
+                        this.model.updateRecordContext(this.handle, {
+                            has_changes_unconfirmed: true,
+                        });
+                    }
+                },
+
+                /**
+                 * @override
+                 */
+                _applyChanges: function() {
+                    return this._super.apply(this, arguments).then(() => {
+                        var record = this.model.get(this.handle);
+                        this._updatePrice(record.data);
+                    });
                 },
 
                 /**
@@ -79,7 +95,7 @@ odoo.define(
                  * @param {Object} values
                  */
                 _updatePrice: function(values) {
-                    const price_reduce = tools.priceReduce(
+                    var price_reduce = tools.priceReduce(
                         values[this.fieldMap.price_unit],
                         values[this.fieldMap.discount]
                     );
@@ -88,16 +104,136 @@ odoo.define(
                         .html(
                             tools.monetary(
                                 price_reduce,
-                                this.getParent().state.fields[this.fieldMap.price_unit],
+                                this.fields[this.fieldMap.price_unit],
                                 this.currencyField,
                                 values
                             )
                         );
                 },
+
+                /**
+                 * @private
+                 * @param {MouseEvent} ev
+                 */
+                _onClickChange: function(ev) {
+                    var self = this;
+                    var def = $.Deferred();
+                    ev.stopPropagation();
+                    this.model.updateRecordContext(this.handle, {
+                        has_changes_unconfirmed: false,
+                    });
+
+                    if (!this.model.isDirty(this.handle)) {
+                        return def.resolve();
+                    }
+
+                    this._disableQuickCreate();
+                    this.trigger_up("quick_record_updated", {
+                        changes: _.extend(
+                            {},
+                            this.model.localData[this.handle].data,
+                            this.model.localData[this.handle]._changes
+                        ),
+                        highlight: {price: true},
+                    });
+
+                    this.model.updateRecordContext(this.handle, {
+                        need_notify: true,
+                        modified: true,
+                    });
+                    this.trigger_up("block_card", {status: true});
+                    this.trigger_up("modify_quick_record", {
+                        id: this.handle,
+                    });
+
+                    var is_virtual = this.model.isPureVirtual(this.handle);
+                    // If is a 'pure virtual' record, save it in the selected list
+                    if (is_virtual) {
+                        this.saveRecord(this.handle, {
+                            stayInEdit: true,
+                            reload: true,
+                            savePoint: true,
+                            viewType: "form",
+                        }).then(function() {
+                            def.resolve(true);
+                            self.trigger_up("create_quick_record", {
+                                id: self.handle,
+                                on_onchange: function() {
+                                    self.trigger_up("block_card", {status: false});
+                                    self._enableQuickCreate();
+                                },
+                            });
+                        });
+                    } else {
+                        def.resolve(true);
+                        // If is a "normal" record, update it
+                        this.trigger_up("update_quick_record", {
+                            id: this.handle,
+                            on_onchange: function() {
+                                self.trigger_up("block_card", {status: false});
+                                self._enableQuickCreate();
+                            },
+                        });
+                    }
+                    return def;
+                },
+
+                /**
+                 * @private
+                 * @param {MouseEvent} ev
+                 */
+                _onClickDiscard: function(ev) {
+                    var self = this;
+                    ev.stopPropagation();
+                    if (!this.model.isDirty(this.handle)) {
+                        return true;
+                    }
+                    this.model.discardChanges(this.handle, {
+                        rollback: true,
+                    });
+                    this.model.updateRecordContext(this.handle, {
+                        need_notify: false,
+                        modified: false,
+                    });
+                    this.trigger_up("block_card", {status: true});
+                    this.trigger_up("modify_quick_record", {
+                        id: this.handle,
+                    });
+                    this.trigger_up("update_quick_record", {
+                        id: this.handle,
+                        on_onchange: function() {
+                            self.trigger_up("block_card", {status: false});
+                            self._enableQuickCreate();
+                        },
+                    });
+                    return true;
+                },
+
+                /**
+                 * @private
+                 */
+                _disableQuickCreate: function() {
+                    // Ensures that the record won't be created twice
+                    this.$el.addClass("o_disabled");
+                    this.$("input:not(:disabled),button:not(:disabled)")
+                        .addClass("o_temporarily_disabled")
+                        .attr("disabled", "disabled");
+                },
+
+                /**
+                 * @private
+                 */
+                _enableQuickCreate: function() {
+                    // Allows to create again
+                    this.$el.removeClass("o_disabled");
+                    this.$("input.o_temporarily_disabled,button.o_temporarily_disabled")
+                        .removeClass("o_temporarily_disabled")
+                        .attr("disabled", false);
+                },
             }
         );
 
-        const ProductPickerQuickModifPriceFormView = QuickCreateFormView.extend({
+        var ProductPickerQuickModifPriceFormView = QuickCreateFormView.extend({
             config: _.extend({}, QuickCreateFormView.prototype.config, {
                 Renderer: ProductPickerQuickModifPriceFormRenderer,
                 Controller: ProductPickerQuickModifPriceFormController,
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js
index 170efe4ed..2dad8222d 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js
@@ -6,29 +6,30 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
 ) {
     "use strict";
 
-    const core = require("web.core");
-    const Widget = require("web.Widget");
-    const Domain = require("web.Domain");
-    const widgetRegistry = require("web.widget_registry");
-    const tools = require("web_widget_one2many_product_picker.tools");
-    const ProductPickerQuickModifPriceForm = require("web_widget_one2many_product_picker.ProductPickerQuickModifPriceForm");
-    const config = require("web.config");
+    var core = require("web.core");
+    var Widget = require("web.Widget");
+    var Domain = require("web.Domain");
+    var widgetRegistry = require("web.widget_registry");
+    var tools = require("web_widget_one2many_product_picker.tools");
+    var config = require("web.config");
 
-    const qweb = core.qweb;
-    const _t = core._t;
+    var qweb = core.qweb;
+    var _t = core._t;
 
     /* This represent a record (a card) */
-    const One2ManyProductPickerRecord = Widget.extend({
+    var One2ManyProductPickerRecord = Widget.extend({
         custom_events: {
             quick_record_updated: "_onQuickRecordUpdated",
             restore_flip_card: "_onRestoreFlipCard",
+            block_card: "_onBlockCard",
+            back_form_loaded: "_onBackFormLoaded",
         },
         events: {
             "click .oe_flip_card": "_onClickFlipCard",
         },
 
         _click_card_delayed_time: 250,
-        _onchange_delay: 250,
+        _trigger_record_action_delay: 600,
 
         /**
          * @override
@@ -38,12 +39,20 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             this.options = options;
             this.subWidgets = {};
             this._clickFlipCardCount = 0;
+            this._setMasterUomMap();
             this._setState(state, options.searchRecord);
             this.widgets = {
                 front: [],
                 back: [],
             };
-            this._lazyUpdateRecord = _.debounce(this._updateRecord.bind(this), 450);
+            this._lazyUpdateRecord = _.debounce(
+                this._updateRecord.bind(this),
+                this._trigger_record_action_delay
+            );
+            this._lazyAddProduct = _.debounce(
+                this._addProduct.bind(this),
+                this._trigger_record_action_delay
+            );
         },
 
         /**
@@ -52,8 +61,8 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Boolean} simple_mode
          * @returns {Object}
          */
-        generateVirtualState: function(simple_mode) {
-            return this._generateVirtualState(undefined, undefined, simple_mode).then(
+        generateVirtualState: function(options) {
+            return this._generateVirtualState(undefined, undefined, options).then(
                 this.recreate.bind(this)
             );
         },
@@ -98,7 +107,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 this._timerOnChange = false;
             }
             if (this.state) {
-                const model = this.options.basicFieldParams.model;
+                var model = this.options.basicFieldParams.model;
                 model.updateRecordContext(this.state.id, {aborted: true});
             }
         },
@@ -120,22 +129,34 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * new one.
          *
          * @param {Object} state
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         recreate: function(state) {
             if (!this.getParent()) {
                 // It's a zombie record! ensure kill it!
                 this.destroy();
-                return;
+                return $.when();
             }
 
             if (state) {
                 this._setState(state);
+            } else {
+                var model = this.options.basicFieldParams.model;
+                this.is_virtual = !this.state || model.isPureVirtual(this.state.id);
             }
-            if (this.$card) {
+
+            if (this.$card && this.$card.length) {
                 this.$card.removeClass("blocked");
                 // Avoid recreate active record
                 if (this.$card.hasClass("active")) {
+                    this.$front.replaceWith(
+                        qweb.render(
+                            "One2ManyProductPicker.FlipCard.Front",
+                            this._getQWebContext()
+                        )
+                    );
+                    this._processWidgetFields(this.$front);
+                    this._processWidgets(this.$front, "front");
                     this._processDynamicFields();
                     return $.when();
                 }
@@ -178,8 +199,10 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @returns {String}
          */
         _getMonetaryFieldValue: function(price_field) {
-            const field_name = this.options.fieldMap[price_field];
-            const price = this.state.data[field_name];
+            var model = this.options.basicFieldParams.model;
+            var field_name = this.options.fieldMap[price_field];
+            var record = model.get(this.state.id);
+            var price = record.data[field_name];
             return tools.monetary(
                 price,
                 this.state.fields[field_name],
@@ -195,10 +218,14 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {String} price_field
          * @returns {String}
          */
-        _getFloatFieldValue: function(field) {
-            const field_name = this.options.fieldMap[field];
-            const value = this.state.data[field_name];
-            return tools.float(value, this.state.fields[field_name]);
+        _getFloatFieldValue: function(field, value) {
+            var model = this.options.basicFieldParams.model;
+            var field_name = this.options.fieldMap[field];
+            var record = model.get(this.state.id);
+            if (typeof value === "undefined") {
+                value = record.data[field_name];
+            }
+            return tools.float(value, record.fields[field_name]);
         },
 
         /**
@@ -227,33 +254,46 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 this.destroy();
                 return;
             }
-
             this.fields = this.getParent().state.fields;
             this.fieldsInfo = this.getParent().state.fieldsInfo.form;
-            const model = this.options.basicFieldParams.model;
+            var model = this.options.basicFieldParams.model;
             if (this.state && (!viewState || this.state.id !== viewState.id)) {
                 model.removeVirtualRecord(this.state.id);
             }
             this.state = viewState;
+            this._setMasterUomMap();
 
             if (recordSearch) {
                 this.recordSearch = recordSearch;
             }
-            this.is_virtual =
-                (this.state && model.isPureVirtual(this.state.id)) || false;
+            this.is_virtual = !this.state || model.isPureVirtual(this.state.id);
 
-            // Check if has cached qty
-            if (this.state && this.state.id) {
-                const record = model.get(this.state.id);
-                const lazy_qty = (record && record.context.lazy_qty) || 0;
-                if (lazy_qty) {
-                    model.updateRecordContext(this.state.id, {lazy_qty: 0});
-                    // Record already has 1
-                    this._incProductQty(lazy_qty - 1);
+            // Check if has cached qty. if not, set the actual qty.
+            if (this.state) {
+                var record = model.get(this.state.id);
+                var new_context = {
+                    ignore_warning: this.options.ignoreWarning,
+                    shadow: true,
+                    saving: (record && record.context.saving) || false,
+                    need_notify: (record && record.context.need_notify) || false,
+                    need_save: (record && record.context.need_save) || false,
+                };
+                var lazy_qty = (record && record.context.lazy_qty) || 0;
+                if (this.is_virtual) {
+                    // Pure virtual records uses 1 qty to trigger the onchanges
+                    // but really the qty its zero.
+                    new_context.lazy_qty = lazy_qty;
+                } else {
+                    // For non pure virtual records the default "lazy_qty"
+                    // must be the actual qty in the line
+                    new_context.lazy_qty =
+                        lazy_qty ||
+                        record.data[
+                            this.options.fieldMap[this.master_uom_map.field_uom_qty]
+                        ];
                 }
+                model.updateRecordContext(this.state.id, new_context);
             }
-
-            this._setMasterUomMap();
         },
 
         /**
@@ -276,35 +316,69 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             // Using directly the 'model record' instead of the state because
             // the state it's a parsed version of this record that doesn't
             // contains the '_virtual' attribute.
-            const model = this.options.basicFieldParams.model;
-            const record = model.get(this.state.id);
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
             return {
                 record_search: this.recordSearch,
                 user_context:
                     (this.getSession() && this.getSession().user_context) || {},
                 image: this._getImageUrl.bind(this),
                 compute_domain: this._computeDomain.bind(this),
-                state: this.state,
+                state: model.get(this.state.id),
                 field_map: this.options.fieldMap,
                 widget: this,
                 monetary: this._getMonetaryFieldValue.bind(this),
                 floatFixed: this._getFloatFieldValue.bind(this),
                 show_discount: this.options.showDiscount,
                 is_virtual: this.is_virtual,
-                modified:
-                    record &&
-                    model.hasChanges(record.id) &&
-                    !model.isPureVirtual(record.id),
                 active_model: "",
                 auto_save: this.options.autoSave,
                 is_saving: record && record.context.saving,
-                lazy_qty: record && record.context.lazy_qty,
+                modified: record && record.context.modified,
+                need_notify: record && record.context.need_notify,
+                need_save: record && record.context.need_save,
+                lazy_qty:
+                    record &&
+                    this._getFloatFieldValue(
+                        this.options.fieldMap[this.master_uom_map.field_uom_qty],
+                        record.context.lazy_qty !== 0
+                            ? record.context.lazy_qty
+                            : undefined
+                    ),
                 has_onchange: record && !record.context.not_onchange,
                 field_uom: this.master_uom_map.field_uom,
                 field_uom_qty: this.master_uom_map.field_uom_qty,
             };
         },
 
+        /**
+         * @private
+         * @returns {Object}
+         */
+        _getEvalContext: function() {
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            var PY_monetary = new py.PY_def.fromJSON(
+                function() {
+                    var args = py.PY_parseArgs(arguments, ["str"]);
+                    return py.str.fromJSON(
+                        this._getMonetaryFieldValue(args.str.toJSON())
+                    );
+                }.bind(this)
+            );
+            var PY_floatFixed = new py.PY_def.fromJSON(
+                function() {
+                    var args = py.PY_parseArgs(arguments, ["str"]);
+                    return py.str.fromJSON(this._getFloatFieldValue(args.str.toJSON()));
+                }.bind(this)
+            );
+            return {
+                obj: _.extend({}, record.data, this.recordSearch),
+                monetary: PY_monetary,
+                floatFixed: PY_floatFixed,
+            };
+        },
+
         /**
          * Forced context used in virtual states
          *
@@ -312,7 +386,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @returns {Object}
          */
         _getInternalVirtualRecordContext: function() {
-            const context = {};
+            var context = {};
             context[`default_${this.options.basicFieldParams.relation_field}`] =
                 this.options.basicFieldParams.record.id || null;
             context[`default_${this.options.fieldMap.product}`] =
@@ -335,147 +409,84 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
 
         /**
          * This generates a virtual record with delayed call to "get_default" & "onchange"
-         * used in "instant search" mode
+         * The method is only needed for records that are 'pure virtual'
          *
          * @private
          * @param {Object} context
          * @param {Object} def_values
-         * @returns {Promise}
+         * @returns {Deferred}
          */
-        _generateVirtualStateSimple: function(context, def_values) {
-            const model = this.options.basicFieldParams.model;
-            return new Promise(resolve => {
-                const record_def = model.createVirtualDatapoint(
-                    this.options.basicFieldParams.value.id,
-                    {
-                        context: context,
-                    }
-                );
-                model.applyDefaultValues(record_def.record.id, def_values).then(() => {
-                    const new_state = model.get(record_def.record.id);
-                    const product_uom_id =
-                        new_state.data[
-                            this.options.fieldMap[this.master_uom_map.field_uom]
-                        ].id;
-                    // Apply default values
-                    model
-                        .applyDefaultValues(
-                            product_uom_id,
-                            {
-                                display_name: this.recordSearch[
-                                    this.master_uom_map.search_field_uom
-                                ][1],
-                            },
-                            {
-                                fieldNames: ["display_name"],
-                            }
+        _generateVirtualStateDeferred: function(context, def_values) {
+            var self = this;
+            var model = this.options.basicFieldParams.model;
+            var def = $.Deferred();
+            var record_def = model.createVirtualDatapoint(
+                this.options.basicFieldParams.value.id,
+                {
+                    context: context,
+                }
+            );
+            model
+                .applyDefaultValues(record_def.record.id, def_values)
+                .then(function() {
+                    return model._fetchRelationalData(record_def.record);
+                })
+                .then(function() {
+                    return model._postprocess(record_def.record);
+                })
+                .then(function() {
+                    // Self._timerOnChange = setTimeout(
+                    //     function(current_batch_id, record_def) {
+                    //         self._timerOnChange = false;
+                    //         if (
+                    //             current_batch_id !==
+                    //                 self.options.basicFieldParams.current_batch_id ||
+                    //             record_def.record.context.aborted
+                    //         ) {
+                    //             return;
+                    //         }
+                    return model
+                        ._makeDefaultRecordNoDatapoint(
+                            record_def.record,
+                            record_def.params
                         )
-                        .then(() => {
-                            return model._fetchRelationalData(record_def.record);
-                        })
-                        .then(() => {
-                            return model._postprocess(record_def.record);
-                        })
-                        .then(() => {
-                            this._timerOnChange = setTimeout(
-                                (current_batch_id, record_def) => {
-                                    this._timerOnChange = false;
-                                    if (
-                                        current_batch_id !==
-                                            this.options.basicFieldParams
-                                                .current_batch_id ||
-                                        record_def.record.context.aborted
-                                    ) {
-                                        return;
-                                    }
-                                    model
-                                        ._makeDefaultRecordNoDatapoint(
-                                            record_def.record,
-                                            record_def.params
-                                        )
-                                        .then(() => {
-                                            if (record_def.record.context.aborted) {
-                                                return;
-                                            }
-                                            model.updateRecordContext(
-                                                record_def.record.id,
-                                                {
-                                                    not_onchange: false,
-                                                }
-                                            );
-                                            this.recreate(
-                                                model.get(record_def.record.id)
-                                            );
-                                        });
-                                },
-                                this._onchange_delay,
-                                this.options.basicFieldParams.current_batch_id,
-                                record_def
-                            );
-
-                            resolve(model.get(record_def.record.id));
-                        });
-                });
-            });
-        },
-
-        /**
-         * Generates a complete virtual record
-         *
-         * @private
-         * @param {Object} data
-         * @param {Object} context
-         * @param {Object} def_values
-         * @returns {Promise}
-         */
-        _generateVirtualStateFull: function(data, context, def_values) {
-            const model = this.options.basicFieldParams.model;
-            return new Promise(resolve => {
-                model
-                    .createVirtualRecord(this.options.basicFieldParams.value.id, {
-                        context: context,
-                    })
-                    .then(result => {
-                        // Apply default values
-                        model
-                            .applyDefaultValues(result.record.id, def_values)
-                            .then(() => {
-                                const new_state = model.get(result.record.id);
-                                const product_uom_id =
-                                    new_state.data[
-                                        this.options.fieldMap[
-                                            this.master_uom_map.field_uom
-                                        ]
-                                    ].id;
-                                model
-                                    .applyDefaultValues(
-                                        product_uom_id,
-                                        {
-                                            display_name: this.recordSearch[
-                                                this.master_uom_map.search_field_uom
-                                            ][1],
-                                        },
-                                        {
-                                            fieldNames: ["display_name"],
-                                        }
-                                    )
-                                    .then(() => {
-                                        const sdata = _.extend(
-                                            {},
-                                            this._getInternalVirtualRecordData(),
-                                            data
-                                        );
-                                        this._applyChanges(
-                                            result.record.id,
-                                            sdata,
-                                            result.params
-                                        ).then(() =>
-                                            resolve(model.get(result.record.id))
-                                        );
-                                    });
+                        .then(function() {
+                            if (record_def.record.context.aborted) {
+                                return;
+                            }
+                            model.updateRecordContext(record_def.record.id, {
+                                not_onchange: false,
                             });
-                    });
-            });
+
+                            return self.recreate(model.get(record_def.record.id));
+                            // .then(function() {
+                            //     var field_uom_qty = self.options.fieldMap[
+                            //         self.master_uom_map.field_uom_qty
+                            //     ];
+                            //     var record_state = model.get(record_def.record.id);
+                            //     // Check if need update the qty
+                            //     if (
+                            //         record_state.context.lazy_qty > 0
+                            //     ) {
+                            //         var model_record =
+                            //             model.localData[record_def.record.id];
+                            //         model_record._changes =
+                            //             model_record._changes || {};
+                            //         model_record._changes[field_uom_qty] =
+                            //             record_state.context.lazy_qty;
+                            //         return self._modifyProductDelayed(0, 'add');
+                            //     }
+                            // });
+                        });
+                    //     },
+                    //     options.onchange_delay,
+                    //     self.options.basicFieldParams.current_batch_id,
+                    //     record_def
+                    // );
+
+                    // return def.resolve(model.get(record_def.record.id));
+                });
+            return def;
         },
 
         /**
@@ -485,23 +496,20 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Boolean} simple_mode
          * @returns {Object}
          */
-        _generateVirtualState: function(data, context, simple_mode) {
-            const scontext = _.extend(
+        _generateVirtualState: function(data, context, options) {
+            var scontext = _.extend(
                 {},
                 this._getInternalVirtualRecordContext(),
                 context
             );
             // Apply default values
-            const def_values = {
+            var def_values = {
                 [this.options.fieldMap.product]: this.recordSearch.id,
                 [this.options.fieldMap[this.master_uom_map.field_uom_qty]]: 1.0,
                 [this.options.fieldMap[this.master_uom_map.field_uom]]: this
                     .recordSearch[this.master_uom_map.search_field_uom][0],
             };
-            if (simple_mode) {
-                return this._generateVirtualStateSimple(scontext, def_values);
-            }
-            return this._generateVirtualStateFull(data, scontext, def_values);
+            return this._generateVirtualStateDeferred(scontext, def_values, options);
         },
 
         /**
@@ -510,15 +518,16 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Integer/String} record_id
          * @param {Object} changes
          * @param {Object} options
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         _applyChanges: function(record_id, changes, options) {
-            const model = this.options.basicFieldParams.model;
-            return model._applyChange(record_id, changes, options).then(() => {
+            var self = this;
+            var model = this.options.basicFieldParams.model;
+            return model._applyChange(record_id, changes, options).then(function() {
                 model.updateRecordContext(record_id, {
                     not_onchange: false,
                 });
-                this.recreate(model.get(record_id));
+                self.recreate(model.get(record_id));
             });
         },
 
@@ -561,30 +570,31 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {jQueryElement} $container
          */
         _processWidgetFields: function($container) {
-            $container.find("field").each((key, value) => {
-                const $field = $(value);
+            var self = this;
+            $container.find("field").each(function(key, value) {
+                var $field = $(value);
                 if ($field.parents("widget").length) {
                     return;
                 }
-                const field_name = $field.attr("name");
-                const field_widget = $field.attr("widget");
+                var field_name = $field.attr("name");
+                var field_widget = $field.attr("widget");
 
                 // A widget is specified for that field or a field is a many2many ;
                 // in this latest case, we want to display the widget many2manytags
                 // even if it is not specified in the view.
-                if (field_widget || this.fields[field_name].type === "many2many") {
-                    let widget = this.subWidgets[field_name];
+                if (field_widget || self.fields[field_name].type === "many2many") {
+                    var widget = self.subWidgets[field_name];
                     if (widget) {
                         // A widget already exists for that field, so reset it
                         // with the new state
-                        widget.reset(this.state);
+                        widget.reset(self.state);
                         $field.replaceWith(widget.$el);
                     } else {
                         // The widget doesn't exist yet, so instanciate it
-                        const Widget = this.fieldsInfo[field_name].Widget;
+                        var Widget = self.fieldsInfo[field_name].Widget;
                         if (Widget) {
-                            widget = this._processWidget($field, field_name, Widget);
-                            this.subWidgets[field_name] = widget;
+                            widget = self._processWidget($field, field_name, Widget);
+                            self.subWidgets[field_name] = widget;
                         } else if (config.isDebug()) {
                             // The widget is not implemented
                             $field.replaceWith(
@@ -618,25 +628,20 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             // field's widgets point of view
             // that dict being shared between records, we don't modify it
             // in place
-            const attrs = Object.create(null);
-            _.each(this.fieldsInfo[field_name], (value, key) => {
+            var attrs = Object.create(null);
+            _.each(this.fieldsInfo[field_name], function(value, key) {
                 if (_.str.startsWith(key, "t-att-")) {
                     key = key.slice(6);
                     value = $field.attr(key);
                 }
                 attrs[key] = value;
             });
-            const options = _.extend({}, this.options, {
+            var options = _.extend({}, this.options, {
                 attrs: attrs,
                 data: this.state.data,
             });
-            const widget = new Widget(
-                this,
-                field_name,
-                this.getParent().state,
-                options
-            );
-            const def = widget.replace($field);
+            var widget = new Widget(this, field_name, this.getParent().state, options);
+            var def = widget.replace($field);
             this.defs.push(def);
             return widget;
         },
@@ -649,43 +654,73 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {String} widget_zone
          */
         _processWidgets: function($container, widget_zone) {
-            $container.find("widget").each((key, value) => {
-                const $field = $(value);
-                const FieldWidget = widgetRegistry.get($field.attr("name"));
-                const widget = new FieldWidget(this, {
-                    fieldsInfo: this.fieldsInfo,
-                    fields: this.fields,
-                    main_state: this.getParent().state,
-                    state: this.state,
-                    fieldMap: this.options.fieldMap,
-                    searchRecord: this.recordSearch,
+            var self = this;
+            $container.find("widget").each(function(key, value) {
+                var $field = $(value);
+                var FieldWidget = widgetRegistry.get($field.attr("name"));
+                var widget = new FieldWidget(self, {
+                    fieldsInfo: self.fieldsInfo,
+                    fields: self.fields,
+                    main_state: self.getParent().state,
+                    state: self.state,
+                    fieldMap: self.options.fieldMap,
+                    searchRecord: self.recordSearch,
                     node: $field,
-                    readonly: this.options.readOnlyMode,
-                    basicFieldParams: this.options.basicFieldParams,
-                    data: this.state && this.state.data,
+                    readonly: self.options.readOnlyMode,
+                    basicFieldParams: self.options.basicFieldParams,
+                    data: self.state && self.state.data,
                 });
 
-                this.widgets[widget_zone].push(widget);
+                self.widgets[widget_zone].push(widget);
 
-                const def = widget
-                    ._widgetRenderAndInsert(() => {
+                var def = widget
+                    ._widgetRenderAndInsert(function() {
                         // Do nothing
                     })
-                    .then(() => {
+                    .then(function() {
                         widget.$el.addClass("o_widget");
                         $field.replaceWith(widget.$el);
                     });
-                this.defs.push(def);
+                self.defs.push(def);
             });
         },
 
+        /**
+         * @param {Object} options
+         */
+        highlight: function(options) {
+            options = options || {};
+            this._doInteractAnim();
+            this.$front.removeClass("border-sucess").addClass("border-warning");
+            if (options.qty) {
+                this.$el
+                    .find(".badge.product_qty,.badge.add_product")
+                    .removeClass("badge-primary")
+                    .addClass("badge-warning");
+            }
+            if (options.price) {
+                this.$el
+                    .find(".badge.price_unit")
+                    .removeClass("badge-info")
+                    .addClass("badge-warning");
+            }
+        },
+
         /**
          * @private
          */
         _updateLazyQty: function() {
             var model = this.options.basicFieldParams.model;
             var record = model.get(this.state.id);
-            this.$el.find(".lazy_product_qty").text(record.context.lazy_qty);
+            this.highlight({qty: true});
+            this.$el
+                .find(".lazy_product_qty")
+                .text(
+                    this._getFloatFieldValue(
+                        this.options.fieldMap[this.master_uom_map.field_uom_qty],
+                        record.context.lazy_qty
+                    )
+                );
         },
 
         /**
@@ -705,37 +740,34 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Array} fields
          */
         _processDynamicFields: function(fields) {
-            if (!this.state) {
+            if (!this.state || !this.$el || !this.$el.length) {
                 return;
             }
-            const model = this.options.basicFieldParams.model;
-            const record = model.get(this.state.id);
-            const state_data = record.data;
-
-            let to_find = [];
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            var state_data = record.data;
+            var context = this._getEvalContext();
+            var to_find = [];
             if (_.isEmpty(fields)) {
                 to_find = ["[data-field]"];
             } else {
-                to_find = _.map(fields, field => {
-                    return _.str.sprintf("[data-field=%s]", [field]);
+                to_find = _.map(fields, function(field) {
+                    return `[data-field=${field}]`;
                 });
             }
 
-            this.$el.find(to_find.join()).each((key, value) => {
-                const $elm = $(value);
-                const format_out = $elm.data("esc") || $elm.data("field");
-                const text_out = py.eval(
-                    format_out,
-                    _.extend({}, state_data, this.recordSearch)
-                );
+            this.$el.find(to_find.join()).each(function(key, value) {
+                var $elm = $(value);
+                var format_out = $elm.data("esc") || $elm.data("field");
+                var text_out = py.eval(format_out, context);
                 $elm.html(text_out);
                 $elm.attr("title", text_out);
             });
 
             if (this.options.showDiscount) {
-                const field_map = this.options.fieldMap;
+                var field_map = this.options.fieldMap;
                 if (state_data) {
-                    const has_discount = state_data[field_map.discount] !== 0.0;
+                    var has_discount = state_data[field_map.discount] !== 0.0;
                     this.$el
                         .find(".original_price,.discount_price")
                         .toggleClass("d-none", !has_discount);
@@ -747,6 +779,10 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                             .html(this._getMonetaryFieldValue("price_unit"));
                     }
                 }
+            } else {
+                this.$el
+                    .find(".price_unit")
+                    .html(this._getMonetaryFieldValue("price_unit"));
             }
         },
 
@@ -755,10 +791,10 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @returns {String}
          */
         _calcPriceReduced: function() {
-            let price_reduce = 0;
-            const field_map = this.options.fieldMap;
-            const model = this.options.basicFieldParams.model;
-            const record = model.get(this.state.id);
+            var price_reduce = 0;
+            var field_map = this.options.fieldMap;
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
             if (record && record.data[field_map.discount]) {
                 price_reduce = tools.priceReduce(
                     record.data[field_map.price_unit],
@@ -778,129 +814,160 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
 
         /**
          * @private
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         _saveRecord: function() {
-            const model = this.options.basicFieldParams.model;
-            const record = model.get(this.state.id);
-            model.updateRecordContext(this.state.id, {saving: true});
-            this.recreate();
-            return model
-                .save(record.id, {
-                    stayInEdit: true,
-                    reload: true,
-                    savePoint: true,
-                    viewType: "form",
-                })
-                .then(() => {
-                    const record = model.get(this.state.id);
-                    this.trigger_up("create_quick_record", {
-                        id: record.id,
-                        callback: () => {
-                            model.updateRecordContext(this.state.id, {saving: false});
-                            this.$card
-                                .find(".o_catch_attention")
-                                .removeClass("o_catch_attention");
-                        },
-                    });
-                    model.unsetDirty(this.state.id);
-                });
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            if (!record) {
+                return $.Deferred().resolve();
+            }
+            return model.save(record.id, {
+                stayInEdit: true,
+                reload: true,
+                savePoint: true,
+                viewType: "form",
+            });
         },
 
         /**
          * @private
          */
-        _updateRecord: function() {
-            const model = this.options.basicFieldParams.model;
-            const record = model.get(this.state.id);
-            this.trigger_up("update_quick_record", {
-                id: record.id,
-                callback: () => {
-                    this.$card
-                        .find(".o_catch_attention")
-                        .removeClass("o_catch_attention");
-                },
-            });
-            model.unsetDirty(this.state.id);
-        },
-
-        /**
-         * @private
-         * @returns {Promise}
-         */
-        _addProduct: function() {
-            const model = this.options.basicFieldParams.model;
-            model.updateRecordContext(this.state.id, {
-                ignore_warning: this.options.ignoreWarning,
-            });
-            const record = model.get(this.state.id);
+        _updateRecord: function(amount) {
+            var self = this;
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
             // Because we don't hide the 'add' button when the product is added form back form
             // we check if the record is in "saving" mode to prevent duplicate it.
-            if (record.context.saving) {
-                return Promise.resolve();
+            if (!record || record.context.saving) {
+                return $.Deferred().resolve();
             }
-            const changes = _.pick(
+            var changes = _.pick(
                 record.data,
                 this.options.fieldMap[this.master_uom_map.field_uom_qty]
             );
-            if (
+
+            if (amount === 0) {
+                var lazy_qty = record.context.lazy_qty || 1;
+                changes[
+                    this.options.fieldMap[this.master_uom_map.field_uom_qty]
+                ] = lazy_qty;
+            } else if (
                 changes[this.options.fieldMap[this.master_uom_map.field_uom_qty]] === 0
             ) {
                 changes[this.options.fieldMap[this.master_uom_map.field_uom_qty]] = 1;
             }
             this.$card.addClass("blocked");
-            return model.notifyChanges(record.id, changes).then(() => {
-                this._saveRecord();
-            });
+            return model
+                ._applyChange(record.id, changes)
+                .then(function() {
+                    return self._saveRecord();
+                })
+                .then(function() {
+                    var record = model.get(self.state.id);
+                    self.trigger_up("update_quick_record", {
+                        id: record.id,
+                        on_onchange: function() {
+                            self.$card.removeClass("blocked");
+                            self.$card
+                                .find(".o_catch_attention")
+                                .removeClass("o_catch_attention");
+                        },
+                        on_autosave: function() {
+                            self.$card.addClass("blocked");
+                        },
+                        on_autosaved: function() {
+                            self.$card.removeClass("blocked");
+                        },
+                    });
+                    model.updateRecordContext(self.state.id, {
+                        in_timeout: false,
+                    });
+                });
         },
 
         /**
          * @private
-         * @param {Number} amount
-         * @returns {Promise}
+         * @returns {Deferred}
          */
-        _incProductQty: function(amount) {
-            const model = this.options.basicFieldParams.model;
-            model.updateRecordContext(this.state.id, {
-                ignore_warning: this.options.ignoreWarning,
-            });
-            const record = model.get(this.state.id);
-            if (this.options.autoSave && !this.state.data.id) {
-                let lazy_qty = record.context.lazy_qty || 1;
-                lazy_qty += amount;
-                model.updateRecordContext(this.state.id, {lazy_qty: lazy_qty});
-                this._updateLazyQty();
-            } else {
-                // HACK: Modify the raw state value to show correct 'qty' when
-                // receive the response from Odoo. This happens because the widget
-                // sends a creation with qty 1 but can still add more qty mean while
-                // wait for the Odoo response.
-                const model_record_data = model.localData[this.state.id].data;
-                if (
-                    _.isNull(
-                        model_record_data[
-                            this.options.fieldMap[this.master_uom_map.field_uom_qty]
-                        ]
-                    )
-                ) {
-                    model_record_data[
-                        this.options.fieldMap[this.master_uom_map.field_uom_qty]
-                    ] = 1;
-                }
-                model_record_data[
+        _addProduct: function(amount) {
+            var self = this;
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            // Because we don't hide the 'add' button when the product is added form back form
+            // we check if the record is in "saving" mode to prevent duplicate it.
+            if (!record || record.context.saving) {
+                return $.Deferred().resolve();
+            }
+            var changes = _.pick(
+                record.data,
+                this.options.fieldMap[this.master_uom_map.field_uom_qty]
+            );
+
+            if (amount === 0) {
+                var lazy_qty = record.context.lazy_qty || 1;
+                changes[
                     this.options.fieldMap[this.master_uom_map.field_uom_qty]
-                ] += amount;
-                return model
-                    .notifyChanges(record.id, {
-                        [this.options.fieldMap[this.master_uom_map.field_uom_qty]]:
-                            model_record_data[
-                                this.options.fieldMap[this.master_uom_map.field_uom_qty]
-                            ],
-                    })
-                    .then(() => {
-                        this._processDynamicFields();
-                        this._lazyUpdateRecord();
+                ] = lazy_qty;
+            } else if (
+                changes[this.options.fieldMap[this.master_uom_map.field_uom_qty]] === 0
+            ) {
+                changes[this.options.fieldMap[this.master_uom_map.field_uom_qty]] = 1;
+            }
+            this.$card.addClass("blocked");
+            return model
+                ._applyChange(record.id, changes)
+                .then(function() {
+                    // Return self._saveRecord();
+                })
+                .then(function() {
+                    var record = model.get(self.state.id);
+                    self.trigger_up("create_quick_record", {
+                        id: record.id,
+                        on_onchange: function() {
+                            self.$card.removeClass("blocked");
+                            self.$card
+                                .find(".o_catch_attention")
+                                .removeClass("o_catch_attention");
+                        },
+                        on_autosave: function() {
+                            self.$card.addClass("blocked");
+                        },
+                        on_autosaved: function() {
+                            self.$card.removeClass("blocked");
+                        },
                     });
+                    model.updateRecordContext(self.state.id, {
+                        in_timeout: false,
+                    });
+                });
+        },
+
+        _modifyProductDelayed: function(amount, mode) {
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            if (record.context.saving) {
+                return;
+            }
+            var lazy_qty = record.context.lazy_qty || 0;
+            lazy_qty += amount;
+            model.updateRecordContext(this.state.id, {
+                lazy_qty: lazy_qty,
+                need_notify: true,
+                modified: true,
+                in_timeout: true,
+            });
+            this._processDynamicFields();
+            this._updateLazyQty();
+            if (!record.context.not_onchange) {
+                this.trigger_up("modify_quick_record", {
+                    id: this.state.id,
+                });
+                if (mode === "add") {
+                    this._lazyAddProduct(0);
+                } else if (mode === "update") {
+                    this._lazyUpdateRecord(0);
+                }
             }
         },
 
@@ -909,7 +976,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Selector/HTMLElement} target
          */
         _doInteractAnim: function(target) {
-            const $target = $(target);
+            var $target = $(target);
             $target.addClass("o_catch_attention");
         },
 
@@ -917,30 +984,44 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          */
         _openPriceModifier: function() {
-            const state_data = this.state && this.state.data;
-            if (this.options.readOnlyMode || !state_data) {
+            var state_data = this.state && this.state.data;
+            if (
+                this.options.readOnlyMode ||
+                !state_data ||
+                (this.$modifPriceModal &&
+                    (this.$modifPriceModal.data("bs.modal") || {})._isShown)
+            ) {
                 return;
             }
-
-            const modif_price_form = new ProductPickerQuickModifPriceForm(this, {
+            this.trigger_up("pause_auto_save");
+            var ModifPriceWidget = widgetRegistry.get(
+                "product_picker_quick_modif_price_form"
+            );
+            var widget = new ModifPriceWidget(this, {
                 fieldsInfo: this.fieldsInfo,
                 fields: this.fields,
                 main_state: this.getParent().state,
                 state: this.state,
                 fieldMap: this.options.fieldMap,
                 searchRecord: this.recordSearch,
+                node: this.$el,
                 readonly: this.options.readOnlyMode,
                 basicFieldParams: this.options.basicFieldParams,
+                data: this.state && this.state.data,
                 canEditPrice: this.options.editPrice,
                 canEditDiscount: this.options.editDiscount,
                 currencyField: this.options.currencyField,
             });
-            this.$modifPriceModal = $(
+
+            self.$modifPriceModal = $(
                 qweb.render("One2ManyProductPicker.QuickModifPrice.Modal")
             );
-            this.$modifPriceModal.appendTo($(".oe_one2many_product_picker_view"));
-            modif_price_form.attachTo(this.$modifPriceModal);
-            this.$modifPriceModal.modal();
+            self.$modifPriceModal.appendTo($(".oe_one2many_product_picker_view"));
+            self.$modifPriceModal.find(".icon-waiting").removeClass("d-none");
+            return widget.attachTo(self.$modifPriceModal).then(function() {
+                widget.$el.addClass("o_widget");
+                self.$modifPriceModal.modal();
+            });
         },
 
         // HANDLE EVENTS
@@ -951,27 +1032,29 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          */
         _onClickFlipCard: function(evt) {
             // Avoid clicks on form elements
-            if (["INPUT", "BUTTON", "A"].indexOf(evt.target.tagName) !== -1) {
+            if (
+                ["INPUT", "BUTTON", "A"].indexOf(evt.target.tagName) !== -1 ||
+                this.$card.hasClass("blocked")
+            ) {
                 return;
             }
-            const $target = $(evt.target);
-            if (!this.options.readOnlyMode) {
+
+            var $target = $(evt.target);
+            if (
+                !this.options.readOnlyMode &&
+                this.getParent().canBeSaved(this.state.id)
+            ) {
                 if (
                     $target.hasClass("add_product") ||
                     $target.parents(".add_product").length
                 ) {
-                    if (!this.is_adding_product) {
-                        this.is_adding_product = true;
-                        this._addProduct();
-                        this._doInteractAnim(evt.target);
-                    }
+                    this._modifyProductDelayed(1, "add");
                     return;
                 } else if (
                     $target.hasClass("product_qty") ||
                     $target.parents(".product_qty").length
                 ) {
-                    this._incProductQty(1);
-                    this._doInteractAnim(evt.target);
+                    this._modifyProductDelayed(1, "update");
                     return;
                 } else if ($target.hasClass("safezone")) {
                     // Do nothing on safe zones
@@ -979,10 +1062,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 }
             }
 
-            if (this.$card.hasClass("blocked")) {
-                return;
-            }
-
+            this.trigger_up("pause_auto_save");
             if (!this._clickFlipCardDelayed) {
                 this._clickFlipCardDelayed = setTimeout(
                     this._onClickDelayedFlipCard.bind(this, evt),
@@ -990,7 +1070,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 );
             }
             ++this._clickFlipCardCount;
-            if (this._clickFlipCardCount >= 2) {
+            if (this._clickFlipCardCount === 2) {
                 clearTimeout(this._clickFlipCardDelayed);
                 this._clickFlipCardDelayed = false;
                 this._clickFlipCardCount = 0;
@@ -1002,33 +1082,37 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          */
         _onClickDelayedFlipCard: function() {
+            var self = this;
             this._clickFlipCardDelayed = false;
             this._clickFlipCardCount = 0;
 
-            if (this.options.readOnlyMode || !this.state) {
+            if (this.options.readOnlyMode || !this.state || !this.getParent()) {
                 return;
             }
             if (this.$card.hasClass("active")) {
                 this.$card.removeClass("active");
                 this.$front.removeClass("d-none");
+                this.trigger_up("resume_auto_save");
             } else {
+                this.trigger_up("pause_auto_save");
                 this.defs = [];
                 if (!this.widgets.back.length) {
+                    this.$back.find(".icon-waiting").removeClass("d-none");
                     this._processWidgetFields(this.$back);
                     this._processWidgets(this.$back, "back");
                 }
                 this._processDynamicFields();
-                $.when(this.defs).then(() => {
-                    const $actived_card = this.$el.parent().find(".active");
+                $.when(this.defs).then(function() {
+                    var $actived_card = self.$el.parent().find(".active");
                     $actived_card.removeClass("active");
                     $actived_card.find(".oe_flip_card_front").removeClass("d-none");
-                    this.$card.addClass("active");
-                    this.$card.on("transitionend", () => {
-                        this.$front.addClass("d-none");
-                        this.$card.off("transitionend");
+                    self.$card.addClass("active");
+                    self.$card.on("transitionend", function() {
+                        self.$front.addClass("d-none");
+                        self.$card.off("transitionend");
                     });
-                    this.trigger_up("record_flip", {
-                        widget_index: this.$el.data("renderer_widget_index"),
+                    self.trigger_up("record_flip", {
+                        widget_index: self.$el.data("renderer_widget_index"),
                         prev_widget_index: $actived_card
                             .parent()
                             .data("renderer_widget_index"),
@@ -1042,16 +1126,16 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {MouseEvent} evt
          */
         _onDblClickDelayedFlipCard: function(evt) {
-            const $target = $(evt.target);
+            var $target = $(evt.target);
             if (
                 $target.hasClass("badge_price") ||
                 $target.parents(".badge_price").length
             ) {
                 this._openPriceModifier();
             } else {
-                const $currentTarget = $(evt.currentTarget);
-                const $img = $currentTarget.find(".oe_flip_card_front img");
-                const cur_img_src = $img.attr("src");
+                var $currentTarget = $(evt.currentTarget);
+                var $img = $currentTarget.find(".oe_flip_card_front img");
+                var cur_img_src = $img.attr("src");
                 if ($currentTarget.hasClass("oe_flip_card_maximized")) {
                     $currentTarget.removeClass("oe_flip_card_maximized");
                     $currentTarget.on("transitionend", function() {
@@ -1066,12 +1150,12 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                         $currentTarget.off("transitionend");
                     });
                 } else {
-                    const $actived_card = this.$el.parent().find(".active");
+                    var $actived_card = this.$el.parent().find(".active");
                     if ($actived_card[0] !== $currentTarget[0]) {
                         $actived_card.removeClass("active");
                         $actived_card.find(".oe_flip_card_front").removeClass("d-none");
                     }
-                    const offset = $currentTarget.offset();
+                    var offset = $currentTarget.offset();
                     $currentTarget.css({
                         position: "fixed",
                         top: offset.top,
@@ -1089,19 +1173,28 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             }
         },
 
+        /**
+         * @private
+         * @param {CustomEvent} evt
+         */
+        _onBlockCard: function(evt) {
+            this.$card.toggleClass("blocked", evt.data.status);
+        },
+
         /**
          * @private
          * @param {CustomEvent} evt
          */
         _onRestoreFlipCard: function(evt) {
+            var self = this;
             this.$card.removeClass("active");
             this.$front.removeClass("d-none");
-            const $img = this.$front.find("img");
-            const cur_img_src = $img.attr("src");
+            var $img = this.$front.find("img");
+            var cur_img_src = $img.attr("src");
             if (this.$card.hasClass("oe_flip_card_maximized")) {
                 this.$card.removeClass("oe_flip_card_maximized");
-                this.$card.on("transitionend", () => {
-                    this.$card.css({
+                this.$card.on("transitionend", function() {
+                    self.$card.css({
                         position: "",
                         top: "",
                         left: "",
@@ -1109,41 +1202,40 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                         height: "",
                         zIndex: "",
                     });
-                    this.$card.off("transitionend");
+                    self.$card.off("transitionend");
                     if (evt.data.success_callback) {
                         evt.data.success_callback();
                     }
+                    self.trigger_up("resume_auto_save");
                 });
             } else if (evt.data.success_callback) {
                 evt.data.success_callback();
-            }
-
-            if (evt.data.block) {
-                this.$card.addClass("blocked");
+                this.trigger_up("resume_auto_save");
+            } else {
+                this.trigger_up("resume_auto_save");
             }
             $img.attr("src", $img.data("srcAlt"));
             $img.data("srcAlt", cur_img_src);
         },
 
         /**
-         * Update the selected element using the given format.
-         * A non-field element has defined the "data-field" paramenter with
-         * the field that trigger the update. Also this non-field element has
-         * the attribute "format" to use with "py.eval".
-         * Note that the context used in py.eval has all record fields data.
-         *
-         * Exmaple:
-         * <span data-field="qty" data-esc="str(qty) + ' Items'"/>
-         * ** This will change the elements when 'qty' changes and prints the
-         * text: 20 Items
-         *
+         * When the record was modified by the "card form"
          * @private
          * @param {CustomEvent} evt
          */
         _onQuickRecordUpdated: function(evt) {
             this._processDynamicFields(Object.keys(evt.data.changes));
-            // This.recreate();
             this.trigger_up("update_subtotal");
+
+            if (evt.data.highlight) {
+                this.highlight(
+                    evt.data.highlight === true ? undefined : evt.data.highlight
+                );
+            }
+        },
+
+        _onBackFormLoaded: function() {
+            this.$back.find(".icon-waiting").addClass("d-none");
         },
     });
 
diff --git a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js
index c50076b54..6d18165bb 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js
@@ -5,15 +5,14 @@ odoo.define(
     function(require) {
         "use strict";
 
-        const core = require("web.core");
-        const BasicRenderer = require("web.BasicRenderer");
-        const One2ManyProductPickerRecord = require("web_widget_one2many_product_picker.One2ManyProductPickerRecord");
-        const ProductPickerQuickCreateForm = require("web_widget_one2many_product_picker.ProductPickerQuickCreateForm");
+        var core = require("web.core");
+        var BasicRenderer = require("web.BasicRenderer");
+        var One2ManyProductPickerRecord = require("web_widget_one2many_product_picker.One2ManyProductPickerRecord");
 
-        const qweb = core.qweb;
+        var qweb = core.qweb;
 
         /* This is the renderer of the main widget */
-        const One2ManyProductPickerRenderer = BasicRenderer.extend({
+        var One2ManyProductPickerRenderer = BasicRenderer.extend({
             className: "oe_one2many_product_picker_view",
 
             events: {
@@ -23,8 +22,7 @@ odoo.define(
                 record_flip: "_onRecordFlip",
             },
 
-            DELAY_GET_RECORDS: 150,
-            MIN_PERC_GET_RECORDS: 0.9,
+            _instant_search_onchange_delay: 250,
 
             /**
              * @override
@@ -59,15 +57,6 @@ odoo.define(
                 _.invoke(_.compact(this.widgets), "on_detach_callback");
             },
 
-            /**
-             * @param {Object} widget
-             */
-            removeWidget: function(widget) {
-                const index = this.widgets.indexOf(widget);
-                widget.destroy();
-                delete this.widgets[index];
-            },
-
             /**
              * @override
              */
@@ -95,18 +84,33 @@ odoo.define(
              * @override
              */
             updateState: function(state, params) {
-                const force_update = params.force;
+                var self = this;
+                var force_update = params.force;
                 delete params.force;
-                const sparams = _.extend({}, params, {noRender: true});
+                var sparams = _.extend({}, params, {noRender: true});
                 if (!force_update && _.isEqual(this.state.data, state.data)) {
                     return this._super(state, sparams);
                 }
-                const old_state = _.clone(this.state.data);
-                return this._super(state, sparams).then(() => {
-                    this._updateStateRecords(old_state);
+                var old_state = _.clone(this.state.data);
+                return this._super(state, sparams).then(function() {
+                    self._updateStateRecords(old_state);
                 });
             },
 
+            canBeUpdated: function() {
+                var model = this.getParent().getBasicFieldParams().model;
+                for (var widget of this.widgets) {
+                    if (!widget.state) {
+                        return false;
+                    }
+                    var record = model.localData[widget.state.id];
+                    if (record.context.in_timeout) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+
             /**
              * Because this widget doesn't support comments/sections line types
              * we need check if the line is valid to be shown.
@@ -117,53 +121,41 @@ odoo.define(
              */
             _isValidLineState: function(state) {
                 return (
+                    state &&
                     state.data[this.options.field_map.product] &&
+                    state.data[this.options.field_map.product].data &&
+                    typeof state.data[this.options.field_map.product].data.id !==
+                        "undefined"
+                );
+            },
+
+            getProductIdFromState: function(state) {
+                return (
+                    state &&
+                    state.data[this.options.field_map.product] &&
+                    state.data[this.options.field_map.product].data &&
                     state.data[this.options.field_map.product].data.id
                 );
             },
 
-            /**
-             * @private
-             * @param {Object} state_a
-             * @param {Object} state_b
-             * @returns {Boolean}
-             */
-            _isEqualState: function(state_a, state_b) {
-                if (state_a.id === state_b.id) {
-                    return true;
-                }
-                const product_id_a =
-                    state_a.data[this.options.field_map.product].data.id;
-                const product_uom_id_a =
-                    state_a.data[this.options.field_map.product_uom].data.id;
-                const product_id_b =
-                    state_b.data[this.options.field_map.product].data.id;
-                const product_uom_id_b =
-                    state_b.data[this.options.field_map.product_uom].data.id;
-
-                return (
-                    product_id_a === product_id_b &&
-                    product_uom_id_a === product_uom_id_b
-                );
+            getWidgetsByProduct: function(product_id) {
+                var self = this;
+                return _.filter(this.widgets, function(item) {
+                    return (
+                        self.getProductIdFromState(item.state) === product_id ||
+                        item.recordSearch.id === product_id
+                    );
+                });
             },
 
-            /**
-             * @private
-             * @param {Object} state
-             * @returns {Boolean}
-             */
-            _existsWidgetWithState: function(state) {
-                for (let eb = this.widgets.length - 1; eb >= 0; --eb) {
-                    const widget = this.widgets[eb];
-                    if (
-                        widget &&
-                        widget.state &&
-                        this._isEqualState(widget.state, state)
-                    ) {
-                        return true;
-                    }
-                }
-                return false;
+            getWidgetsWithoutOnchange: function() {
+                var model = this.getParent().getBasicFieldParams().model;
+                return _.filter(this.widgets, function(item) {
+                    return (
+                        model.localData[item.state.id] &&
+                        model.localData[item.state.id].context.not_onchange
+                    );
+                });
             },
 
             /**
@@ -175,58 +167,62 @@ odoo.define(
              * @param {Array} states
              * @returns {Array}
              */
-            _processStatesToDestroy: function(states) {
-                // Get widgets to destroy
-                // Update states only affect to "non pure virtual" records
-                const to_destroy = [];
-                const to_add = [];
-                for (const state of states) {
-                    for (let e = this.widgets.length - 1; e >= 0; --e) {
-                        const widget = this.widgets[e];
-                        if (widget && this._isEqualState(widget.state, state)) {
-                            // If already exists a widget for the product don't try create a new one
-                            let recreated = false;
-                            if (!this._existsWidgetWithState(widget.state)) {
-                                // Get the new state ID if exists to link it with the new record
-                                // This happens when remove a record that have a new state info
-                                for (
-                                    let eb = this.state.data.length - 1;
-                                    eb >= 0;
-                                    --eb
-                                ) {
-                                    const state = this.state.data[eb];
-                                    if (!this._isValidLineState(state)) {
-                                        continue;
-                                    }
-                                    if (this._isEqualState(state, widget.state)) {
-                                        widget.recreate(state);
-                                        recreated = true;
-                                        break;
-                                    }
-                                }
-                            }
-                            if (!recreated) {
-                                widget.markToDestroy();
-                                to_destroy.push(widget);
-                                const search_record = _.omit(
-                                    widget.recordSearch,
-                                    "__id"
-                                );
+            _processStatesToDestroy: function(old_states) {
+                var self = this;
+                // States to remove
+                // In 12.0, Odoo generates new ids for the states, so
+                // all states will be removed and restored because it's
+                // not possible identify a record without this id
+                var to_destroy_ids = [];
+                for (var index in old_states) {
+                    var old_state = old_states[index];
+                    if (!this._isValidLineState(old_state)) {
+                        continue;
+                    }
+                    var in_current_state = _.some(this.state.data, function(state) {
+                        return (
+                            self._isValidLineState(state) && state.id === old_state.id
+                        );
+                    });
+                    if (!in_current_state) {
+                        to_destroy_ids.push(old_state.id);
+                    }
+                }
 
-                                to_add.push([
-                                    [search_record],
-                                    {
-                                        no_attach_widgets: false,
-                                        no_process_records: false,
-                                        position: widget.state.id,
-                                    },
-                                ]);
-                            }
+                var model = this.getParent().getBasicFieldParams().model;
+                var to_destroy = [];
+                for (var widget of this.widgets) {
+                    if (!widget) {
+                        continue;
+                    }
+
+                    // Verify that doesn't exists any dead widget
+                    // This is necessary beceause auto-save uses
+                    // ADD + SAVE that generates two different
+                    // state ids
+                    var state_has_onchange =
+                        widget.state && !widget.state.context.not_onchange;
+                    var state_has_modified =
+                        widget.state && !widget.state.context.modified;
+                    if (
+                        !state_has_modified &&
+                        state_has_onchange &&
+                        !model.isPureVirtual(widget.state.id)
+                    ) {
+                        to_destroy.push(widget);
+                        continue;
+                    }
+
+                    for (var index_destroy in to_destroy_ids) {
+                        const state_id = to_destroy_ids[index_destroy];
+                        if (widget.state.id === state_id) {
+                            to_destroy.push(widget);
+                            break;
                         }
                     }
                 }
 
-                return [to_destroy, to_add];
+                return to_destroy;
             },
 
             /**
@@ -236,67 +232,71 @@ odoo.define(
              * @private
              * @returns {Array}
              */
-            _processCurrentStates: function() {
+            _processCurrentStates: function(old_states) {
+                var to_destroy = this._processStatesToDestroy(old_states);
                 // Records to Update or Create
-                const model = this.getParent().getBasicFieldParams().model;
-                const to_destroy = [];
-                const to_add = [];
-                for (const index in this.state.data) {
-                    const state = this.state.data[index];
+                var model = this.getParent().getBasicFieldParams().model;
+                var to_add = [];
+                for (var index in this.state.data) {
+                    var state = this.state.data[index];
                     if (!this._isValidLineState(state)) {
                         continue;
                     }
-                    let exists = false;
-                    let search_record_index = false;
-                    let search_record = false;
-                    for (let e = this.widgets.length - 1; e >= 0; --e) {
-                        const widget = this.widgets[e];
-                        if (!widget || !widget.state) {
+                    var exists = false;
+                    var search_record_index = false;
+                    var search_record = false;
+                    for (var widget of this.widgets) {
+                        if (!widget) {
                             // Already processed widget (deleted)
                             continue;
                         }
 
-                        const is_equal_state = this._isEqualState(widget.state, state);
-                        if (widget.isMarkedToDestroy()) {
-                            exists = true;
-                        } else if (is_equal_state) {
-                            const record = model.get(widget.state.id);
-                            model.updateRecordContext(state.id, {
-                                lazy_qty: record.context.lazy_qty || 0,
-                            });
+                        var record = model.get(widget.state.id);
+                        // Re-use widgets is possible
+                        var is_to_destroy = _.findIndex(to_destroy, widget) >= 0;
+                        var is_widget_usable =
+                            widget.state.id === state.id ||
+                            widget.recordSearch.id ===
+                                state.data[this.options.field_map.product].data.id;
+                        if (is_widget_usable) {
+                            if (is_to_destroy) {
+                                to_destroy = _.without(to_destroy, widget);
+                            }
+                            if (record) {
+                                model.updateRecordContext(state.id, {
+                                    lazy_qty: record.context.lazy_qty || 0,
+                                    saving: record.context.saving || false,
+                                    need_notify: record.context.need_notify || false,
+                                    need_save: record.context.need_save || false,
+                                });
+                            }
+                            // Ensure use the updated state
                             widget.recreate(state);
                             exists = true;
                             break;
-                        }
-                        if (
-                            !is_equal_state &&
+                        } else if (
+                            widget.state &&
+                            !model.isPureVirtual(widget.state.id) &&
                             widget.recordSearch.id ===
                                 state.data[this.options.field_map.product].data.id
                         ) {
-                            // Is a new record (can be other record for the same 'search record' or a replacement for a pure virtual)
-                            search_record_index = widget.state.id;
                             search_record = widget.recordSearch;
-                            const record = model.get(widget.state.id);
-                            model.updateRecordContext(state.id, {
-                                lazy_qty: record.context.lazy_qty || 0,
-                            });
-                        }
-
-                        // Remove "pure virtual" records that have the same product that the new record
-                        if (
-                            widget.is_virtual &&
-                            this._isEqualState(widget.state, state)
-                        ) {
-                            to_destroy.push(widget);
-                            delete this.widgets[e];
+                            const in_search_records = _.some(
+                                this.search_records,
+                                function(item) {
+                                    return item.id === search_record.id;
+                                }
+                            );
+                            if (in_search_records) {
+                                // Is a new record (can be other record for the same 'search record')
+                                search_record_index = widget.state.id;
+                            }
                         }
                     }
 
-                    this.state.data = _.compact(this.state.data);
-
                     // Add to create the new record
                     if (!exists && search_record_index) {
-                        const new_search_record = _.extend({}, search_record, {
+                        var new_search_record = _.extend({}, search_record, {
                             __id: state.id,
                         });
                         to_add.push([
@@ -309,68 +309,121 @@ odoo.define(
                         ]);
                     }
                 }
+                return [to_add.reverse(), to_destroy];
+            },
 
-                return [to_destroy, to_add];
+            /**
+             * This method checks and appends the missing
+             * 'pure virtual' records
+             *
+             * @returns {Deferred}
+             */
+            checkVirtualRecords: function() {
+                if (this.search_group.name === "main_lines") {
+                    return $.when();
+                }
+                var tasks = [];
+                var to_add = this._processVirtualRecords();
+                for (var params of to_add) {
+                    tasks.push(this.appendSearchRecords.apply(this, params)[0]);
+                }
+                return $.when(tasks);
+            },
+
+            /**
+             * This method checks the current widgets to generate the
+             * missing 'pure virtual' record objects.
+             *
+             * @returns {Array}
+             */
+            _processVirtualRecords: function() {
+                var model = this.getParent().getBasicFieldParams().model;
+                var products_done = [];
+                var to_add = [];
+                for (var search_record of this.search_records) {
+                    var widgets = this.getWidgetsByProduct(search_record.id);
+                    if (_.isEmpty(widgets)) {
+                        to_add.push([
+                            [_.omit(search_record, "__id")],
+                            {
+                                no_attach_widgets: true,
+                                no_process_records: true,
+                            },
+                        ]);
+                        continue;
+                    }
+
+                    // Only add 'pure virtual' records if don't have a line
+                    var existing_widgets = _.filter(widgets, function(widget) {
+                        return !widget.isMarkedToDestroy();
+                    });
+                    var need_virtual = !_.some(existing_widgets, function(widget) {
+                        return widget.state && !model.isPureVirtual(widget.state.id);
+                    });
+                    if (
+                        need_virtual &&
+                        products_done.indexOf(search_record.id) === -1
+                    ) {
+                        var has_virtual = _.some(existing_widgets, function(widget) {
+                            return (
+                                !widget.state ||
+                                (widget.state && model.isPureVirtual(widget.state.id))
+                            );
+                        });
+                        if (!has_virtual) {
+                            var search_record_index = _.max(widgets, function(widget) {
+                                return widget.$el.index();
+                            }).state.id;
+                            to_add.push([
+                                [_.omit(search_record, "__id")],
+                                {
+                                    no_attach_widgets: true,
+                                    no_process_records: true,
+                                    position: search_record_index,
+                                },
+                            ]);
+                            products_done.push(search_record.id);
+                        }
+                    }
+                }
+                return to_add;
             },
 
             /**
              * When the state change this method tries to update current records, delete
              * or update them.
              * Thanks to this we don't need re-render 'pure virtual' records.
+             * NOTE: The first load of the records don't trigger this method.
              *
              * @private
              * @param {Object} old_states
              * @returns {Deferred}
              */
             _updateStateRecords: function(old_states) {
-                // States to remove
-                const states_to_destroy = [];
-                for (const index in old_states) {
-                    const old_state = old_states[index];
-                    if (!this._isValidLineState(old_state)) {
-                        continue;
-                    }
-                    let found = false;
-                    for (const e in this.state.data) {
-                        const current_state = this.state.data[e];
-                        if (!this._isValidLineState(current_state)) {
-                            continue;
-                        }
-                        if (this._isEqualState(current_state, old_state)) {
-                            found = true;
-                            break;
-                        }
-                    }
-                    if (!found) {
-                        states_to_destroy.push(old_state);
-                    }
-                }
-
-                const def = $.Deferred();
-                this.state.data = _.compact(this.state.data);
-                const [to_destroy_old, to_add_virtual] = this._processStatesToDestroy(
-                    states_to_destroy
-                );
-
-                const [
-                    destroyed_current,
-                    to_add_current,
-                ] = this._processCurrentStates();
-
-                const currentTasks = [];
-                const to_add = [].concat(to_add_current, to_add_virtual);
-                for (const params of to_add) {
+                var self = this;
+                var record_defs = this._processCurrentStates(old_states);
+                var to_add_current = record_defs[0];
+                var to_destroy = record_defs[1];
+                _.invoke(to_destroy, "markToDestroy");
+                var currentTasks = [];
+                for (var params of to_add_current) {
                     currentTasks.push(this.appendSearchRecords.apply(this, params)[0]);
                 }
 
-                Promise.all(currentTasks).then(() => {
-                    _.invoke(to_destroy_old, "destroy");
-                    _.invoke(destroyed_current, "destroy");
-                    this.widgets = _.difference(this.widgets, to_destroy_old);
-                    def.resolve();
-                });
-
-                return def;
+                return $.when(currentTasks)
+                    .then(function() {
+                        return self.checkVirtualRecords();
+                    })
+                    .then(function() {
+                        var widgets_to_destroy = _.filter(self.widgets, function(
+                            widget
+                        ) {
+                            return widget.isMarkedToDestroy();
+                        });
+                        self.widgets = _.difference(self.widgets, widgets_to_destroy);
+                        _.invoke(widgets_to_destroy, "destroy");
+                        return true;
+                    });
             },
 
             clearRecords: function() {
@@ -413,12 +466,12 @@ odoo.define(
              */
             _sort_search_data: function(datas) {
                 if (this.search_group.name === "main_lines") {
-                    const field_name = this.options.field_map.product;
-                    for (const index_datas in datas) {
-                        const data = datas[index_datas];
+                    var field_name = this.options.field_map.product;
+                    for (var index_datas in datas) {
+                        var data = datas[index_datas];
 
-                        for (const index_state in this.state.data) {
-                            const state_data = this.state.data[index_state];
+                        for (var index_state in this.state.data) {
+                            var state_data = this.state.data[index_state];
                             if (
                                 this._isValidLineState(state_data) &&
                                 state_data.data[field_name].res_id === data.id
@@ -427,9 +480,11 @@ odoo.define(
                             }
                         }
                     }
-                    const sorted_datas = _.chain(datas)
+                    var sorted_datas = _.chain(datas)
                         .sortBy("_order_value")
-                        .map(item => _.omit(item, "_order_value"))
+                        .map(function(item) {
+                            return _.omit(item, "_order_value");
+                        })
                         .value()
                         .reverse();
                     return sorted_datas;
@@ -446,9 +501,10 @@ odoo.define(
              * @returns {Array}
              */
             _processSearchRecords: function(results) {
-                const field_name = this.options.field_map.product;
-                const records = [];
-                const states = [];
+                var model = this.getParent().getBasicFieldParams().model;
+                var field_name = this.options.field_map.product;
+                var records = [];
+                var states = [];
 
                 var test_values = function(field_value, record_search) {
                     return (
@@ -458,59 +514,62 @@ odoo.define(
                     );
                 };
 
-                for (const index in results) {
-                    const record_search = results[index];
-                    let state_data_found = false;
+                for (var index in results) {
+                    var record_search = results[index];
 
-                    // Analyze 'pure virtual' records
-                    // Pure virtual records aren't linked with field list
-                    // so we need search them linked in the widgets.
-                    for (const index_widget in this.widgets) {
-                        const widget = this.widgets[index_widget];
-                        if (widget.isMarkedToDestroy()) {
-                            continue;
-                        }
+                    var widget_created = false;
+
+                    for (var index_data in this.state.data) {
+                        var state_record = this.state.data[index_data];
+                        var field_value = state_record.data[field_name];
                         if (
-                            record_search.__id === widget.state.id ||
-                            (!record_search.__id &&
-                                widget.recordSearch.id === record_search.id)
+                            !this._isValidLineState(state_record) ||
+                            !test_values(field_value, record_search)
                         ) {
-                            state_data_found = true;
-                            if (widget.state) {
-                                states.push(widget.state);
-                            }
-                            break;
-                        }
-                    }
-
-                    // If already exists a widget with the search result
-                    // avoid create a new one
-                    if (state_data_found) {
-                        continue;
-                    }
-
-                    // Analyze field records
-                    // If not found any widget we need create a new one
-                    // linked with the state record
-                    for (const index_data in this.state.data) {
-                        const state_record = this.state.data[index_data];
-                        if (!this._isValidLineState(state_record)) {
                             continue;
                         }
-                        const field_value = state_record.data[field_name];
-                        if (test_values(field_value, record_search)) {
+                        widget_created = true;
+                        // At this point the result has a state (line)
+                        // Search if already exists a widget using the state
+                        var widget = _.find(this.widgets, function(widget) {
+                            return (
+                                !widget.isMarkedToDestroy() &&
+                                widget.state &&
+                                widget.state.id === state_record.id
+                            );
+                        });
+                        if (widget) {
+                            // Don't need create a new widget (record)
+                            states.push(widget.state);
+                        } else {
+                            // Need create a new widget linked with the state
                             records.push(
                                 _.extend({}, record_search, {
                                     __id: state_record.id,
                                 })
                             );
                             states.push(state_record);
-                            state_data_found = true;
                         }
                     }
+                    if (widget_created) {
+                        continue;
+                    }
 
-                    if (!state_data_found) {
-                        records.push(record_search);
+                    var widgets = this.getWidgetsByProduct(record_search.id);
+                    // Only can exists 'pure virtual' if no 'lines' assigned
+                    if (_.isEmpty(widgets)) {
+                        var has_virtual = _.some(widgets, function(widget) {
+                            return (
+                                !widget.isMarkedToDestroy() &&
+                                (!widget.state ||
+                                    (widget.state &&
+                                        model.isPureVirtual(widget.state.id)))
+                            );
+                        });
+                        if (!has_virtual) {
+                            // The result need a 'pure virtual' record
+                            records.push(_.omit(record_search, "__id"));
+                        }
                     }
                 }
 
@@ -526,8 +585,8 @@ odoo.define(
              * @returns {Object}
              */
             _getRecordDataById: function(id) {
-                for (const index in this.state.data) {
-                    const record = this.state.data[index];
+                for (var index in this.state.data) {
+                    var record = this.state.data[index];
                     if (record.id === id) {
                         return record;
                     }
@@ -561,73 +620,55 @@ odoo.define(
              * @private
              * @param {Array} search_records
              * @param {Object} options
+             * @returns {Array}
              */
             _appendSearchRecords: function(search_records, options) {
-                const processed_info = options.no_process_records
-                    ? search_records
-                    : this._processSearchRecords(search_records);
-                const records_to_add = processed_info.records || search_records;
-                _.each(records_to_add, search_record => {
-                    const state_data = this._getRecordDataById(search_record.__id);
-                    const widget_options = this._getRecordOptions(search_record);
-                    widget_options.renderer_widget_index = this.widgets.length;
-                    const ProductPickerRecord = new One2ManyProductPickerRecord(
-                        this,
+                var self = this;
+                var processed_info =
+                    !options.no_process_records &&
+                    this._processSearchRecords(search_records);
+                var records_to_add =
+                    (processed_info && processed_info.records) || search_records;
+                _.each(records_to_add, function(search_record) {
+                    // Get record state (if can)
+                    var state_data = self._getRecordDataById(search_record.__id);
+                    var widget_options = self._getRecordOptions(search_record);
+                    widget_options.renderer_widget_index = self.widgets.length;
+                    var ProductPickerRecord = new One2ManyProductPickerRecord(
+                        self,
                         state_data,
                         widget_options
                     );
-                    this.widgets.push(ProductPickerRecord);
+                    self.widgets.push(ProductPickerRecord);
 
                     // Simulate new lines to dispatch get_default & onchange's to get the
                     // relevant data to print. This case increase the TTI time.
                     if (!state_data) {
-                        const defVirtualState = ProductPickerRecord.generateVirtualState(
-                            this.options.instant_search
-                        );
-                        this.defsVirtualState.push(defVirtualState);
+                        var defVirtualState = ProductPickerRecord.generateVirtualState({
+                            onchange_delay: self.options.instant_search
+                                ? self._instant_search_onchange_delay
+                                : 0,
+                        });
+                        self.defsVirtualState.push(defVirtualState);
                     }
 
                     // At this point the widget will use the existing state (line) or
                     // a simple state data. Using simple state data instead of waiting for
                     // complete state (default + onchange) gives a low FCP time.
-                    const def = $.Deferred();
-                    ProductPickerRecord.appendTo(this.$recordsContainer).then(
+                    var def = ProductPickerRecord.appendTo(self.$recordsContainer).then(
                         function(widget, widget_position) {
                             if (typeof widget_position !== "undefined") {
-                                const $elm = this.$el.find(
+                                var $elm = self.$el.find(
                                     `[data-card-id="${widget_position}"]:first`
                                 );
-                                widget.$el.insertBefore($elm);
+                                widget.$el.insertAfter($elm);
                             }
-                            def.resolve();
-                        }.bind(this, ProductPickerRecord, options.position)
+                        }.bind(self, ProductPickerRecord, options.position)
                     );
-                    this.defs.push(def);
+                    self.defs.push(def);
                 });
-                // Destroy unused
-                if (options.cleanup) {
-                    const num_widgets = this.widgets.length;
-                    for (
-                        let index_widget = num_widgets - 1;
-                        index_widget >= 0;
-                        --index_widget
-                    ) {
-                        const widget = this.widgets[index_widget];
-                        let found_state = false;
-                        for (const state of processed_info.states) {
-                            if (widget.state && widget.state.id === state.id) {
-                                found_state = true;
-                                break;
-                            }
-                        }
-                        if (!found_state && widget.state) {
-                            widget.destroy();
-                            delete this.widgets[index_widget];
-                        }
-                    }
-                    // Clean widget array
-                    this.widgets = _.compact(this.widgets);
-                }
+
+                return records_to_add;
             },
 
             /**
@@ -645,25 +686,80 @@ odoo.define(
              * @returns {Array}
              */
             appendSearchRecords: function(search_records, options = {}) {
+                var self = this;
+                if (options.clear) {
+                    this.clearRecords();
+                }
                 this.trigger_up("loading_records");
                 this.defs = [];
                 this.defsVirtualState = [];
-                const cur_widget_index = this.widgets.length;
+                var cur_widget_index = this.widgets.length;
                 this._appendSearchRecords(search_records, options);
 
-                const defs = this.defs;
+                var defs = this.defs;
                 delete this.defs;
-                const defsVirtualState = this.defsVirtualState;
+                var defsVirtualState = this.defsVirtualState;
                 delete this.defsVirtualState;
                 return [
-                    Promise.all(defs).then(() => {
-                        if (!options.no_attach_widgets && this._isInDom) {
-                            const new_widgets = this.widgets.slice(cur_widget_index);
+                    $.when(defs).then(function() {
+                        if (!options.no_attach_widgets && self._isInDom) {
+                            var new_widgets = self.widgets.slice(cur_widget_index);
                             _.invoke(new_widgets, "on_attach_callback");
                         }
+                        // Destroy unused
+                        if (options.cleanup) {
+                            self.search_records = _.compact(search_records);
+                            var widgets_to_destroy = _.filter(self.widgets, function(
+                                widget
+                            ) {
+                                return (
+                                    widget.isMarkedToDestroy() ||
+                                    !_.some(self.search_records, function(
+                                        search_record
+                                    ) {
+                                        return (
+                                            search_record.id ===
+                                                widget.recordSearch.id &&
+                                            !_.some(self.widgets, function(
+                                                comp_widget
+                                            ) {
+                                                return (
+                                                    comp_widget !== widget &&
+                                                    comp_widget.state &&
+                                                    comp_widget.recordSearch.id ===
+                                                        widget.recordSearch.id
+                                                );
+                                            })
+                                        );
+                                    })
+                                );
+                            });
+                            _.invoke(widgets_to_destroy, "destroy");
+                            self.widgets = _.difference(
+                                self.widgets,
+                                widgets_to_destroy
+                            );
+                        } else {
+                            self.search_records = self.search_records || [];
+                            for (var search_record of search_records) {
+                                var has_search_record = _.some(
+                                    self.search_records,
+                                    function(item) {
+                                        return (
+                                            item.id === search_record.id &&
+                                            item.__id === search_record.__id
+                                        );
+                                    }
+                                );
+                                if (!has_search_record) {
+                                    self.search_records.push(search_record);
+                                }
+                            }
+                        }
+                        return true;
                     }),
-                    Promise.all(defsVirtualState).then(() => {
-                        this.trigger_up("loading_records", {finished: true});
+                    $.when(defsVirtualState).then(function() {
+                        self.trigger_up("loading_records", {finished: true});
                     }),
                 ];
             },
@@ -682,8 +778,8 @@ odoo.define(
              * @param {Integer} index
              */
             doWidgetFlip: function(index) {
-                const widget = this.widgets[index];
-                const $actived_card = this.$el.find(".active");
+                var widget = this.widgets[index];
+                var $actived_card = this.$el.find(".active");
                 if (widget.$card.hasClass("active")) {
                     widget.$card.removeClass("active");
                     widget.$card.find(".oe_flip_card_front").removeClass("d-none");
@@ -692,11 +788,11 @@ odoo.define(
                     widget._processWidgetFields(widget.$back);
                     widget._processWidgets(widget.$back);
                     widget._processDynamicFields();
-                    $.when(widget.defs).then(() => {
+                    $.when(widget.defs).then(function() {
                         $actived_card.removeClass("active");
                         $actived_card.find(".oe_flip_card_front").removeClass("d-none");
                         widget.$card.addClass("active");
-                        setTimeout(() => {
+                        setTimeout(function() {
                             widget.$(".oe_flip_card_front").addClass("d-none");
                         }, 200);
                     });
@@ -711,17 +807,25 @@ odoo.define(
              * @param {CustomEvent} evt
              */
             _onRecordFlip: function(evt) {
-                const prev_widget_index = evt.data.prev_widget_index;
-                if (typeof prev_widget_index !== "undefined") {
+                var prev_widget_index = evt.data.prev_widget_index;
+                if (
+                    typeof prev_widget_index !== "undefined" &&
+                    this.widgets[prev_widget_index]
+                ) {
                     // Only check 'back' widgets so there is where the form was created
-                    for (const index in this.widgets[prev_widget_index].widgets.back) {
-                        const widget = this.widgets[prev_widget_index].widgets.back[
+                    for (var index in this.widgets[prev_widget_index].widgets.back) {
+                        var widget = this.widgets[prev_widget_index].widgets.back[
                             index
                         ];
-                        if (widget instanceof ProductPickerQuickCreateForm) {
+                        if (
+                            widget.controller &&
+                            widget.className ===
+                                "oe_one2many_product_picker_quick_create"
+                        ) {
                             widget.controller.auto();
                         }
                     }
+                    this.widgets[prev_widget_index].recreate();
                 }
             },
         });
diff --git a/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js b/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js
deleted file mode 100644
index 7c13bede5..000000000
--- a/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright 2021 Tecnativa - Alexandre Díaz
-// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
-odoo.define("web_widget_one2many_product_picker.BasicController", function(require) {
-    "use strict";
-
-    const BasicController = require("web.BasicController");
-
-    BasicController.include({
-        /**
-         * This is necessary to refresh 'one2many_product_picker' when some 'trigger_refresh_fields' fields changes.
-         *
-         * @override
-         */
-        _confirmChange: function(id, fields, e) {
-            id = id || this.handle;
-            return this._super.apply(this, arguments).then(() => {
-                if (this.renderer && !_.isEmpty(this.renderer.allFieldWidgets)) {
-                    const product_picker_widgets = _.filter(
-                        this.renderer.allFieldWidgets[id],
-                        item => item.attrs.widget === "one2many_product_picker"
-                    );
-                    _.invoke(
-                        product_picker_widgets,
-                        "onDocumentConfirmChanges",
-                        fields,
-                        e
-                    );
-                }
-            });
-        },
-    });
-});
diff --git a/web_widget_one2many_product_picker/static/src/js/views/basic_model.js b/web_widget_one2many_product_picker/static/src/js/views/basic_model.js
index e027c3b70..d1e33c810 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/basic_model.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/basic_model.js
@@ -3,7 +3,8 @@
 odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
     "use strict";
 
-    const BasicModel = require("web.BasicModel");
+    var BasicModel = require("web.BasicModel");
+    var FieldOne2ManyProductPicker = require("web_widget_one2many_product_picker.FieldOne2ManyProductPicker");
 
     BasicModel.include({
         /**
@@ -36,12 +37,21 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
             );
         },
 
+        /**
+         * @param {String} id
+         * @returns {Boolean}
+         */
+        isSaving: function(id) {
+            var data = this.localData[id];
+            return data._virtual || false;
+        },
+
         /**
          * @param {String} id
          * @returns {Boolean}
          */
         isPureVirtual: function(id) {
-            const data = this.localData[id];
+            var data = this.localData[id];
             return data._virtual || false;
         },
 
@@ -50,7 +60,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @param {Boolean} status
          */
         setPureVirtual: function(id, status) {
-            const data = this.localData[id];
+            var data = this.localData[id];
             if (status) {
                 data._virtual = true;
             } else {
@@ -62,9 +72,9 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @param {String} id
          */
         unsetDirty: function(id) {
-            const data = this.localData[id];
+            var data = this.localData[id];
             data._isDirty = false;
-            this._visitChildren(data, r => {
+            this._visitChildren(data, function(r) {
                 r._isDirty = false;
             });
         },
@@ -81,14 +91,14 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 return false;
             }
 
-            const data = this.localData[id];
-            const to_remove = [];
-            this._visitChildren(data, item => {
+            var data = this.localData[id];
+            var to_remove = [];
+            this._visitChildren(data, function(item) {
                 to_remove.push(item.id);
             });
 
             to_remove.reverse();
-            for (const remove_id of to_remove) {
+            for (var remove_id of to_remove) {
                 this.removeLine(remove_id);
                 delete this.localData[remove_id];
             }
@@ -103,7 +113,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          *
          * @param {Object} record
          * @param {Object} params
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         _makeDefaultRecordNoDatapoint: function(record, params) {
             var self = this;
@@ -128,15 +138,20 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 );
             }
 
-            return this._rpc({
-                model: record.model,
-                method: "default_get",
-                args: [fields_key],
-                context: params.context,
-            }).then(function(result) {
+            return this._rpc(
+                {
+                    model: record.model,
+                    method: "default_get",
+                    args: [fields_key],
+                    context: params.context,
+                },
+                {
+                    shadow: true,
+                }
+            ).then(function(result) {
                 // Interrupt point (used in instant search)
                 if (!self.exists(record.id)) {
-                    return Promise.reject();
+                    return $.Deferred().reject();
                 }
 
                 // We want to overwrite the default value of the handle field (if any),
@@ -157,44 +172,43 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                     .applyDefaultValues(record.id, result, {fieldNames: fieldNames})
                     .then(function() {
                         if (!self.exists(record.id)) {
-                            return Promise.reject();
+                            return $.Deferred().reject();
                         }
-                        var def = new Promise(function(resolve, reject) {
-                            // Interrupt point (used in instant search)
-                            if (!self.exists(record.id)) {
-                                return Promise.reject();
-                            }
-                            var always = function() {
-                                if (record._warning) {
-                                    if (params.allowWarning) {
-                                        delete record._warning;
-                                    } else {
-                                        reject();
-                                    }
+                        var def = $.Deferred();
+                        // Interrupt point (used in instant search)
+                        if (!self.exists(record.id)) {
+                            return $.Deferred().reject();
+                        }
+                        var always = function() {
+                            if (record._warning) {
+                                if (params.allowWarning) {
+                                    delete record._warning;
+                                } else {
+                                    def.reject();
                                 }
-                                resolve();
-                            };
-                            self._performOnChange(record, fields_key)
-                                .then(always)
-                                .guardedCatch(always);
-                        });
+                            }
+                            def.resolve();
+                        };
+                        self._performOnChange(record, fields_key)
+                            .then(always)
+                            .guardedCatch(always);
                         return def;
                     })
                     .then(function() {
                         if (!self.exists(record.id)) {
-                            return Promise.reject();
+                            return $.Deferred().reject();
                         }
                         return self._fetchRelationalData(record);
                     })
                     .then(function() {
                         if (!self.exists(record.id)) {
-                            return Promise.reject();
+                            return $.Deferred().reject();
                         }
                         return self._postprocess(record);
                     })
                     .then(function() {
                         if (!self.exists(record.id)) {
-                            return Promise.reject();
+                            return $.Deferred().reject();
                         }
                         // Save initial changes, so they can be restored later,
                         // if we need to discard.
@@ -215,11 +229,11 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @returns {Object}
          */
         createVirtualDatapoint: function(listID, options) {
-            const list = this.localData[listID];
-            const context = _.extend({}, this._getContext(list), options.context);
+            var list = this.localData[listID];
+            var context = _.extend({}, this._getContext(list), options.context);
 
-            const position = options ? options.position : "top";
-            const params = {
+            var position = options ? options.position : "top";
+            var params = {
                 context: context,
                 fields: list.fields,
                 fieldsInfo: list.fieldsInfo,
@@ -228,6 +242,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 viewType: list.viewType,
                 allowWarning: true,
                 doNotSetDirty: true,
+                postonchange_values: options.onchange_values,
             };
 
             var targetView = params.viewType;
@@ -251,7 +266,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 fields = _.defaults({}, fields, parentRecord.fields);
             }
 
-            const record = this._makeDataPoint({
+            var record = this._makeDataPoint({
                 modelName: list.model,
                 fields: fields,
                 fieldsInfo: fieldsInfo,
@@ -263,7 +278,8 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
             this.setPureVirtual(record.id, true);
             this.updateRecordContext(record.id, {
                 ignore_warning: true,
-                not_onchange: true,
+                not_onchange: true, // To know is the record has the initial onchange applied
+                shadow: true, // To avoid show the loading backdrop
             });
 
             return {
@@ -280,11 +296,16 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @returns {Deferred}
          */
         createVirtualRecord: function(listID, options) {
-            const list = this.localData[listID];
-            const context = _.extend({}, this._getContext(list), options.context);
+            var self = this;
+            var list = this.localData[listID];
+            var context = _.extend(
+                {shadow: true},
+                this._getContext(list),
+                options.context
+            );
 
-            const position = options ? options.position : "top";
-            const params = {
+            var position = options ? options.position : "top";
+            var params = {
                 context: context,
                 fields: list.fields,
                 fieldsInfo: list.fieldsInfo,
@@ -295,18 +316,17 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 doNotSetDirty: true,
             };
 
-            return new Promise(resolve => {
-                this._makeDefaultRecord(list.model, params).then(recordID => {
-                    this.setPureVirtual(recordID, true);
-                    this.updateRecordContext(recordID, {
-                        ignore_warning: true,
-                        not_onchange: true,
-                    });
-                    resolve({
-                        record: this.get(recordID),
-                        params: params,
-                    });
+            return this._makeDefaultRecord(list.model, params).then(function(recordID) {
+                self.setPureVirtual(recordID, true);
+                self.updateRecordContext(recordID, {
+                    ignore_warning: true,
+                    not_onchange: true,
+                    shadow: true,
                 });
+                return {
+                    record: self.get(recordID),
+                    params: params,
+                };
             });
         },
 
@@ -319,16 +339,29 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @override
          */
         _performOnChange: function(record) {
-            if (record && record.context && record.context.ignore_warning) {
-                const this_mp = _.clone(this);
-                const super_call = this.trigger_up;
-                this_mp.trigger_up = function(event_name, data) {
-                    if (event_name === "warning" && data.type === "dialog") {
-                        // Do nothing
-                        return;
-                    }
-                    return super_call.apply(this, arguments);
-                }.bind(this);
+            if (record && record.context) {
+                record.context.not_onchange = false;
+                var this_mp = _.clone(this);
+                if (record.context.shadow) {
+                    // Force use 'shadow'
+                    var super__rpc_call = this._rpc;
+                    this_mp._rpc = function(params, options) {
+                        options = options || {};
+                        options.shadow = true;
+                        return super__rpc_call.call(this, params, options);
+                    }.bind(this);
+                }
+                if (record.context.ignore_warning) {
+                    var super_trigger_up_call = this.trigger_up;
+                    // Avoid show warnings
+                    this_mp.trigger_up = function(event_name, data) {
+                        if (event_name === "warning" && data.type === "dialog") {
+                            // Do nothing
+                            return;
+                        }
+                        return super_trigger_up_call.apply(this, arguments);
+                    }.bind(this);
+                }
                 return this._super.apply(this_mp, arguments);
             }
             return this._super.apply(this, arguments);
@@ -343,17 +376,94 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          */
         _applyOnChange: function(values, record) {
             if (!this.exists(record.id)) {
-                return Promise.reject();
+                return $.Deferred().reject();
             }
             return this._super.apply(this, arguments);
         },
 
+        /**
+         * Allow add multiple records at the same time
+         *
+         * @override
+         */
+        _applyX2ManyChange: function(record, fieldName, command) {
+            if (command.operation === "ADD_MULTIPLE") {
+                var self = this;
+                var localID =
+                    (record._changes && record._changes[fieldName]) ||
+                    record.data[fieldName];
+                var list = this.localData[localID];
+                list._changes = list._changes || [];
+                // For now, we are in the context of a one2many field
+                // the command should look like this:
+                // { operation: 'ADD', ids: [id0,id1,id2,...] }
+                // The corresponding record may contain value for fields that
+                // are unknown in the list (e.g. fields that are in the
+                // subrecord form view but not in the kanban or list view), so
+                // to ensure that onchanges are correctly handled, we extend the
+                // list's fields with those in the created record
+                _.each(command.ids, function(id) {
+                    var newRecord = self.localData[id];
+                    _.defaults(list.fields, newRecord.fields);
+                    _.defaults(list.fieldsInfo, newRecord.fieldsInfo);
+                    newRecord.fields = list.fields;
+                    newRecord.fieldsInfo = list.fieldsInfo;
+                    newRecord.viewType = list.viewType;
+                    list._cache[newRecord.res_id] = newRecord.id;
+                    list._changes.push(command);
+                });
+            }
+            return this._super.apply(this, arguments);
+        },
+
+        /**
+         * This is necessary to avoid calculate onchanges that
+         * affects to order_line.
+         *
+         * @override
+         */
+        _buildOnchangeSpecs: function(record) {
+            var specs = this._super.apply(this, arguments);
+            // This is necessary to improve the performance
+            if (record.model === "sale.order" && specs) {
+                // Its a change from product picker?
+                // WORKAROUND: Done in this way to reutilice odoo methods
+                var need_clean = false;
+                var parent_controller = this.getParent();
+                if (
+                    parent_controller &&
+                    parent_controller.renderer &&
+                    !_.isEmpty(parent_controller.renderer.allFieldWidgets)
+                ) {
+                    var order_line_widget = _.find(
+                        parent_controller.renderer.allFieldWidgets[
+                            parent_controller.handle
+                        ],
+                        {name: "order_line"}
+                    );
+                    need_clean =
+                        order_line_widget instanceof FieldOne2ManyProductPicker &&
+                        !_.isEmpty(this.localData[record.data.order_line]);
+                }
+                if (need_clean) {
+                    var new_specs = _.clone(specs);
+                    for (var key in specs) {
+                        if (key.startsWith("order_line.")) {
+                            delete new_specs[key];
+                        }
+                    }
+                    return new_specs;
+                }
+            }
+            return specs;
+        },
+
         /**
          * @param {String} recordID
          * @returns {Boolean}
          */
         hasChanges: function(recordID) {
-            const record = this.localData[recordID];
+            var record = this.localData[recordID];
             return record && !_.isEmpty(record._changes);
         },
 
@@ -368,7 +478,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @param {Number} limit
          * @param {Number} offset
          * @param {Object} context
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         fetchNameSearchFull: function(
             model_fields,
@@ -382,6 +492,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
             offset,
             context
         ) {
+            var self = this;
             return this._rpc({
                 model: model,
                 method: "name_search",
@@ -392,9 +503,11 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                     limit: this.limit,
                     context: context || {},
                 },
-            }).then(results => {
-                const record_ids = results.map(item => item[0]);
-                return this.fetchGenericRecords(
+            }).then(function(results) {
+                var record_ids = results.map(function(item) {
+                    return item[0];
+                });
+                return self.fetchGenericRecords(
                     model_fields,
                     model,
                     [["id", "in", record_ids]],
@@ -416,7 +529,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
          * @param {Number} limit
          * @param {Number} offset
          * @param {Object} context
-         * @returns {Promise}
+         * @returns {Deferred}
          */
         fetchGenericRecords: function(
             model_fields,
@@ -428,6 +541,7 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
             offset,
             context
         ) {
+            var self = this;
             return this._rpc({
                 model: model,
                 method: "search_read",
@@ -437,13 +551,13 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
                 offset: offset,
                 orderBy: orderby,
                 kwargs: {context: context},
-            }).then(result => {
-                for (const index in result) {
-                    const record = result[index];
-                    for (const fieldName in record) {
-                        const field = model_fields[fieldName];
+            }).then(function(result) {
+                for (var index in result) {
+                    var record = result[index];
+                    for (var fieldName in record) {
+                        var field = model_fields[fieldName];
                         if (field.type !== "many2one") {
-                            record[fieldName] = this._parseServerValue(
+                            record[fieldName] = self._parseServerValue(
                                 model_fields[fieldName],
                                 record[fieldName]
                             );
diff --git a/web_widget_one2many_product_picker/static/src/js/views/form_controller.js b/web_widget_one2many_product_picker/static/src/js/views/form_controller.js
new file mode 100644
index 000000000..3c5bbf792
--- /dev/null
+++ b/web_widget_one2many_product_picker/static/src/js/views/form_controller.js
@@ -0,0 +1,65 @@
+// Copyright 2021 Tecnativa - Alexandre Díaz
+// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+odoo.define("web_widget_one2many_product_picker.FormController", function(require) {
+    "use strict";
+
+    var FormController = require("web.FormController");
+
+    FormController.include({
+        custom_events: _.extend({}, FormController.prototype.custom_events, {
+            using_product_picker: "_onUsingProductPicker",
+        }),
+
+        /**
+         * Disable product picker while saving
+         *
+         * @override
+         */
+        saveRecord: function() {
+            var self = this;
+            var always = function(changedFields) {
+                self.renderer.invokeProductPicker(self.handle, "onDocumentSave", false);
+                return changedFields;
+            };
+            this.renderer.invokeProductPicker(this.handle, "onDocumentSave", true);
+            return this._super
+                .apply(this, arguments)
+                .then(always)
+                .guardedCatch(always);
+        },
+
+        /**
+         * This is necessary to refresh 'one2many_product_picker' when some 'trigger_refresh_fields' fields changes.
+         *
+         * @override
+         */
+        _confirmChange: function(id, fields, e) {
+            var self = this;
+            id = id || this.handle;
+            return this._super.apply(this, arguments).then(function(resetWidgets) {
+                if (self.renderer) {
+                    self.renderer.invokeProductPicker(
+                        id,
+                        "onDocumentConfirmChanges",
+                        fields,
+                        e
+                    );
+                }
+                return resetWidgets;
+            });
+        },
+
+        /**
+         * @private
+         * @param {CustomEvent} ev
+         */
+        _onUsingProductPicker: function(ev) {
+            this.model.updateRecordContext(this.handle, {
+                product_picker_field: ev.data.field,
+                product_picker_product_field: ev.data.product_field,
+                product_picker_relation: ev.data.relation,
+                product_picker_relation_field: ev.data.relation_field,
+            });
+        },
+    });
+});
diff --git a/web_widget_one2many_product_picker/static/src/js/views/form_renderer.js b/web_widget_one2many_product_picker/static/src/js/views/form_renderer.js
new file mode 100644
index 000000000..d2037a57f
--- /dev/null
+++ b/web_widget_one2many_product_picker/static/src/js/views/form_renderer.js
@@ -0,0 +1,25 @@
+// Copyright 2020 Tecnativa - Alexandre Díaz
+// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+odoo.define("web_widget_one2many_product_picker.FormRenderer", function(require) {
+    "use strict";
+
+    var FormRenderer = require("web.FormRenderer");
+
+    FormRenderer.include({
+        /**
+         * Invoke the selected method on all product picer defined
+         */
+        invokeProductPicker: function(recordID, method_name, ...params) {
+            if (_.isEmpty(this.allFieldWidgets)) {
+                return;
+            }
+            var product_picker_widgets = _.filter(
+                this.allFieldWidgets[recordID],
+                function(item) {
+                    return item.attrs.widget === "one2many_product_picker";
+                }
+            );
+            _.invoke(product_picker_widgets, method_name, ...params);
+        },
+    });
+});
diff --git a/web_widget_one2many_product_picker/static/src/js/views/basic_view.js b/web_widget_one2many_product_picker/static/src/js/views/form_view.js
similarity index 74%
rename from web_widget_one2many_product_picker/static/src/js/views/basic_view.js
rename to web_widget_one2many_product_picker/static/src/js/views/form_view.js
index eed9641ee..6ad4659f4 100644
--- a/web_widget_one2many_product_picker/static/src/js/views/basic_view.js
+++ b/web_widget_one2many_product_picker/static/src/js/views/form_view.js
@@ -1,22 +1,22 @@
 /* global py */
 // Copyright 2020 Tecnativa - Alexandre Díaz
 // License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
-odoo.define("web_widget_one2many_product_picker.BasicView", function(require) {
+odoo.define("web_widget_one2many_product_picker.FormView", function(require) {
     "use strict";
 
-    const core = require("web.core");
-    const pyUtils = require("web.py_utils");
-    const BasicView = require("web.BasicView");
+    var core = require("web.core");
+    var pyUtils = require("web.py_utils");
+    var FormView = require("web.FormView");
 
-    const _t = core._t;
+    var _t = core._t;
 
     // Add ref to _() -> _t() call
-    const PY_t = new py.PY_def.fromJSON(function() {
-        const args = py.PY_parseArgs(arguments, ["str"]);
+    var PY_t = new py.PY_def.fromJSON(function() {
+        var args = py.PY_parseArgs(arguments, ["str"]);
         return py.str.fromJSON(_t(args.str.toJSON()));
     });
 
-    BasicView.include({
+    FormView.include({
         /**
          * @override
          */
diff --git a/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js b/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js
index 01613eeea..63697420b 100644
--- a/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js
+++ b/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js
@@ -5,17 +5,17 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 ) {
     "use strict";
 
-    const core = require("web.core");
-    const field_registry = require("web.field_registry");
-    const FieldOne2Many = require("web.relational_fields").FieldOne2Many;
-    const One2ManyProductPickerRenderer = require("web_widget_one2many_product_picker.One2ManyProductPickerRenderer");
-    const tools = require("web_widget_one2many_product_picker.tools");
+    var core = require("web.core");
+    var field_registry = require("web.field_registry");
+    var FieldOne2Many = require("web.relational_fields").FieldOne2Many;
+    var One2ManyProductPickerRenderer = require("web_widget_one2many_product_picker.One2ManyProductPickerRenderer");
+    var tools = require("web_widget_one2many_product_picker.tools");
 
-    const _t = core._t;
-    const qweb = core.qweb;
+    var _t = core._t;
+    var qweb = core.qweb;
 
     /* This is the main widget */
-    const FieldOne2ManyProductPicker = FieldOne2Many.extend({
+    var FieldOne2ManyProductPicker = FieldOne2Many.extend({
         className: "oe_field_one2many_product_picker",
 
         // Workaround: We need know all records,
@@ -26,31 +26,37 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             "click .dropdown-item": "_onClickSearchMode",
             "click .oe_btn_lines": "_onClickLines",
             "click .oe_btn_search_group": "_onClickSearchGroup",
-            "search .oe_search_input": "_onSearch",
+            "keypress .oe_search_input": "_onKeyPressSearch",
             "input .oe_search_input": "_onInputSearch",
             "focusin .oe_search_input": "_onFocusInSearch",
+            "focusout .oe_search_input": "_onFocusOutSearch",
             "show.bs.dropdown .o_cp_buttons": "_onShowSearchDropdown",
             "click #product_picker_maximize": "_onClickMaximize",
+            "click #product_picker_clear_input": "_onClickClearInput",
         }),
         custom_events: _.extend({}, FieldOne2Many.prototype.custom_events, {
             create_quick_record: "_onCreateQuickRecord",
             update_quick_record: "_onUpdateQuickRecord",
+            modify_quick_record: "_onModifyQuickRecord",
             update_subtotal: "_onUpdateSubtotal",
             load_more: "_onLoadMore",
             loading_records: "_onLoadingRecords",
             list_record_remove: "_onListRecordRemove",
+            pause_auto_save: "_onPauseAutoSave",
+            resume_auto_save: "_onResumeAutoSave",
         }),
 
         _auto_search_delay: 450,
         _input_instant_search_time: 100,
 
-        // Model product.product fields
+        // Product.product model fields
         search_read_fields: ["id", "display_name", "uom_id"],
 
         /**
          * @override
          */
         init: function(parent) {
+            var self = this;
             this._super.apply(this, arguments);
 
             // Use jquery 'extend' to have a 'deep' merge.
@@ -80,40 +86,81 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             }
 
             this._currentSearchBatchID = 0;
+            this._saveChain = $.Deferred().resolve();
 
-            this._lazyRenderSearchRecords = _.debounce(() => {
-                this.doRenderSearchRecords();
-                ++this._currentSearchBatchID;
+            this._lazyRenderSearchRecords = _.debounce(function() {
+                self.doRenderSearchRecords({cleanup: true});
+                ++self._currentSearchBatchID;
             }, this._input_instant_search_time);
+
+            // Variables to control when launch save document
+            this._auto_save_timeout = null; // Timer to launch save process
+            this._ids_to_wait = []; // Records to wait before save
+            this._ids_to_update = {}; // Records to update
+            this._is_auto_save_paused = false;
+            this._need_resume_auto_save = false;
+
+            // Set a custom context to know that product picker is in use
+            this.trigger_up("using_product_picker", {
+                field: this.name,
+                relation: this.field.relation,
+                relation_field: this.field.relation_field,
+                product_field: this.options.field_map.product,
+            });
         },
 
         willStart: function() {
+            var self = this;
             return this._super
                 .apply(this, arguments)
-                .then(() => {
-                    const arch = this.view.arch;
-                    const field_name = this.options.field_map.product;
-                    const field_info = this.view.fieldsInfo[arch.tag][field_name];
-                    const model = this.view.viewFields[field_info.name].relation;
-                    this._modelName = model;
-                    return this.parent_controller.model.fetchModelFieldsInfo(model);
+                .then(function() {
+                    var arch = self.view.arch;
+                    var field_name = self.options.field_map.product;
+                    var field_info = self.view.fieldsInfo[arch.tag][field_name];
+                    var model = self.view.viewFields[field_info.name].relation;
+                    self._modelName = model;
+                    return self.parent_controller.model.fetchModelFieldsInfo(model);
                 })
-                .then(fields_info => {
-                    this._fieldsInfo = fields_info;
-                    if (this.isReadonly) {
+                .then(function(fields_info) {
+                    self._fieldsInfo = fields_info;
+                    if (self.isReadonly) {
                         // Show Lines
-                        this._updateSearchContext(-1);
+                        self._updateSearchContext(-1);
                     } else {
-                        this._updateSearchContext(0);
+                        self._updateSearchContext(0);
                     }
+                    self._searchContext.text = "";
                 });
         },
 
+        /**
+         * @override
+         */
+        start: function() {
+            var self = this;
+            return this._super.apply(this, arguments).then(function() {
+                self.$el.append(
+                    "<div class='loading'>" + _("SAVING DOCUMENT...") + "</div>"
+                );
+            });
+        },
+
+        /**
+         * @override
+         */
+        isValid: function() {
+            let is_valid = this._super.apply(this, arguments);
+            if (is_valid) {
+                is_valid = this._ids_to_wait.length === 0;
+            }
+            return is_valid;
+        },
+
         /**
          * Updates the lines counter badge
          */
         updateBadgeLines: function() {
-            const records = this.parent_controller.model.get(this.record.id).data[
+            var records = this.parent_controller.model.get(this.record.id).data[
                 this.name
             ].data;
             this.$badgeLines.text(records.length);
@@ -123,13 +170,13 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             if (!this.options.show_subtotal) {
                 return;
             }
-            let prices = [];
-            const field_map = this.options.field_map;
-            const records = this.parent_controller.model.get(this.record.id).data[
+            var prices = [];
+            var field_map = this.options.field_map;
+            var records = this.parent_controller.model.get(this.record.id).data[
                 this.name
             ].data;
             if (this.options.show_discount) {
-                prices = _.map(records, line => {
+                prices = _.map(records, function(line) {
                     return (
                         line.data[field_map.product_uom_qty] *
                         tools.priceReduce(
@@ -139,15 +186,15 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                     );
                 });
             } else {
-                prices = _.map(records, line => {
+                prices = _.map(records, function(line) {
                     return (
                         line.data[field_map.product_uom_qty] *
                         line.data[field_map.price_unit]
                     );
                 });
             }
-            let total =
-                _.reduce(prices, (a, b) => {
+            var total =
+                _.reduce(prices, function(a, b) {
                     return a + b;
                 }) || 0;
             total = tools.monetary(
@@ -177,6 +224,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 value: this.value,
                 relation_field: this.record.fields[this.name].relation_field,
                 current_batch_id: this._currentSearchBatchID,
+                controller: this.parent_controller, // TODO: Use events!
             };
         },
 
@@ -188,18 +236,24 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {Event} e
          */
         onDocumentConfirmChanges: function(fields, e) {
-            const trigger_fields = this.options.trigger_refresh_fields || [];
+            var trigger_fields = this.options.trigger_refresh_fields || [];
             if (_.difference(trigger_fields, fields).length !== trigger_fields.length) {
-                this._reset(
-                    this.parent_controller.model.get(this.parent_controller.handle),
-                    e
-                );
+                this._reset(this.parent_controller.model.get(this.dataPointID), e);
                 // Force re-launch onchanges on 'pure virtual' records
                 this.renderer.clearRecords();
                 this._render();
             }
         },
 
+        /**
+         * Product picker can be interactive during save process
+         *
+         * @param {Boolean} status
+         */
+        onDocumentSave: function(status) {
+            this.$el.toggleClass("disabled", status);
+        },
+
         /**
          * @override
          */
@@ -214,10 +268,10 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          */
         _processGroups: function() {
             this.searchGroups = [];
-            let hasUserActive = false;
-            const groups = this.options.groups || [];
-            for (const groupIndex in groups) {
-                const group_def = groups[groupIndex];
+            var hasUserActive = false;
+            var groups = this.options.groups;
+            for (var groupIndex in groups) {
+                var group_def = groups[groupIndex];
                 if (group_def.active) {
                     group_def.active = !hasUserActive;
                     hasUserActive = true;
@@ -246,10 +300,11 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @override
          */
         _renderControlPanel: function() {
+            var self = this;
             return this._super.apply(this, arguments).then(() => {
-                this._controlPanel.updateContents({
+                self._controlPanel.updateContents({
                     cp_content: {
-                        $buttons: this.$buttons,
+                        $buttons: self.$buttons,
                         $pager: false,
                     },
                 });
@@ -285,8 +340,10 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @override
          */
         _render: function() {
-            const def = this._super.apply(this, arguments);
+            var self = this;
+            var def = this._super.apply(this, arguments);
             if (def) {
+                this.$card_zone = this.$el.find(".oe_one2many_product_picker_view");
                 this.renderer.updateSearchGroup(this._activeSearchGroup);
 
                 // Check maximize state
@@ -294,17 +351,11 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                     this.$el.addClass("position-relative d-flex flex-column");
                 }
 
-                return new Promise(resolve => {
-                    this._getSearchRecords()
-                        .then(records => {
-                            return this.renderer.appendSearchRecords(records, {
-                                cleanup: false,
-                            });
-                        })
-                        .then(() => resolve());
-                }).then(() => {
-                    if (this.options.show_subtotal) {
-                        this._addTotalsZone();
+                return this.doRenderSearchRecords({
+                    cleanup: false,
+                }).then(function() {
+                    if (self.options.show_subtotal) {
+                        self._addTotalsZone();
                     }
                 });
             }
@@ -315,16 +366,22 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
         /**
          * @returns {Deferred}
          */
-        doRenderSearchRecords: function() {
-            return new Promise(resolve => {
-                this._getSearchRecords()
-                    .then(records => {
-                        this.renderer.$el.scrollTop(0);
-                        return this.renderer.appendSearchRecords(records, {
-                            cleanup: true,
-                        });
-                    })
-                    .then(() => resolve());
+        doRenderSearchRecords: function(options) {
+            options = options || {};
+            var self = this;
+            if (options.clear) {
+                this.renderer.clearRecords();
+            }
+            this._onPauseAutoSave();
+            return this._getSearchRecords().then(function(records) {
+                self.renderer.$el.scrollTop(0);
+                var defs = self.renderer.appendSearchRecords(records, options);
+                if (options.cleanup) {
+                    self._resetSaveTimeout();
+                }
+                return $.when(defs).then(function() {
+                    self._onResumeAutoSave();
+                });
             });
         },
 
@@ -353,7 +410,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
         _getSearchValue: function(value, format) {
             if (format === "$number_search") {
                 return Number(value);
-            } else if (typeof value === "string") {
+            } else if (typeof format === "string") {
                 return format.replace(/\$search/, value);
             }
             return value;
@@ -368,15 +425,16 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @returns {Deferred}
          */
         _getSearchRecords: function(options) {
-            const search_mode = this.options.search[this._searchMode];
-            const orderby = this._searchContext.order;
-            const fields = this.search_read_fields;
+            var self = this;
+            var search_mode = this.options.search[this._searchMode];
+            var orderby = this._searchContext.order;
+            var fields = this.search_read_fields;
 
             // Launch the rpc request and ensures that we wait for the reply
             // to continue
-            const domain = this._getFullSearchDomain(search_mode);
-            const soptions = options || {};
-            const context = _.extend(
+            var domain = this._getFullSearchDomain(search_mode);
+            var soptions = options || {};
+            var context = _.extend(
                 {
                     active_search_group_name: this._activeSearchGroup.name,
                     active_search_involved_fields: this._searchContext.involvedFields,
@@ -384,47 +442,45 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 },
                 this.value.getContext()
             );
-            const limit = soptions.limit || this._activeSearchGroup.records_per_page;
-            const offset = soptions.offset || 0;
+            var limit = soptions.limit || this._activeSearchGroup.records_per_page;
+            var offset = soptions.offset || 0;
 
-            return new Promise(resolve => {
-                let task = false;
-                if (search_mode.name_search_value) {
-                    const search_val = this._getSearchValue(
-                        this._searchContext.text,
-                        search_mode.name_search_value
-                    );
-                    const operator = search_mode.operator;
-                    task = this.parent_controller.model.fetchNameSearchFull(
-                        this._fieldsInfo,
-                        this._modelName,
-                        search_val,
-                        domain,
-                        fields,
-                        orderby,
-                        operator,
-                        limit,
-                        offset,
-                        context
-                    );
-                } else {
-                    task = this.parent_controller.model.fetchGenericRecords(
-                        this._fieldsInfo,
-                        this._modelName,
-                        domain,
-                        fields,
-                        orderby,
-                        limit,
-                        offset,
-                        context
-                    );
-                }
+            var task = false;
+            if (search_mode.name_search_value) {
+                var search_val = this._getSearchValue(
+                    this._searchContext.text,
+                    search_mode.name_search_value
+                );
+                var operator = search_mode.operator;
+                task = this.parent_controller.model.fetchNameSearchFull(
+                    this._fieldsInfo,
+                    this._modelName,
+                    search_val,
+                    domain,
+                    fields,
+                    orderby,
+                    operator,
+                    limit,
+                    offset,
+                    context
+                );
+            } else {
+                task = this.parent_controller.model.fetchGenericRecords(
+                    this._fieldsInfo,
+                    this._modelName,
+                    domain,
+                    fields,
+                    orderby,
+                    limit,
+                    offset,
+                    context
+                );
+            }
 
-                task.then(results => {
-                    this._searchOffset = offset + limit;
-                    this.renderer.showLoadMore(limit && results.length === limit);
-                    resolve(results);
-                });
+            return task.then(function(results) {
+                self._searchOffset = offset + limit;
+                self.renderer.showLoadMore(limit && results.length === limit);
+                return results;
             });
         },
 
@@ -433,8 +489,11 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {MouseEvent} evt
          */
         _onClickSearchGroup: function(evt) {
-            const $btn = $(evt.target);
-            const groupIndex = Number($btn.data("group")) || 0;
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
+            var $btn = $(evt.target);
+            var groupIndex = Number($btn.data("group")) || 0;
             this.showGroup(groupIndex);
             $btn.parent()
                 .find(".active")
@@ -454,6 +513,17 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             }
         },
 
+        /**
+         * @private
+         */
+        _onClickClearInput: function() {
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
+            this._clearSearchInput();
+            this.doRenderSearchRecords({clenaup: true});
+        },
+
         /**
          * @private
          */
@@ -466,16 +536,22 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {MouseEvent} ev
          */
         _onClickSearchMode: function(ev) {
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
+            var self = this;
             ev.preventDefault();
-            const $target = $(ev.target);
+            var $target = $(ev.target);
             this._searchMode = $target.index();
             $target
                 .parent()
                 .children()
                 .removeClass("active");
             $target.addClass("active");
-            this.doRenderSearchRecords().then(() => {
-                this.$searchInput.focus();
+            this.doRenderSearchRecords({cleanup: true}).then(function() {
+                if (self.options.auto_focus) {
+                    self.$searchInput.focus();
+                }
             });
         },
 
@@ -501,8 +577,12 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 trigger_refresh_fields: ["partner_id", "currency_id"],
                 auto_save: false,
                 ignore_warning: false,
-                all_domain: [],
                 instant_search: false,
+                groups: [],
+                default_group: false,
+                auto_focus: true,
+                auto_save_delay: 1500,
+                all_domain: [],
             };
         },
 
@@ -516,21 +596,21 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          */
         _getFullSearchDomain: function(search_mode) {
             this._searchContext.involvedFields = [];
-            const domain = _.clone(this._searchContext.domain) || [];
+            var domain = _.clone(this._searchContext.domain) || [];
             if (this._searchContext.text) {
-                const search_domain = search_mode.domain;
-                const involved_fields = [];
+                var search_domain = search_mode.domain;
+                var involved_fields = [];
 
                 // Iterate domain triplets and logic operators
-                for (const index in search_domain) {
-                    const domain_cloned = _.clone(search_domain[index]);
+                for (var index in search_domain) {
+                    var domain_cloned = _.clone(search_domain[index]);
 
                     // Is a triplet
                     if (domain_cloned instanceof Array) {
                         // Replace right leaf with the current value of the search input
                         domain_cloned[2] = this._getSearchValue(
-                            domain_cloned[2],
-                            this._searchContext.text
+                            this._searchContext.text,
+                            domain_cloned[2]
                         );
                         involved_fields.push({
                             type: "number",
@@ -556,15 +636,16 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             if (!this.view) {
                 return [];
             }
-            const field_name = this.options.field_map.product;
-            const lines = this.parent_controller.model.get(this.record.id).data[
-                this.name
-            ].data;
+            var field_name = this.options.field_map.product;
+            var lines = this.parent_controller.model.get(this.record.id).data[this.name]
+                .data;
             // Here only get lines with product_id assigned
             // This happens beacuse sale.order has lines for sections/comments
-            const ids = _.chain(lines)
-                .filter(line => line.data[field_name] !== false)
-                .map(line => {
+            var ids = _.chain(lines)
+                .filter(function(line) {
+                    return line.data[field_name] !== false;
+                })
+                .map(function(line) {
                     return line.data[field_name].data.id;
                 })
                 .value();
@@ -598,7 +679,12 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * that the search results. Use directy in-memory values.
          */
         showLines: function() {
-            this.renderer.clearRecords();
+            if (
+                !this.renderer.canBeUpdated() ||
+                this._activeSearchGroup.name === "main_lines"
+            ) {
+                return;
+            }
             this._updateSearchContext(-1);
             this._clearSearchInput();
             this.$btnLines
@@ -606,16 +692,23 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 .find(".active")
                 .removeClass("active");
             this.$btnLines.addClass("active");
-            this.doRenderSearchRecords();
+            this.doRenderSearchRecords({clear: true});
         },
 
         /**
          * @param {Number} group_id
          */
         showGroup: function(group_id) {
-            this.renderer.clearRecords();
+            if (
+                !this.renderer.canBeUpdated() ||
+                (this.searchGroups[group_id] &&
+                    this._activeSearchGroup.name === this.searchGroups[group_id].name)
+            ) {
+                return;
+            }
+            var need_clear = this._activeSearchGroup.name === "main_lines";
             this._updateSearchContext(group_id);
-            this.doRenderSearchRecords();
+            this.doRenderSearchRecords({cleanup: true, clear: need_clear});
             this.$btnLines.removeClass("active");
         },
 
@@ -644,11 +737,18 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 
         /**
          * @private
-         * @param {SearchEvent} evt
+         * @param {KeyboardEvent} evt
          */
-        _onSearch: function(evt) {
-            this._searchContext.text = evt.target.value;
-            this.doRenderSearchRecords();
+        _onKeyPressSearch: function(evt) {
+            if (evt.keyCode === $.ui.keyCode.ENTER && this.renderer.canBeUpdated()) {
+                var self = this;
+                this._searchContext.text = evt.target.value;
+                this.doRenderSearchRecords({cleanup: true}).then(function() {
+                    if (self.options.auto_focus) {
+                        self.$searchInput.focus();
+                    }
+                });
+            }
         },
 
         /**
@@ -656,7 +756,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {InputEvent} evt
          */
         _onInputSearch: function(evt) {
-            if (this.options.instant_search) {
+            if (this.options.instant_search && this.renderer.canBeUpdated()) {
                 this._searchContext.text = evt.target.value;
                 this._lazyRenderSearchRecords();
             }
@@ -669,11 +769,22 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          */
         _onFocusInSearch: function() {
+            var self = this;
             // Workaround: In some cases the focus it's not properly
             // assigned due an "event collision".
             // Use deferred call to ensure dispatch our event in
             // a new frame.
-            _.defer(() => this.$searchInput.select());
+            _.defer(function() {
+                return self.$searchInput.select();
+            });
+            this._onPauseAutoSave();
+        },
+
+        /**
+         * @private
+         */
+        _onFocusOutSearch: function() {
+            this._onResumeAutoSave();
         },
 
         /**
@@ -682,17 +793,137 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          */
         _onShowSearchDropdown: function(evt) {
             // Workaround: This "ensures" a correct dropdown position
-            const offset = $(evt.currentTarget)
+            var offset = $(evt.currentTarget)
                 .find(".dropdown-toggle")
                 .parent()
                 .height();
-            _.defer(() => {
+            _.defer(function() {
                 $(evt.currentTarget)
                     .find(".dropdown-menu")
                     .css("transform", "translate3d(0px, " + offset + "px, 0px)");
             });
         },
 
+        /**
+         * @returns {Deferred}
+         */
+        _saveDocument: function(ids_to_update) {
+            var widgets = this.renderer.getWidgetsWithoutOnchange();
+            if (
+                !_.isEmpty(this._ids_to_wait) ||
+                _.isEmpty(ids_to_update) ||
+                !_.isEmpty(widgets)
+            ) {
+                return this._saveChain;
+            }
+            var self = this;
+            var model = this.parent_controller.model;
+
+            this._saveChain = this._saveChain.then(function() {
+                self.$el.addClass("disabled");
+                self.parent_controller._disableButtons();
+                var keys = _.keys(ids_to_update);
+                self._ids_to_update = _.omit(self._ids_to_update, keys);
+                for (var key of keys) {
+                    model.updateRecordContext(key, {
+                        saving: true,
+                        need_save: false,
+                    });
+                }
+                // Undefined = controller handler
+                return self.parent_controller
+                    .saveRecord(undefined, {stayInEdit: true})
+                    .then(function() {
+                        var tasks = [];
+                        for (var key of keys) {
+                            model.updateRecordContext(key, {
+                                saving: false,
+                                modified: false,
+                            });
+                        }
+                        var parent_record = model.get(self.parent_controller.handle);
+                        return self.parent_controller.renderer
+                            .confirmChange(parent_record, parent_record.id, [self.name])
+                            .then(function() {
+                                self.$el.removeClass("disabled");
+                                self.parent_controller._enableButtons();
+                                self._ids_to_wait = [];
+                                // For (var key of keys) {
+                                //     tasks.push(self._checkLazyQty(key));
+                                // }
+                                return $.when(tasks);
+                            });
+                    })
+                    .then(function() {
+                        self._auto_save_timeout = null;
+                    });
+            });
+            return this._saveChain;
+        },
+
+        /**
+         * Check if the new record need update the qty
+         * This can happends because the user update the value during saving process
+         *
+         * @param {String} reference
+         * @returns {Promise}
+         */
+        _checkLazyQty: function(reference) {
+            var model = this.parent_controller.model;
+            var field_map = this.options.field_map;
+            var new_states = model.get(this.dataPointID).data[this.name].data;
+            var new_state = false;
+            var old_record = model.get(reference);
+            if (_.isNumber(old_record.data.id)) {
+                // It's a existing record
+                new_state = _.find(new_states, function(item) {
+                    return item.data && item.data.id === old_record.data.id;
+                });
+            } else {
+                // It's a new record
+                var last_index = _.findLastIndex(new_states, function(item) {
+                    return (
+                        item.data &&
+                        item.data[field_map.product].data.id ===
+                            old_record.data[field_map.product].data.id &&
+                        item.data[field_map.product_uom].data.id ===
+                            old_record.data[field_map.product_uom].data.id
+                    );
+                });
+                if (last_index !== -1) {
+                    new_state = new_states[last_index];
+                }
+            }
+            if (_.isEmpty(new_state)) {
+                return $.Deferred().resolve();
+            }
+            var lazy_qty = old_record.context.lazy_qty || 0;
+            model.updateRecordContext(new_state.id, {
+                lazy_qty: lazy_qty,
+                saving: old_record.context.saving || false,
+                need_notify: old_record.context.need_notify || false,
+                need_save: old_record.context.need_save || false,
+            });
+            if (new_state.data[field_map.product_uom_qty] < lazy_qty) {
+                const widget = this.renderer.getWidgetByStateId(new_state.id);
+                if (widget) {
+                    widget.$card.addClass("blocked");
+                }
+                return this._doUpdateQuickRecord(
+                    new_state.id,
+                    {
+                        [field_map.product_uom_qty]: lazy_qty,
+                    },
+                    {
+                        on_onchange: function() {
+                            widget.$card.removeClass("blocked");
+                        },
+                    }
+                );
+            }
+            return $.Deferred().resolve();
+        },
+
         /**
          * Runs the x2many (4,id,0) command.
          *
@@ -700,83 +931,43 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {CustomEvent} evt
          */
         _onCreateQuickRecord: function(evt) {
+            var self = this;
             evt.stopPropagation();
             var model = this.parent_controller.model;
+            var def = false;
             model.setPureVirtual(evt.data.id, false);
+            model.updateRecordContext(evt.data.id, {need_notify: false});
 
             if (this.options.auto_save) {
-                // Dont trigger state update
-                this._setValue(
+                model.updateRecordContext(evt.data.id, {need_save: true});
+                def = this._setValue(
                     {operation: "ADD", id: evt.data.id},
-                    {notifyChange: false}
-                ).then(() => {
-                    this.parent_controller
-                        .saveRecord(undefined, {stayInEdit: true})
-                        .then(() => {
-                            self.renderer.updateState(
-                                model.get(self.parent_controller.handle).data[
-                                    self.name
-                                ],
-                                {force: true}
-                            );
-                            if (evt.data.callback) {
-                                evt.data.callback();
-                            }
-                        });
-                    if (evt.data.callback) {
-                        evt.data.callback();
-                    }
-                });
-            } else {
-                // This will trigger an "state" update
-                this._setValue({operation: "ADD", id: evt.data.id}).then(() => {
-                    if (evt.data.callback) {
-                        evt.data.callback();
-                    }
-                });
-            }
-        },
-
-        /**
-         * @param {Number} id
-         * @param {Object} data
-         * @param {Function} callback
-         */
-        _doUpdateQuickRecord: function(id, data, callback) {
-            if (this.options.auto_save) {
-                var self = this;
-                // Dont trigger state update
-                this._setValue(
-                    {operation: "UPDATE", id: id, data: data},
-                    {notifyChange: false}
+                    {notifyChange: true}
                 ).then(function() {
-                    self.parent_controller
-                        .saveRecord(undefined, {stayInEdit: true})
-                        .then(function() {
-                            self.renderer.updateState(
-                                self.parent_controller.model.get(
-                                    self.parent_controller.handle
-                                ).data[self.name],
-                                {force: true}
-                            );
-                            if (callback) {
-                                callback();
-                            }
-                        });
-                    if (callback) {
-                        callback();
+                    if (evt.data.on_onchange) {
+                        evt.data.on_onchange();
+                    }
+                    self._ids_to_wait = _.without(self._ids_to_wait, evt.data.id);
+                    self._ids_to_update[evt.data.id] = {
+                        on_autosave: evt.data.on_autosave,
+                        on_autosaved: evt.data.on_autosaved,
+                    };
+                    if (_.isEmpty(self._ids_to_wait)) {
+                        self._resetSaveTimeout(true);
                     }
                 });
             } else {
                 // This will trigger an "state" update
-                this._setValue({operation: "UPDATE", id: id, data: data}).then(
+                def = this._setValue({operation: "ADD", id: evt.data.id}).then(
                     function() {
-                        if (callback) {
-                            callback();
+                        self._ids_to_wait = _.without(self._ids_to_wait, evt.data.id);
+                        if (evt.data.on_onchange) {
+                            evt.data.on_onchange();
                         }
                     }
                 );
             }
+            return def;
         },
 
         /**
@@ -787,7 +978,70 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          */
         _onUpdateQuickRecord: function(evt) {
             evt.stopPropagation();
-            this._doUpdateQuickRecord(evt.data.id, evt.data.data, evt.data.callback);
+            this._doUpdateQuickRecord(evt.data.id, evt.data.data, {
+                on_onchange: evt.data.on_onchange,
+                on_autosave: evt.data.on_autosave,
+                on_autosaved: evt.data.on_autosaved,
+            });
+        },
+
+        /**
+         * @param {Number} id
+         * @param {Object} data
+         * @param {Function} callback
+         */
+        _doUpdateQuickRecord: function(id, data, options) {
+            options = options || {};
+            var self = this;
+            var def = false;
+            var model = this.parent_controller.model;
+            model.updateRecordContext(id, {need_notify: false});
+            if (this.options.auto_save) {
+                model.updateRecordContext(id, {need_save: true});
+                def = this._setValue(
+                    {operation: "UPDATE", id: id, data: data},
+                    {notifyChange: true}
+                ).then(function() {
+                    if (options.on_onchange) {
+                        options.on_onchange();
+                    }
+                    self._ids_to_wait = _.without(self._ids_to_wait, id);
+                    self._ids_to_update[id] = {
+                        on_autosave: options.on_autosave,
+                        on_autosaved: options.on_autosaved,
+                    };
+                    if (_.isEmpty(self._ids_to_wait)) {
+                        self._resetSaveTimeout(true);
+                    }
+                });
+            } else {
+                // This will trigger an "state" update
+                def = this._setValue({operation: "UPDATE", id: id, data: data}).then(
+                    function() {
+                        self._ids_to_wait = _.without(self._ids_to_wait, id);
+                        if (options.on_onchange) {
+                            options.on_onchange();
+                        }
+                    }
+                );
+            }
+            return def;
+        },
+
+        /**
+         * Runs the x2many (1,id,values) command.
+         *
+         * @private
+         * @param {CustomEevent} evt
+         */
+        _onModifyQuickRecord: function(evt) {
+            evt.stopPropagation();
+            if (this.options.auto_save) {
+                if (!evt.data.not_wait) {
+                    this._ids_to_wait.push(evt.data.id);
+                }
+                this._resetSaveTimeout();
+            }
         },
 
         /**
@@ -796,20 +1050,42 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @param {CustomEvent} evt
          */
         _onListRecordRemove: function(evt) {
+            var self = this;
             evt.stopPropagation();
-            this._setValue({operation: "DELETE", ids: [evt.data.id]}).then(() => {
-                if (this.options.auto_save) {
-                    this.parent_controller
-                        .saveRecord(undefined, {stayInEdit: true})
-                        .then(() => {
-                            if (evt.data.callback) {
-                                evt.data.callback();
-                            }
-                        });
-                } else if (evt.data.callback) {
-                    evt.data.callback();
-                }
-            });
+            var model = this.parent_controller.model;
+            var def = false;
+            model.setPureVirtual(evt.data.id, false);
+            model.updateRecordContext(evt.data.id, {need_notify: false});
+            if (this.options.auto_save) {
+                model.updateRecordContext(evt.data.id, {need_save: true});
+                def = this._setValue(
+                    {operation: "DELETE", ids: [evt.data.id]},
+                    {notifyChange: true}
+                ).then(function() {
+                    if (evt.data.on_onchange) {
+                        evt.data.on_onchange();
+                    }
+                    self._ids_to_wait = _.without(self._ids_to_wait, evt.data.id);
+                    self._ids_to_update[evt.data.id] = {
+                        on_autosave: evt.data.on_autosave,
+                        on_autosaved: evt.data.on_autosaved,
+                    };
+                    if (_.isEmpty(self._ids_to_wait)) {
+                        self._resetSaveTimeout(true);
+                    }
+                });
+            } else {
+                // This will trigger an "state" update
+                def = this._setValue({operation: "DELETE", ids: [evt.data.id]}).then(
+                    function() {
+                        self._ids_to_wait = _.without(self._ids_to_wait, evt.data.id);
+                        if (evt.data.on_onchange) {
+                            evt.data.on_onchange();
+                        }
+                    }
+                );
+            }
+            return def;
         },
 
         /**
@@ -826,13 +1102,14 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          */
         _onLoadMore: function() {
+            var self = this;
             if (this._isLoading) {
                 return;
             }
             this._getSearchRecords({
                 offset: this._searchOffset,
-            }).then(records => {
-                this.renderer.appendSearchRecords(records);
+            }).then(function(records) {
+                return self.renderer.appendSearchRecords(records);
             });
         },
 
@@ -848,6 +1125,73 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             }
         },
 
+        /**
+         * @private
+         */
+        _onPauseAutoSave: function() {
+            if (this._auto_save_timeout) {
+                clearTimeout(this._auto_save_timeout);
+                this._auto_save_timeout = null;
+                this._need_resume_auto_save = true;
+            }
+            this._is_auto_save_paused = true;
+        },
+
+        _onResumeAutoSave: function() {
+            // Check if can resume
+            if (
+                this.$(".oe_product_picker_quick_modif_price").is(":visible") ||
+                this.$(".oe_search_input").is(":focus") ||
+                this.$(".oe_flip_card.active").length
+            ) {
+                return;
+            }
+
+            if (this._need_resume_auto_save) {
+                this._auto_save_timeout = setTimeout(
+                    this._saveDocument.bind(this),
+                    this.options.auto_save_delay,
+                    this._ids_to_update
+                );
+                this._need_resume_auto_save = false;
+            }
+            this._is_auto_save_paused = false;
+        },
+
+        _resetSaveTimeout: function(launch_new) {
+            if (this._is_auto_save_paused) {
+                this._need_resume_auto_save = true;
+                return;
+            }
+            if (this._auto_save_timeout) {
+                clearTimeout(this._auto_save_timeout);
+                this._auto_save_timeout = setTimeout(
+                    this._saveDocument.bind(this),
+                    this.options.auto_save_delay,
+                    this._ids_to_update
+                );
+            } else if (launch_new) {
+                this._auto_save_timeout = setTimeout(
+                    this._saveDocument.bind(this),
+                    this.options.auto_save_delay,
+                    this._ids_to_update
+                );
+            }
+        },
+
+        /**
+         * Clear auto-save timeout if the changes are commited
+         *
+         * @returns {Promise}
+         */
+        commitChanges: function() {
+            if (this._auto_save_timeout) {
+                clearTimeout(this._auto_save_timeout);
+                this._auto_save_timeout = null;
+            }
+            return this._super.apply(this, arguments);
+        },
+
         /**
          * @private
          * @param {Boolean} block
@@ -864,9 +1208,10 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @override
          */
         _setValue: function() {
-            return this._super.apply(this, arguments).then(() => {
-                this.updateBadgeLines();
-                this.updateSubtotalPrice();
+            var self = this;
+            return this._super.apply(this, arguments).then(function() {
+                self.updateBadgeLines();
+                self.updateSubtotalPrice();
             });
         },
     });
diff --git a/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss b/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
index 48ec908be..f26877d5c 100644
--- a/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
+++ b/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss
@@ -1,4 +1,27 @@
 .oe_field_one2many_product_picker {
+    /** FIX AUTO-SCROLL ON SAMSUNG DEVICES **/
+    * {
+        overflow-anchor: none !important;
+        scroll-snap-stop: normal !important;
+        overscroll-behavior: unset !important;
+        scroll-behavior: unset !important;
+    }
+
+    .container,
+    header,
+    footer,
+    .container-fluid,
+    body,
+    div,
+    span,
+    section {
+        overflow-anchor: none !important;
+        scroll-snap-stop: normal !important;
+        overscroll-behavior: unset !important;
+        scroll-behavior: unset !important;
+    }
+    /** END FIX **/
+
     &.oe_field_one2many_product_picker_maximized {
         position: fixed;
         top: 0;
@@ -15,6 +38,17 @@
         }
     }
 
+    &.disabled {
+        .badge {
+            filter: opacity(0.6);
+        }
+        pointer-events: none;
+
+        > div.loading {
+            display: inline-block;
+        }
+    }
+
     > div {
         width: unset !important;
     }
@@ -30,6 +64,19 @@
         }
     }
 
+    div.loading {
+        position: absolute;
+        background-color: white;
+        padding: 0.5em;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border: 2px solid gray;
+        z-index: 2;
+        box-shadow: 2px 2px 5px;
+        display: none;
+    }
+
     .o_cp_buttons {
         width: 100%;
 
@@ -57,6 +104,11 @@
             margin-right: 0;
         }
 
+        .o_catch_attention {
+            animation: none;
+            outline: 1px solid fade-in(theme-color("warning"), 0.5);
+        }
+
         .oe_flip_card {
             user-select: none;
             background-color: transparent;
@@ -67,9 +119,17 @@
                 height $one2many-product-picker-transition-3d-time;
             height: $one2many-product-picker-card-min-height;
 
+            &.blocked {
+                .badge {
+                    filter: opacity(0.7);
+                }
+                div.loading {
+                    display: inline-block;
+                }
+            }
+
             &.disabled {
-                filter: grayscale(100%);
-                opacity: 0.5;
+                filter: grayscale(1);
             }
 
             &.oe_flip_card_maximized {
@@ -138,7 +198,7 @@
                 transform-style: preserve-3d;
 
                 .img-fluid {
-                    transform: translate(-50%, -50%);
+                    transform: translate(-50%, -50%) !important;
                     top: 50%;
                     left: 50%;
                     z-index: -1;
@@ -234,6 +294,7 @@
                         top: 50%;
                         left: 0;
                         transform: translateY(-50%);
+                        width: 100%;
 
                         .oe_one2many_product_picker_form_buttons {
                             display: flex;
@@ -263,4 +324,39 @@
             }
         }
     }
+
+    /** Extra tools **/
+    .icon-waiting {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    /* clears the 'X' from Internet Explorer */
+    input[type="search"]::-ms-clear {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+    input[type="search"]::-ms-reveal {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    input[type="search"]::-webkit-search-decoration,
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-results-button,
+    input[type="search"]::-webkit-search-results-decoration {
+        display: none;
+    }
+
+    /** Modal Price **/
+    .oe_product_picker_quick_modif_price {
+        .modal-body {
+            min-height: 7em;
+        }
+    }
 }
diff --git a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
index 01b23ddfa..2cc0eb5c9 100644
--- a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
+++ b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
@@ -40,6 +40,12 @@
                     aria-describedby="btnGroupAddon2"
                 />
                 <div class="input-group-append">
+                    <button
+                        id="product_picker_clear_input"
+                        class='o_fullscreen btn btn-secondary'
+                    >
+                        <i class='fa fa-eraser' />
+                    </button>
                     <button
                         id="product_picker_maximize"
                         class='o_fullscreen btn btn-primary'
@@ -88,7 +94,7 @@
     </t>
     <t t-name="One2ManyProductPicker.ActionButton">
         <div class="safezone d-inline-block float-left m-0 pb-2 pr-2 text-left">
-            <t t-if="is_saving &amp;&amp; lazy_qty > 0">
+            <t t-if="need_notify || need_save || is_saving">
                 <span
                     class="badge record_saving badge-warning font-weight-bold rounded-0 mt-0 px-2 py-3 product_qty"
                 ><span class="lazy_product_qty" t-esc="lazy_qty || '1'" /> x <t
@@ -97,15 +103,23 @@
             </t>
             <t t-elif="!is_virtual">
                 <span
-                    t-att-data-field="field_map[field_uom_qty]"
-                    t-attf-data-esc="'{{floatFixed(field_map[field_uom_qty])}}' + ' x ' + {{field_map[field_uom]}}.data.display_name"
-                    t-attf-class="badge {{modified &amp;&amp; 'badge-warning' || 'badge-success'}} font-weight-bold rounded-0 mt-0 px-2 py-3 product_qty"
-                />
+                    t-attf-class="badge record_saving {{modified &amp;&amp; 'badge-warning' || 'badge-success'}} font-weight-bold rounded-0 mt-0 px-2 py-3 product_qty"
+                ><span
+                        t-att-data-field="field_map[field_uom_qty]"
+                        t-attf-data-esc="str(floatFixed('{{field_map[field_uom_qty]}}'))"
+                        class="lazy_product_qty"
+                    /> x <span
+                        t-att-data-field="field_map[field_uom]"
+                        t-attf-data-esc="obj.{{field_map[field_uom]}}.data.display_name"
+                    /></span>
             </t>
             <t t-else="">
                 <span
                     class="badge badge-primary font-weight-bold rounded-0 mt-0 px-2 py-3 add_product"
-                ><i class="fa fa-plus" /> 1 <t
+                ><i class="fa fa-plus" /><span
+                        class="lazy_product_qty"
+                        t-esc="lazy_qty || '1'"
+                    /> x <t
                         t-esc="state.data[field_map[field_uom]].data.display_name"
                     /></span>
             </t>
@@ -116,12 +130,12 @@
             <t t-if="show_discount">
                 <span
                     t-att-data-field="field_map.discount"
-                    t-attf-data-esc="str({{field_map.discount}} * -1.0) +'%'"
+                    t-attf-data-esc="str(obj.{{field_map.discount}} * -1.0) +'%'"
                     class="badge badge-dark discount_price font-weight-bold rounded-0 mt-1 p-2"
                 />
                 <span
                     t-att-data-field="field_map.price_unit"
-                    t-attf-data-esc="'{{monetary('price_unit',true)}}'"
+                    data-esc="str(monetary('price_unit'))"
                     class="badge font-weight-bold rounded-0 original_price"
                 />
                 <span
@@ -132,7 +146,7 @@
             <t t-else="has_onchange">
                 <span
                     t-att-data-field="field_map.price_unit"
-                    t-attf-data-esc="'{{monetary('price_unit',true)}}'"
+                    data-esc="str(monetary('price_unit'))"
                     class="badge badge-info price_unit font-weight-bold rounded-0 mt-1 p-2"
                 />
             </t>
@@ -140,7 +154,7 @@
     </t>
     <t t-name="One2ManyProductPicker.FlipCard.Front">
         <div
-            t-attf-class="oe_flip_card_front p-0 {{((modified || is_saving) &amp;&amp; 'border-warning') || (state &amp;&amp; !is_virtual &amp;&amp; 'border-success') || ''}}"
+            t-attf-class="oe_flip_card_front p-0 {{((need_notify || need_save || modified || is_saving) &amp;&amp; 'border-warning') || (state &amp;&amp; !is_virtual &amp;&amp; 'border-success') || ''}}"
         >
             <t t-if="state">
                 <div class="indicator_zones float-left">
@@ -150,7 +164,7 @@
                 <span
                     data-field="display_name"
                     class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1"
-                    data-esc="display_name"
+                    data-esc="obj.display_name"
                 />
                 <img
                     alt=""
@@ -175,6 +189,9 @@
     </t>
     <t t-name="One2ManyProductPicker.FlipCard.Back">
         <div class="oe_flip_card_back">
+            <span class="icon-waiting">
+                <i class="fa fa-cog fa-spin fa-3x fa-fw" />
+            </span>
             <widget
                 name="product_picker_quick_create_form"
                 t-att-compare-key="field_map.product_uom"
@@ -183,12 +200,11 @@
     </t>
     <t t-name="One2ManyProductPicker.FlipCard">
         <div
-            class="oe_flip_container p-1 col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 col-xxl-2"
+            class="oe_flip_container p-1 col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-2"
             t-att-data-card-id="state &amp;&amp; state.id || record_search.id"
         >
-            <div
-                t-attf-class="oe_flip_card {{!state &amp;&amp; 'disabled' || (auto_save &amp;&amp; (!is_virtual || is_saving) &amp;&amp; !state.data.id &amp;&amp; 'blocked') || ''}}"
-            >
+            <div t-attf-class="oe_flip_card {{!state &amp;&amp; 'disabled' || ''}}">
+                <div class="loading">LOADING...</div>
                 <div class="oe_flip_card_inner text-center">
                     <t t-call="One2ManyProductPicker.FlipCard.Front" />
                     <t t-call="One2ManyProductPicker.FlipCard.Back" />
@@ -207,12 +223,13 @@
         >
             <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
                 <div class="modal-content">
-                    <div class="modal-body p-0" />
+                    <div class="modal-body p-0">
+                        <span class="icon-waiting">
+                            <i class="fa fa-cog fa-spin fa-3x fa-fw" />
+                        </span>
+                    </div>
                     <div class="modal-footer">
-                        <button
-                            class="btn btn-success oe_record_change mr-auto"
-                            data-dismiss="modal"
-                        >
+                        <button class="btn btn-success oe_record_change mr-auto d-none">
                             <i class="fa fa-check" />
                         </button>
                         <button
diff --git a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml
index 4fe591890..63f227f92 100644
--- a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml
+++ b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml
@@ -2,22 +2,22 @@
     <t t-name="One2ManyProductPicker.QuickCreate.FormButtons">
         <div class="oe_one2many_product_picker_form_buttons">
             <t t-if="state == 'new'">
-                <button t-attf-class="btn btn-primary oe_record_add">Add</button>
+                <button t-attf-class="btn btn-primary oe_record_add w-100">Add</button>
             </t>
             <t t-elif="state == 'dirty'">
-                <button class="btn btn-success oe_record_change w-100">
-                    <i class="fa fa-check" />
+                <button class="btn btn-success oe_record_change w-50">
+                    <i class="fa fa-check" /> Accept
                 </button>
-                <button class="btn btn-warning oe_record_discard ml-1">
-                    <i class="fa fa-times" />
+                <button class="btn btn-warning oe_record_discard ml-1 w-50">
+                    <i class="fa fa-times" /> Discard
                 </button>
             </t>
             <t t-else="">
-                <button class="btn btn-danger oe_record_remove w-100"><i
+                <button class="btn btn-danger oe_record_remove w-50"><i
                         class="fa fa-trash"
                     /> Remove</button>
-                <button class="btn btn-warning oe_record_discard ml-1">
-                    <i class="fa fa-times" />
+                <button class="btn btn-warning oe_record_discard ml-1 w-50">
+                    <i class="fa fa-times" /> Discard
                 </button>
             </t>
         </div>
diff --git a/web_widget_one2many_product_picker/templates/assets.xml b/web_widget_one2many_product_picker/templates/assets.xml
index 46664a0bc..d53a2754d 100644
--- a/web_widget_one2many_product_picker/templates/assets.xml
+++ b/web_widget_one2many_product_picker/templates/assets.xml
@@ -53,17 +53,21 @@
                 type="text/javascript"
                 src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js"
             />
-            <script
-                type="text/javascript"
-                src="/web_widget_one2many_product_picker/static/src/js/views/basic_view.js"
-            />
             <script
                 type="text/javascript"
                 src="/web_widget_one2many_product_picker/static/src/js/views/basic_model.js"
             />
             <script
                 type="text/javascript"
-                src="/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js"
+                src="/web_widget_one2many_product_picker/static/src/js/views/form_view.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/form_controller.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/form_renderer.js"
             />
             <script
                 type="text/javascript"