diff --git a/web_widget_one2many_product_picker/README.rst b/web_widget_one2many_product_picker/README.rst
index a85d535d1..c17add2aa 100644
--- a/web_widget_one2many_product_picker/README.rst
+++ b/web_widget_one2many_product_picker/README.rst
@@ -47,7 +47,6 @@ You need to define the view fields. The view must be of ``form`` type.
 Widget options:
 ~~~~~~~~~~~~~~~
 
-* records_per_page > Integer -> Used to control the load more behaviour (16 by default)
 * groups > Array of dictionaries -> Declare the groups
 
     * name -> The group name
@@ -58,6 +57,9 @@ Widget options:
         * name -> The field name to order
         * asc -> Flag to use 'asc' order
 
+    * records_per_page > Integer -> Used to control the load more behaviour (16 by default)
+    * active -> Boolean -> Select the default group to use ('false' by default = 'All' group)
+
 * currency_field > Model field used to format monetary values ('currency_id' by default)
 * field_map > Dictionary:
 
@@ -68,7 +70,7 @@ Widget options:
     * price_unit -> The field that represent a price_unit ('price_unit' by default)
     * discount -> The field that represent a discount ('discount' by default)
 
-* search > Array of dictionaries or Array of 'triplets' ([[field_map.name, 'ilike', '$search']] by default)
+* search > Array of dictionaries (defines to use name_search by default)
 
     * name -> The name to display
     * domain -> The domain to use
@@ -76,11 +78,15 @@ Widget options:
         * $search -> Replaces it with the current value of the searchbox
         * $number_search -> Replaces all the leaf with the current value of the searchbox as a number
 
+    * name_search_value -> Enables the use of 'name_search' instead of 'search_read' and defines the value to search ('$search' by default)
+    * operator -> Operator used in 'name_search' ('ilike' by default)
+
 * edit_discount > Enable/Disable discount edits (False by default)
 * edit_price > Enable/Disable price edits (True by default)
 * 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
@@ -88,7 +94,9 @@ Widget options:
   modify/create a record with the widget.
 
 * 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.
@@ -209,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
 ===========
diff --git a/web_widget_one2many_product_picker/__manifest__.py b/web_widget_one2many_product_picker/__manifest__.py
index 49ee0fac7..8206062bc 100644
--- a/web_widget_one2many_product_picker/__manifest__.py
+++ b/web_widget_one2many_product_picker/__manifest__.py
@@ -2,23 +2,16 @@
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 {
-    'name': 'Web Widget One2Many Product Picker',
-    'summary': 'Widget to select products on one2many fields',
-    'version': '12.0.2.4.2',
-    'category': 'Website',
-    'author': "Tecnativa, "
-              "Odoo Community Association (OCA)",
-    'website': 'https://www.tecnativa.com',
-    'license': 'AGPL-3',
-    'depends': [
-        'product',
-    ],
-    'data': [
-        'templates/assets.xml',
-    ],
-    'qweb': [
-        'static/src/xml/one2many_product_picker.xml',
-    ],
-    'installable': True,
-    'auto_install': False,
+    "name": "Web Widget One2Many Product Picker",
+    "summary": "Widget to select products on one2many fields",
+    "version": "12.0.2.4.2",
+    "category": "Website",
+    "author": "Tecnativa, " "Odoo Community Association (OCA)",
+    "website": "https://github.com/OCA/web",
+    "license": "AGPL-3",
+    "depends": ["product"],
+    "data": ["templates/assets.xml"],
+    "qweb": ["static/src/xml/one2many_product_picker.xml"],
+    "installable": True,
+    "auto_install": False,
 }
diff --git a/web_widget_one2many_product_picker/i18n/ca.po b/web_widget_one2many_product_picker/i18n/ca.po
index 32e58b425..fc6ba21ff 100644
--- a/web_widget_one2many_product_picker/i18n/ca.po
+++ b/web_widget_one2many_product_picker/i18n/ca.po
@@ -25,7 +25,7 @@ msgstr "Afegir"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:208
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:193
 #, python-format
 msgid "All"
 msgstr "Tot"
@@ -114,7 +114,7 @@ msgstr "Imatge variant mitjana ( calculada)"
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:361
+#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:341
 #, python-format
 msgid "[No widget %s]"
 msgstr "[Sense widget %s]"
diff --git a/web_widget_one2many_product_picker/i18n/es.po b/web_widget_one2many_product_picker/i18n/es.po
index 1f0d60167..f7e54ea7c 100644
--- a/web_widget_one2many_product_picker/i18n/es.po
+++ b/web_widget_one2many_product_picker/i18n/es.po
@@ -6,58 +6,97 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 12.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-05-04 13:10+0000\n"
-"PO-Revision-Date: 2021-05-04 17:17+0200\n"
-"Last-Translator: claudiagn <claudia.gargallo@qubiq.es>\n"
-"Language-Team: none\n"
+"POT-Creation-Date: 2022-01-25 18:49+0000\n"
+"PO-Revision-Date: 2022-01-25 19:51+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: 8bit\n"
-"Plural-Forms: nplurals=2; plural=n != 1;\n"
-"X-Generator: Poedit 2.4.1\n"
+"Plural-Forms: \n"
+"X-Generator: Poedit 3.0\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:9
+#, 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:5
 #, 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:208
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:258
 #, python-format
 msgid "All"
 msgstr "Todo"
 
 #. 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:72
+#, python-format
+msgid "By Name"
+msgstr "Por Nombre"
+
+#. module: web_widget_one2many_product_picker
+#. openerp-web
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:12
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:20
+#, 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:61
 #, python-format
 msgid "Groups"
 msgstr "Grupos"
 
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_ir_http
+msgid "HTTP Routing"
+msgstr "Ruta HTTP"
+
 #. 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:207
+#, 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:73
 #, python-format
 msgid "Lines"
 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:92
 #, python-format
 msgid "Load More"
 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:4
 #, python-format
-msgid "Price:"
-msgstr "Precio:"
+msgid "Price"
+msgstr "Precio"
+
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_product_pricelist_item
+msgid "Pricelist Item"
+msgstr "Item de Lista de precios"
 
 #. module: web_widget_one2many_product_picker
 #: model:ir.model,name:web_widget_one2many_product_picker.model_product_product
@@ -66,62 +105,28 @@ msgstr "Producto"
 
 #. 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:18
 #, 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:41
 #, 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:81
 #, 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:361
+#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:606
 #, python-format
 msgid "[No widget %s]"
 msgstr "[Sin widget %s]"
-
-#~ msgid "HTTP Routing"
-#~ msgstr "Enrutamiento HTTP"
-
-#~ msgid "Pricelist Item"
-#~ msgstr "Elemento de tarifa"
diff --git a/web_widget_one2many_product_picker/i18n/pt_BR.po b/web_widget_one2many_product_picker/i18n/pt_BR.po
index dab981a98..d977eaa14 100644
--- a/web_widget_one2many_product_picker/i18n/pt_BR.po
+++ b/web_widget_one2many_product_picker/i18n/pt_BR.po
@@ -23,7 +23,7 @@ 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:208
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:193
 #, python-format
 msgid "All"
 msgstr ""
@@ -108,7 +108,7 @@ msgstr ""
 
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:361
+#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:341
 #, python-format
 msgid "[No widget %s]"
 msgstr ""
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 78fdfcf13..f6bf0d5c7 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 12.0\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2022-01-25 18:49+0000\n"
+"PO-Revision-Date: 2022-01-25 18:49+0000\n"
 "Last-Translator: <>\n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -15,44 +17,83 @@ 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:6
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:9
+#, 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:5
 #, python-format
 msgid "Add"
 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:208
+#: code:addons/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js:258
 #, python-format
 msgid "All"
 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:72
+#, python-format
+msgid "By Name"
+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:12
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:20
+#, 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:61
 #, python-format
 msgid "Groups"
 msgstr ""
 
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_ir_http
+msgid "HTTP Routing"
+msgstr ""
+
 #. 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:207
+#, 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:73
 #, python-format
 msgid "Lines"
 msgstr ""
 
 #. 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:92
 #, python-format
 msgid "Load More"
 msgstr ""
 
 #. 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:4
 #, python-format
-msgid "Price:"
+msgid "Price"
+msgstr ""
+
+#. module: web_widget_one2many_product_picker
+#: model:ir.model,name:web_widget_one2many_product_picker.model_product_pricelist_item
+msgid "Pricelist Item"
 msgstr ""
 
 #. module: web_widget_one2many_product_picker
@@ -62,48 +103,28 @@ 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:13
+#: code:addons/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml:18
 #, python-format
 msgid "Remove"
 msgstr ""
 
 #. 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:41
 #, python-format
 msgid "Search..."
 msgstr ""
 
 #. 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:81
 #, python-format
 msgid "Subtotal:"
 msgstr ""
 
-#. 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 ""
-
-#. 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 ""
-
-#. 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 ""
-
-#. 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 ""
-
 #. module: web_widget_one2many_product_picker
 #. openerp-web
-#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:361
+#: code:addons/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js:606
 #, python-format
 msgid "[No widget %s]"
 msgstr ""
diff --git a/web_widget_one2many_product_picker/models/__init__.py b/web_widget_one2many_product_picker/models/__init__.py
index 3d1f7c9ef..0e4444933 100644
--- a/web_widget_one2many_product_picker/models/__init__.py
+++ b/web_widget_one2many_product_picker/models/__init__.py
@@ -1,2 +1 @@
-# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
-from . import product_product
+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..90c4049cf
--- /dev/null
+++ b/web_widget_one2many_product_picker/models/base.py
@@ -0,0 +1,76 @@
+# 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_create_multi
+    def create(self, vals_list):
+        """Avoid create lines that have a product currently used when use the product
+        picker"""
+        relation = self.env.context.get("product_picker_relation")
+        if relation == self._name and len(vals_list):
+            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
+            ]
+            if len(product_ids) != 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]
+            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
+                )
+        return super().create(vals_list)
+
+    def write(self, values):
+        """Avoid write lines that have a product currently used when use the product
+        picker"""
+        relation = self.env.context.get("product_picker_relation")
+        product_field = self.env.context.get("product_picker_product_field")
+        if relation == self._name and product_field in values:
+            relation_field = self.env.context.get("product_picker_relation_field")
+            relation_id = (
+                values[relation_field]
+                if relation_field in values
+                else self.get(relation_field)
+            )
+            product_id = values[product_field]
+            has_product = (
+                self.search(
+                    [
+                        (relation_field, "=", relation_id),
+                        (product_field, "=", product_id),
+                    ],
+                    count=True,
+                    limit=1,
+                )
+                != 0
+            )
+            if has_product:
+                raise ValidationError(
+                    _("Can't write the %s: Duplicated product! (Already in database)")
+                    % relation
+                )
+        return super().write(values)
diff --git a/web_widget_one2many_product_picker/models/product_product.py b/web_widget_one2many_product_picker/models/product_product.py
deleted file mode 100644
index 6beab967a..000000000
--- a/web_widget_one2many_product_picker/models/product_product.py
+++ /dev/null
@@ -1,36 +0,0 @@
-# Copyright 2020 Tecnativa - Alexandre D. Díaz
-# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
-from odoo import api, fields, models, tools
-
-
-class ProductProduct(models.Model):
-    _inherit = 'product.product'
-
-    image_variant_medium = fields.Binary(
-        "Variant Image Medium (Computed)",
-        compute='_compute_variant_image',
-        help="This field holds the image used as image for the product variant"
-             "or product image medium, limited to 512x512px.",
-    )
-
-    image_variant_big = fields.Binary(
-        "Variant Image Big (Computed)",
-        compute='_compute_variant_image',
-        help="This field holds the image used as image for the product variant"
-             "or product image, limited to 1024x1024px.",
-    )
-
-    @api.depends('image_variant', 'product_tmpl_id.image')
-    def _compute_variant_image(self):
-        for record in self:
-            if record.image_variant:
-                resized_images = tools.image_get_resized_images(
-                    record.image_variant,
-                    return_big=False,
-                    return_small=False,
-                    avoid_resize_medium=True)
-                record.image_variant_medium = resized_images['image_medium']
-                record.image_variant_big = record.image_variant
-            else:
-                record.image_variant_medium = record.product_tmpl_id.image_medium
-                record.image_variant_big = record.product_tmpl_id.image
diff --git a/web_widget_one2many_product_picker/readme/CONFIGURE.rst b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
index 50209889a..46f18715d 100644
--- a/web_widget_one2many_product_picker/readme/CONFIGURE.rst
+++ b/web_widget_one2many_product_picker/readme/CONFIGURE.rst
@@ -5,7 +5,6 @@ You need to define the view fields. The view must be of ``form`` type.
 Widget options:
 ~~~~~~~~~~~~~~~
 
-* records_per_page > Integer -> Used to control the load more behaviour (16 by default)
 * groups > Array of dictionaries -> Declare the groups
 
     * name -> The group name
@@ -16,6 +15,9 @@ Widget options:
         * name -> The field name to order
         * asc -> Flag to use 'asc' order
 
+    * records_per_page > Integer -> Used to control the load more behaviour (16 by default)
+    * active -> Boolean -> Select the default group to use ('false' by default = 'All' group)
+
 * currency_field > Model field used to format monetary values ('currency_id' by default)
 * field_map > Dictionary:
 
@@ -26,7 +28,7 @@ Widget options:
     * price_unit -> The field that represent a price_unit ('price_unit' by default)
     * discount -> The field that represent a discount ('discount' by default)
 
-* search > Array of dictionaries or Array of 'triplets' ([[field_map.name, 'ilike', '$search']] by default)
+* search > Array of dictionaries (defines to use name_search by default)
 
     * name -> The name to display
     * domain -> The domain to use
@@ -34,11 +36,15 @@ Widget options:
         * $search -> Replaces it with the current value of the searchbox
         * $number_search -> Replaces all the leaf with the current value of the searchbox as a number
 
+    * name_search_value -> Enables the use of 'name_search' instead of 'search_read' and defines the value to search ('$search' by default)
+    * operator -> Operator used in 'name_search' ('ilike' by default)
+
 * edit_discount > Enable/Disable discount edits (False by default)
 * edit_price > Enable/Disable price edits (True by default)
 * 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
@@ -46,7 +52,9 @@ Widget options:
   modify/create a record with the widget.
 
 * 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/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 06b268975..332ce9aa5 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">
 
@@ -406,8 +406,6 @@ You need to define the view fields. The view must be of <tt class="docutils lite
 <div class="section" id="widget-options">
 <h2><a class="toc-backref" href="#id3">Widget options:</a></h2>
 <ul>
-<li><p class="first">records_per_page &gt; Integer -&gt; Used to control the load more behaviour (16 by default)</p>
-</li>
 <li><p class="first">groups &gt; Array of dictionaries -&gt; Declare the groups</p>
 <blockquote>
 <ul>
@@ -425,6 +423,10 @@ You need to define the view fields. The view must be of <tt class="docutils lite
 </ul>
 </blockquote>
 </li>
+<li><p class="first">records_per_page &gt; Integer -&gt; Used to control the load more behaviour (16 by default)</p>
+</li>
+<li><p class="first">active -&gt; Boolean -&gt; Select the default group to use (‘false’ by default = ‘All’ group)</p>
+</li>
 </ul>
 </blockquote>
 </li>
@@ -442,7 +444,7 @@ You need to define the view fields. The view must be of <tt class="docutils lite
 </ul>
 </blockquote>
 </li>
-<li><p class="first">search &gt; Array of dictionaries or Array of ‘triplets’ ([[field_map.name, ‘ilike’, ‘$search’]] by default)</p>
+<li><p class="first">search &gt; Array of dictionaries (defines to use name_search by default)</p>
 <blockquote>
 <ul>
 <li><p class="first">name -&gt; The name to display</p>
@@ -455,6 +457,10 @@ You need to define the view fields. The view must be of <tt class="docutils lite
 </ul>
 </blockquote>
 </li>
+<li><p class="first">name_search_value -&gt; Enables the use of ‘name_search’ instead of ‘search_read’ and defines the value to search (‘$search’ by default)</p>
+</li>
+<li><p class="first">operator -&gt; Operator used in ‘name_search’ (‘ilike’ by default)</p>
+</li>
 </ul>
 </blockquote>
 </li>
@@ -468,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
@@ -475,8 +483,12 @@ modify/create a record with the widget.</p>
 </li>
 <li><p class="first">ignore_warning &gt; Enable/Disable display onchange warnings (False by default)</p>
 </li>
+<li><p class="first">instant_search &gt; Enable/Disable instant search mode (False by default)</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>
@@ -597,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">
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 34a9c018a..00f7f4f81 100644
--- a/web_widget_one2many_product_picker/static/src/js/tools.js
+++ b/web_widget_one2many_product_picker/static/src/js/tools.js
@@ -1,21 +1,37 @@
 // 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.tools", function (
-    require
-) {
+odoo.define("web_widget_one2many_product_picker.tools", function(require) {
     "use strict";
 
     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;
     }
 
     /**
@@ -28,20 +44,17 @@ odoo.define("web_widget_one2many_product_picker.tools", function (
      * @param {Object} data
      * @returns {String}
      */
-    function monetary (value, field_info, currency_field, data) {
-        return field_utils.format.monetary(
-            value,
-            field_info,
-            {
-                data: data,
-                currency_field: currency_field,
-                field_digits: true,
-            });
+    function monetary(value, field_info, currency_field, data) {
+        return field_utils.format.monetary(value, field_info, {
+            data: data,
+            currency_field: currency_field,
+            field_digits: true,
+        });
     }
 
     return {
         monetary: monetary,
+        float: float,
         priceReduce: priceReduce,
     };
-
 });
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 8cc47226e..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
@@ -1,6 +1,7 @@
+/* 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.ProductPickerQuickCreateForm", function (
+odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", function(
     require
 ) {
     "use strict";
@@ -8,9 +9,8 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
     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;
+    var ProductPickerQuickCreateFormView = require("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView")
+        .ProductPickerQuickCreateFormView;
 
     var qweb = core.qweb;
 
@@ -23,14 +23,10 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
             "/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_create.xml",
         ],
 
-        custom_events: {
-            reload_view: "_onReloadView",
-        },
-
         /**
          * @override
          */
-        init: function (parent, options) {
+        init: function(parent, options) {
             this._super.apply(this, arguments);
             this.state = options.state;
             this.main_state = options.main_state;
@@ -50,58 +46,57 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
         /**
          * @override
          */
-        start: function () {
+        start: function() {
             var self = this;
-            var def1 = this._super.apply(this, arguments);
-            var form_arch = this._generateFormArch();
-            var fieldsView = {
-                arch: form_arch,
-                fields: this.fields,
-                viewFields: this.fields,
-                base_model: this.basicFieldParams.field.relation,
-                type: "form",
-                model: this.basicFieldParams.field.relation,
-            };
+            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,
+                };
 
-            var 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;
+                });
             });
-            var 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});
-            // }
-            var def2 = this.formView.getController(this).then(function (controller) {
-                self.controller = controller;
-                self.$el.empty();
-                self.controller.appendTo(self.$el);
-            });
-
-            return $.when(def1, def2);
         },
 
-        on_attach_callback: function () {
+        on_attach_callback: function() {
             if (this.controller) {
                 this.controller.autofocus();
             }
@@ -111,8 +106,9 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateForm", f
          * @private
          * @returns {String}
          */
-        _generateFormArch: function () {
-            var template = "<templates><t t-name='One2ManyProductPicker.QuickCreateForm'>";
+        _generateFormArch: function() {
+            var template =
+                "<templates><t t-name='One2ManyProductPicker.QuickCreateForm'>";
             template += this.basicFieldParams.field.views.form.arch;
             template += "</t></templates>";
             qweb.add_template(template);
@@ -121,39 +117,12 @@ 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 {
-                var self = this;
-                this.getParent()._generateVirtualState({}, this.editContext).then(function (state) {
-                    var data = {};
-                    data[self.compareKey] = {operation: 'ADD', id: evt.data.compareValue};
-                    self.basicFieldParams.model._applyChange(state.id, data).then(function () {
-                        self.res_id = state.res_id;
-                        self.id = state.id;
-                        self.start();
-                    });
-                });
-            }
-        },
     });
 
-    widgetRegistry.add("product_picker_quick_create_form", ProductPickerQuickCreateForm);
+    widgetRegistry.add(
+        "product_picker_quick_create_form",
+        ProductPickerQuickCreateForm
+    );
 
     return ProductPickerQuickCreateForm;
 });
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 579d79f89..40297d97f 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
@@ -1,54 +1,51 @@
 // 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.ProductPickerQuickCreateFormView", function (
-    require
-) {
-    "use strict";
+odoo.define(
+    "web_widget_one2many_product_picker.ProductPickerQuickCreateFormView",
+    function(require) {
+        "use strict";
 
-    /**
-     * This file defines the QuickCreateFormView, an extension of the FormView that
-     * is used by the RecordQuickCreate in One2ManyProductPicker views.
-     */
+        /**
+         * This file defines the QuickCreateFormView, an extension of the FormView that
+         * is used by the RecordQuickCreate in One2ManyProductPicker views.
+         */
 
-    var QuickCreateFormView = require("web.QuickCreateFormView");
-    var BasicModel = require("web.BasicModel");
-    var core = require("web.core");
+        var QuickCreateFormView = require("web.QuickCreateFormView");
+        var BasicModel = require("web.BasicModel");
+        var core = require("web.core");
 
-    var qweb = core.qweb;
+        var qweb = core.qweb;
 
-    BasicModel.include({
-        _applyOnChange: function (values, record, viewType) {
-            var vt = viewType || record.viewType;
-            // Ignore changes by record context 'ignore_onchanges' fields
-            if ('ignore_onchanges' in record.context) {
-                var ignore_changes = record.context.ignore_onchanges;
-                for (var index in ignore_changes) {
-                    var field_name = ignore_changes[index];
-                    delete values[field_name];
+        BasicModel.include({
+            _applyOnChange: function(values, record, viewType) {
+                // Ignore changes by record context 'ignore_onchanges' fields
+                if ("ignore_onchanges" in record.context) {
+                    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;
                 }
-                delete record.context.ignore_onchanges;
-            }
-            return this._super(values, record, viewType);
-        },
-    });
+                return this._super(values, record, viewType);
+            },
+        });
 
-    var ProductPickerQuickCreateFormRenderer =
-        QuickCreateFormView.prototype.config.Renderer.extend(
+        var ProductPickerQuickCreateFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
             {
-
                 /**
                  * @override
                  */
-                start: function () {
+                start: function() {
                     this.$el.addClass(
-                        "oe_one2many_product_picker_form_view o_xxs_form_view");
+                        "oe_one2many_product_picker_form_view o_xxs_form_view"
+                    );
                     return this._super.apply(this, arguments);
                 },
             }
         );
 
-    var ProductPickerQuickCreateFormController =
-        QuickCreateFormView.prototype.config.Controller.extend(
+        var ProductPickerQuickCreateFormController = QuickCreateFormView.prototype.config.Controller.extend(
             {
                 events: _.extend({}, QuickCreateFormView.prototype.events, {
                     "click .oe_record_add": "_onClickAdd",
@@ -57,7 +54,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                     "click .oe_record_discard": "_onClickDiscard",
                 }),
 
-                init: function (parent, model, renderer, params) {
+                init: function(parent, model, renderer, params) {
                     this.compareKey = params.compareKey;
                     this.fieldMap = params.fieldMap;
                     this.context = params.context;
@@ -65,18 +62,27 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                     this._super.apply(this, arguments);
                 },
 
+                /**
+                 * @override
+                 */
+                _applyChanges: function() {
+                    var self = this;
+                    return this._super.apply(this, arguments).then(function() {
+                        self._updateButtons();
+                    });
+                },
+
                 /**
                  * Create or accept changes
                  */
-                auto: function () {
+                auto: function() {
                     var record = this.model.get(this.handle);
-                    if (record.context.has_changes_confirmed || typeof record.context.has_changes_confirmed === "undefined") {
+                    if (!record.context.has_changes_unconfirmed) {
                         return;
                     }
-                    var 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();
                     }
                 },
@@ -86,13 +92,15 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  *  - record: Normal
                  *  - new: Is a new record
                  *  - dirty: Has changes
+                 *
+                 * @returns {Object}
                  */
-                _getRecordState: function () {
+                _getRecordState: function() {
                     var record = this.model.get(this.handle);
                     var state = "record";
-                    if (this.model.isNew(record.id)) {
+                    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") {
@@ -117,15 +125,13 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  *
                  * @private
                  */
-                _updateButtons: function () {
-                    this.$el.find(
-                        ".oe_one2many_product_picker_form_buttons").remove();
+                _updateButtons: function() {
+                    this.$el.find(".oe_one2many_product_picker_form_buttons").remove();
                     this.$el.find(".o_form_view").append(
-                        qweb.render(
-                            "One2ManyProductPicker.QuickCreate.FormButtons", {
-                                state: this._getRecordState(),
-                            })
-                        );
+                        qweb.render("One2ManyProductPicker.QuickCreate.FormButtons", {
+                            state: this._getRecordState(),
+                        })
+                    );
 
                     if (this._disabled) {
                         this._disableQuickCreate();
@@ -135,7 +141,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                 /**
                  * @private
                  */
-                _disableQuickCreate: function () {
+                _disableQuickCreate: function() {
                     if (!this.$el) {
                         return;
                     }
@@ -150,8 +156,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                 /**
                  * @private
                  */
-                _enableQuickCreate: function () {
-
+                _enableQuickCreate: function() {
                     // Allows to create again
                     this._disabled = false;
                     this.$el.removeClass("o_disabled");
@@ -162,10 +167,10 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
 
                 /**
                  * @private
-                 * @param {Array[String]} fields_changed
+                 * @param {Array} fields_changed
                  * @returns {Boolean}
                  */
-                _needReloadCard: function (fields_changed) {
+                _needReloadCard: function(fields_changed) {
                     for (var index in fields_changed) {
                         var field = fields_changed[index];
                         if (field === this.fieldMap[this.compareKey]) {
@@ -183,169 +188,182 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  * @private
                  * @param {ChangeEvent} ev
                  */
-                _onFieldChanged: function (ev) {
-                    var fields_changed = Object.keys(ev.data.changes);
-                    if (this._needReloadCard(fields_changed)) {
-                        var field = ev.data.changes[fields_changed[0]];
-                        var new_value = false;
-                        if (typeof field === "object") {
-                            new_value = field.id;
-                        } else {
-                            new_value = field;
-                        }
-                        var reload_values = {
-                            compareValue: new_value,
-                        };
-                        var record = this.model.get(this.handle);
-                        if (!('base_record_id' in record.context)) {
-                            var 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;
-                        } else {
-                            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;
-                        }
-                        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._updateButtons();
+                _onFieldChanged: function(ev) {
+                    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},
+                        });
                     }
                 },
 
                 /**
                  * @returns {Deferred}
                  */
-                _add: function () {
+                _add: function() {
+                    var self = this;
                     if (this._disabled) {
-
                         // Don't do anything if we are already creating a record
-                        return $.Deferred();
+                        return $.Deferred().resolve();
                     }
                     this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
+                        need_notify: true,
+                        modified: true,
                     });
-                    var self = this;
                     this._disableQuickCreate();
                     return this.saveRecord(this.handle, {
                         stayInEdit: true,
                         reload: true,
                         savePoint: true,
                         viewType: "form",
-                    }).then(function () {
+                    }).then(function() {
                         var record = self.model.get(self.handle);
-                        self.model.updateRecordContext(self.handle, {saving: true});
+                        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 () {
+                            success_callback: function() {
                                 self.trigger_up("create_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,
                         });
                     });
                 },
 
-                _remove: function () {
+                _remove: function() {
+                    var self = this;
                     if (this._disabled) {
-                        return $.Deferred();
+                        return $.Deferred().resolve();
                     }
 
+                    this.model.updateRecordContext(this.handle, {
+                        need_notify: true,
+                        modified: true,
+                    });
                     this._disableQuickCreate();
-                    this.trigger_up("restore_flip_card", {block: true});
                     var record = this.model.get(this.handle);
-                    this.trigger_up("list_record_remove", {
+                    this.trigger_up("block_card", {status: true});
+                    this.trigger_up("modify_quick_record", {
                         id: record.id,
                     });
-                },
-
-                _change: function () {
-                    var self = this;
-                    if (this._disabled) {
-
-                        // Don't do anything if we are already creating a record
-                        return $.Deferred();
-                    }
-                    this._disableQuickCreate();
-                    this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
-                    });
-                    var record = this.model.get(this.handle);
-
                     this.trigger_up("restore_flip_card", {
-                        success_callback: function () {
-                            self.trigger_up("update_quick_record", {
+                        success_callback: function() {
+                            self.trigger_up("list_record_remove", {
                                 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 () {
+                _change: function() {
                     var self = this;
                     if (this._disabled) {
-
                         // Don't do anything if we are already creating a record
-                        return $.Deferred();
+                        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.model.updateRecordContext(this.handle, {
+                        need_notify: true,
+                        modified: true,
+                    });
+
                     this._disableQuickCreate();
-                    var record = this.model.get(this.handle);
+                    // 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,
+                                    on_onchange: function() {
+                                        self.trigger_up("block_card", {status: false});
+                                        self._enableQuickCreate();
+                                    },
+                                });
+                            },
+                        });
+                    });
+                },
+
+                _discard: function() {
+                    var self = this;
+                    if (this._disabled) {
+                        // Don't do anything if we are already creating a record
+                        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.model.updateRecordContext(this.handle, {
+                        has_changes_unconfirmed: false,
+                    });
+                    this._disableQuickCreate();
+                    // Rollback to restore the save point
                     this.model.discardChanges(this.handle, {
                         rollback: true,
                     });
-                    this.trigger_up("quick_record_updated", {
-                        changes: record.data,
-                    });
-                    if (this.model.isNew(record.id)) {
-                        this.update({}, {reload: false});
-                        this.trigger_up("restore_flip_card");
-                        this._updateButtons();
-                        this._enableQuickCreate();
-                    } else {
-                        this.update({}, {reload: false}).then(function () {
-                            self.model.unsetDirty(self.handle);
-                            self.trigger_up("restore_flip_card");
-                            self._updateButtons();
-                            self._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();
+                            }
+                        });
+                    });
                 },
 
                 /**
                  * @private
                  * @param {MouseEvent} ev
                  */
-                _onClickAdd: function (ev) {
+                _onClickAdd: function(ev) {
                     ev.stopPropagation();
                     this._add();
                 },
@@ -354,7 +372,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  * @private
                  * @param {MouseEvent} ev
                  */
-                _onClickRemove: function (ev) {
+                _onClickRemove: function(ev) {
                     ev.stopPropagation();
                     this._remove();
                 },
@@ -363,7 +381,7 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  * @private
                  * @param {MouseEvent} ev
                  */
-                _onClickChange: function (ev) {
+                _onClickChange: function(ev) {
                     ev.stopPropagation();
                     this._change();
                 },
@@ -372,34 +390,35 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickCreateFormView
                  * @private
                  * @param {MouseEvent} ev
                  */
-                _onClickDiscard: function (ev) {
+                _onClickDiscard: function(ev) {
                     ev.stopPropagation();
                     this._discard();
                 },
             }
         );
 
-    var ProductPickerQuickCreateFormView = QuickCreateFormView.extend({
-        config: _.extend({}, QuickCreateFormView.prototype.config, {
-            Renderer: ProductPickerQuickCreateFormRenderer,
-            Controller: ProductPickerQuickCreateFormController,
-        }),
+        var ProductPickerQuickCreateFormView = QuickCreateFormView.extend({
+            config: _.extend({}, QuickCreateFormView.prototype.config, {
+                Renderer: ProductPickerQuickCreateFormRenderer,
+                Controller: ProductPickerQuickCreateFormController,
+            }),
 
-        /**
-         * @override
-         */
-        init: function (viewInfo, params) {
-            this._super.apply(this, arguments);
-            this.controllerParams.compareKey = params.compareKey;
-            this.controllerParams.fieldMap = params.fieldMap;
-            this.controllerParams.context = params.context;
-            this.controllerParams.mainRecordData = params.mainRecordData;
-        },
-    });
+            /**
+             * @override
+             */
+            init: function(viewInfo, params) {
+                this._super.apply(this, arguments);
+                this.controllerParams.compareKey = params.compareKey;
+                this.controllerParams.fieldMap = params.fieldMap;
+                this.controllerParams.context = params.context;
+                this.controllerParams.mainRecordData = params.mainRecordData;
+            },
+        });
 
-    return {
-        ProductPickerQuickCreateFormRenderer: ProductPickerQuickCreateFormRenderer,
-        ProductPickerQuickCreateFormController: ProductPickerQuickCreateFormController,
-        ProductPickerQuickCreateFormView: ProductPickerQuickCreateFormView,
-    };
-});
+        return {
+            ProductPickerQuickCreateFormRenderer: ProductPickerQuickCreateFormRenderer,
+            ProductPickerQuickCreateFormController: ProductPickerQuickCreateFormController,
+            ProductPickerQuickCreateFormView: ProductPickerQuickCreateFormView,
+        };
+    }
+);
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 e014707d5..f395b2745 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,152 +1,255 @@
+/* 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.ProductPickerQuickModifPriceForm", function (
-    require
-) {
-    "use strict";
+odoo.define(
+    "web_widget_one2many_product_picker.ProductPickerQuickModifPriceForm",
+    function(require) {
+        "use strict";
 
-    var core = require("web.core");
-    var Widget = require("web.Widget");
-    var ProductPickerQuickModifPriceFormView = require(
-        "web_widget_one2many_product_picker.ProductPickerQuickModifPriceFormView"
-    ).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;
 
-    var qweb = core.qweb;
-
-    /**
-     * This widget render a Form. Used by FieldOne2ManyProductPicker
-     */
-    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",
-        ],
+        var qweb = core.qweb;
 
         /**
-         * @override
+         * This widget render a Form. Used by FieldOne2ManyProductPicker
          */
-        init: function (parent, options) {
-            this._super.apply(this, arguments);
-            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.readonly = options.readonly;
-            this.basicFieldParams = options.basicFieldParams;
-            this.canEditPrice = options.canEditPrice;
-            this.canEditDiscount = options.canEditDiscount;
-            this.currencyField = options.currencyField;
-            this.res_id = this.state && this.state.res_id;
-            this.id = this.state && this.state.id;
-            this.editContext = {};
-        },
+        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",
+            ],
 
-        /**
-         * @override
-         */
-        start: function () {
-            var self = this;
-            var def1 = this._super.apply(this, arguments);
-            var 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});
-            }
-            var def2 = this.formView.getController(this).then(function (controller) {
-                self.controller = controller;
-                self.$el.empty();
-                self.controller.appendTo(self.$el);
-            });
+            events: {
+                "click .oe_record_change": "_onClickChange",
+                "click .oe_record_discard": "_onClickDiscard",
+            },
 
-            return $.when(def1, def2);
-        },
+            /**
+             * @override
+             */
+            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 = _.extend({}, options.fieldsInfo);
+                this.readonly = options.readonly;
+                this.basicFieldParams = options.basicFieldParams;
+                this.canEditPrice = options.canEditPrice;
+                this.canEditDiscount = options.canEditDiscount;
+                this.currencyField = options.currencyField;
+                this.res_id = this.state && this.state.res_id;
+                this.id = this.state && this.state.id;
+                this.editContext = {};
+                this._fieldsInvisible = [];
+            },
 
-        /**
-         * @override
-         */
-        destroy: function () {
-            this._super.apply(this, arguments);
-        },
+            /**
+             * @override
+             */
+            start: function() {
+                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,
+                    };
 
-        on_attach_callback: function () {
-            // Do nothing
-        },
+                    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);
 
-        /**
-         * @private
-         * @returns {String}
-         */
-        _generateFormArch: function () {
-            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);
-            var $arch = $(qweb.render("One2ManyProductPicker.QuickModifPrice.Form", {
-                field_map: this.fieldMap,
-                record_search: this.searchRecord,
-            }));
+                    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;
+                    });
+                });
+            },
 
-            var field_names = Object.keys(wanted_field_states);
-            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")) : {};
-                modifiers.invisible = false;
-                modifiers.readonly = wanted_field_states[field_name];
-                $field.attr("modifiers", JSON.stringify(modifiers));
-                $field.attr("invisible", "0");
-                $field.attr("readonly", wanted_field_states[field_name]?"1":"0");
-                gen_arch += $field[0].outerHTML;
-            }
-            gen_arch += "</group></form>";
-            return gen_arch;
-        },
+            /**
+             * @override
+             */
+            destroy: function() {
+                this._restoreNoFetch();
+                this.trigger_up("resume_auto_save");
+                this.$el.off("hidden.bs.modal");
+                this._super.apply(this, arguments);
+            },
 
-        /**
-         * This method returns the wanted fields to be displayed in the view.
-         * {field_name: readonly_state}
-         *
-         * @private
-         * @returns {Object}
-         */
-        _getWantedFieldState: function () {
-            var wantedFieldState = {};
-            wantedFieldState[this.fieldMap.discount] = !this.canEditDiscount;
-            wantedFieldState[this.fieldMap.price_unit] = !this.canEditPrice;
-            return wantedFieldState;
-        },
-    });
+            on_attach_callback: function() {
+                // Do nothing
+            },
 
-    return ProductPickerQuickModifPriceForm;
-});
+            /**
+             * @private
+             * @returns {String}
+             */
+            _generateFormArch: function() {
+                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);
+                var $arch = $(
+                    qweb.render("One2ManyProductPicker.QuickModifPrice.Form", {
+                        field_map: this.fieldMap,
+                        record_search: this.searchRecord,
+                    })
+                );
+
+                var field_names = Object.keys(
+                    this.basicFieldParams.field.views.form.fields
+                );
+                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));
+                    $field.attr("invisible", modifiers.invisible ? "1" : "0");
+                    $field.attr(
+                        "readonly",
+                        wanted_field_states[field_name] ? "1" : "0"
+                    );
+                    if (
+                        [this.fieldMap.price_unit, this.fieldMap.product].indexOf(
+                            field_name
+                        ) !== -1
+                    ) {
+                        $field.attr("force_save", "1");
+                    }
+                    gen_arch += $field[0].outerHTML;
+                }
+                gen_arch += "</group></form>";
+                return gen_arch;
+            },
+
+            /**
+             * This method returns the wanted fields to be displayed in the view.
+             * {field_name: readonly_state}
+             *
+             * @private
+             * @returns {Object}
+             */
+            _getWantedFieldState: function() {
+                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
+             */
+            _onModalHidden: function() {
+                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
+             */
+            _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;
+                }
+                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 bb128b730..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
@@ -1,55 +1,40 @@
 // 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.ProductPickerQuickModifPriceFormView", function (
-    require
-) {
-    "use strict";
+odoo.define(
+    "web_widget_one2many_product_picker.ProductPickerQuickModifPriceFormView",
+    function(require) {
+        "use strict";
 
-    /**
-     * This file defines the QuickCreateFormView, an extension of the FormView that
-     * is used by the RecordQuickCreate in One2ManyProductPicker views.
-     */
+        /**
+         * This file defines the QuickCreateFormView, an extension of the FormView that
+         * is used by the RecordQuickCreate in One2ManyProductPicker views.
+         */
 
-    var QuickCreateFormView = require("web.QuickCreateFormView");
-    var core = require("web.core");
-    var 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");
 
-    var qweb = core.qweb;
+        var qweb = core.qweb;
 
-    var ProductPickerQuickModifPriceFormRenderer =
-        QuickCreateFormView.prototype.config.Renderer.extend(
+        var ProductPickerQuickModifPriceFormRenderer = QuickCreateFormView.prototype.config.Renderer.extend(
             {
                 /**
                  * @override
                  */
-                start: function () {
+                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(function () {
+                        "oe_one2many_product_picker_form_view o_xxs_form_view"
+                    );
+                    return this._super.apply(this, arguments).then(function() {
                         self._appendPrice();
-                        self._appendButtons();
                     });
                 },
 
                 /**
                  * @private
                  */
-                _appendButtons: function () {
-                    this.$el.find(
-                        ".oe_one2many_product_picker_form_buttons").remove();
-                    this.$el.append(
-                        qweb.render(
-                            "One2ManyProductPicker.QuickModifPrice.FormButtons", {
-                                mode: this.mode,
-                            })
-                        );
-                },
-
-                /**
-                 * @private
-                 */
-                _appendPrice: function () {
+                _appendPrice: function() {
                     this.$el.find(".oe_price").remove();
                     this.$el.append(
                         qweb.render("One2ManyProductPicker.QuickModifPrice.Price")
@@ -58,70 +43,179 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickModifPriceForm
             }
         );
 
-    var ProductPickerQuickModifPriceFormController =
-        QuickCreateFormView.prototype.config.Controller.extend(
+        var ProductPickerQuickModifPriceFormController = QuickCreateFormView.prototype.config.Controller.extend(
             {
-                events: _.extend({}, QuickCreateFormView.prototype.events, {
-                    "click .oe_record_change": "_onClickChange",
-                    "click .oe_record_discard": "_onClickDiscard",
-                }),
-
                 /**
                  * @override
                  */
-                init: function (parent, model, renderer, params) {
+                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 () {
+                start: function() {
                     var self = this;
-                    return this._super.apply(this, arguments).then(function () {
-                        self._updatePrice();
+                    return this._super.apply(this, arguments).then(function() {
+                        var record = self.model.get(self.handle);
+                        self._updatePrice(record.data);
                     });
                 },
 
                 /**
                  * @override
                  */
-                _onFieldChanged: function () {
+                _onFieldChanged: function(ev) {
                     this._super.apply(this, arguments);
-                    this._updatePrice();
+                    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);
+                    });
                 },
 
                 /**
                  * @private
+                 * @param {Object} values
                  */
-                _updatePrice: function () {
-                    var record = this.model.get(this.handle);
+                _updatePrice: function(values) {
                     var price_reduce = tools.priceReduce(
-                        record.data[this.fieldMap.price_unit],
-                        record.data[this.fieldMap.discount]);
-                    this.renderer.$el.find(".oe_price").html(
-                        tools.monetary(
-                            price_reduce,
-                            this.getParent().state.fields[this.fieldMap.price_unit],
-                            this.currencyField,
-                            record
-                        )
+                        values[this.fieldMap.price_unit],
+                        values[this.fieldMap.discount]
                     );
+                    this.renderer.$el
+                        .find(".oe_price")
+                        .html(
+                            tools.monetary(
+                                price_reduce,
+                                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 () {
-
+                _disableQuickCreate: function() {
                     // Ensures that the record won't be created twice
-                    this._disabled = true;
                     this.$el.addClass("o_disabled");
-                    this.$("input:not(:disabled)")
+                    this.$("input:not(:disabled),button:not(:disabled)")
                         .addClass("o_temporarily_disabled")
                         .attr("disabled", "disabled");
                 },
@@ -129,97 +223,35 @@ odoo.define("web_widget_one2many_product_picker.ProductPickerQuickModifPriceForm
                 /**
                  * @private
                  */
-                _enableQuickCreate: function () {
-
+                _enableQuickCreate: function() {
                     // Allows to create again
-                    this._disabled = false;
                     this.$el.removeClass("o_disabled");
-                    this.$("input.o_temporarily_disabled")
+                    this.$("input.o_temporarily_disabled,button.o_temporarily_disabled")
                         .removeClass("o_temporarily_disabled")
                         .attr("disabled", false);
                 },
-
-                /**
-                 * @private
-                 * @param {MouseEvent} ev
-                 */
-                _onClickChange: function (ev) {
-                    var self = this;
-                    ev.stopPropagation();
-                    this.model.updateRecordContext(this.handle, {
-                        has_changes_confirmed: true,
-                    });
-                    var is_virtual = this.model.isPureVirtual(this.handle);
-
-                    // If is a 'pure virtual' record, save it in the selected list
-                    if (is_virtual) {
-                        if (this.model.isDirty(this.handle)) {
-                            this._disableQuickCreate();
-                            this.saveRecord(this.handle, {
-                                stayInEdit: true,
-                                reload: true,
-                                savePoint: true,
-                                viewType: "form",
-                            }).then(function () {
-                                self._enableQuickCreate();
-                                var record = self.model.get(self.handle);
-                                self.model.unsetDirty(self.handle);
-                                self.trigger_up("create_quick_record", {
-                                    id: record.id,
-                                });
-                                self.getParent().destroy();
-                            });
-                        } else {
-                            this.getParent().destroy();
-                        }
-                    } else {
-
-                        // If is a "normal" record, update it
-                        var record = this.model.get(this.handle);
-                        this.trigger_up("update_quick_record", {
-                            id: record.id,
-                        });
-                        self.model.unsetDirty(self.handle);
-                        this.getParent().destroy();
-                    }
-                },
-
-                /**
-                 * @private
-                 * @param {MouseEvent} ev
-                 */
-                _onClickDiscard: function (ev) {
-                    ev.stopPropagation();
-                    this.model.discardChanges(this.handle, {
-                        rollback: true,
-                    });
-                    var record = this.model.get(this.handle);
-                    this.trigger_up("update_quick_record", {
-                        id: record.id,
-                    });
-                    this.getParent().destroy();
-                },
             }
         );
 
-    var ProductPickerQuickModifPriceFormView = QuickCreateFormView.extend({
-        config: _.extend({}, QuickCreateFormView.prototype.config, {
-            Renderer: ProductPickerQuickModifPriceFormRenderer,
-            Controller: ProductPickerQuickModifPriceFormController,
-        }),
+        var ProductPickerQuickModifPriceFormView = QuickCreateFormView.extend({
+            config: _.extend({}, QuickCreateFormView.prototype.config, {
+                Renderer: ProductPickerQuickModifPriceFormRenderer,
+                Controller: ProductPickerQuickModifPriceFormController,
+            }),
 
-        init: function (viewInfo, params) {
-            this._super.apply(this, arguments);
-            this.controllerParams.fieldMap = params.fieldMap;
-            this.controllerParams.context = params.context;
-            this.controllerParams.parentRecordData = params.parentRecordData;
-            this.controllerParams.currencyField = params.currencyField;
-        },
-    });
+            init: function(viewInfo, params) {
+                this._super.apply(this, arguments);
+                this.controllerParams.fieldMap = params.fieldMap;
+                this.controllerParams.context = params.context;
+                this.controllerParams.parentRecordData = params.parentRecordData;
+                this.controllerParams.currencyField = params.currencyField;
+            },
+        });
 
-    return {
-        ProductPickerQuickModifPriceFormRenderer: ProductPickerQuickModifPriceFormRenderer,
-        ProductPickerQuickModifPriceFormController: ProductPickerQuickModifPriceFormController,
-        ProductPickerQuickModifPriceFormView: ProductPickerQuickModifPriceFormView,
-    };
-});
+        return {
+            ProductPickerQuickModifPriceFormRenderer: ProductPickerQuickModifPriceFormRenderer,
+            ProductPickerQuickModifPriceFormController: ProductPickerQuickModifPriceFormController,
+            ProductPickerQuickModifPriceFormView: ProductPickerQuickModifPriceFormView,
+        };
+    }
+);
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 508270deb..ab5005222 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
@@ -1,7 +1,7 @@
 /* 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.One2ManyProductPickerRecord", function (
+odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", function(
     require
 ) {
     "use strict";
@@ -11,9 +11,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
     var Domain = require("web.Domain");
     var widgetRegistry = require("web.widget_registry");
     var tools = require("web_widget_one2many_product_picker.tools");
-    var ProductPickerQuickModifPriceForm = require(
-        "web_widget_one2many_product_picker.ProductPickerQuickModifPriceForm");
-    var FieldManagerMixin = require('web.FieldManagerMixin');
+    var config = require("web.config");
 
     var qweb = core.qweb;
     var _t = core._t;
@@ -23,78 +21,101 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
         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,
+        _trigger_record_action_delay: 600,
 
         /**
          * @override
          */
-        init: function (parent, state, options) {
+        init: function(parent, state, options) {
             this._super(parent);
             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
+            );
         },
 
         /**
          * Generates a new virtual state and recreates the product card
          *
+         * @param {Boolean} simple_mode
          * @returns {Object}
          */
-        generateVirtualState: function () {
-            return this._generateVirtualState().then(this.recreate.bind(this));
+        generateVirtualState: function(options) {
+            return this._generateVirtualState(undefined, undefined, options).then(
+                this.recreate.bind(this)
+            );
         },
 
         /**
          * @override
          */
-        start: function () {
+        start: function() {
             return $.when(this._super.apply(this, arguments), this._render());
         },
 
         /**
          * @override
          */
-        on_attach_callback: function () {
+        on_attach_callback: function() {
             _.invoke(this.subWidgets, "on_attach_callback");
         },
 
         /**
          * @override
          */
-        on_detach_callback: function () {
+        on_detach_callback: function() {
             _.invoke(this.subWidgets, "on_detach_callback");
         },
 
         /**
          * @override
          */
-        destroy: function () {
+        destroy: function() {
+            this.abortTimeouts();
+            if (this.state) {
+                this.options.basicFieldParams.model.removeVirtualRecord(this.state.id);
+            }
             this.$el.remove();
             this.$card.off("");
-            const model = this.options.basicFieldParams.model;
-            if (this.state) {
-                model.removeVirtualRecord(this.state.id);
-            }
             this._super.apply(this, arguments);
         },
 
+        abortTimeouts: function() {
+            if (this._timerOnChange) {
+                clearTimeout(this._timerOnChange);
+                this._timerOnChange = false;
+            }
+            if (this.state) {
+                var model = this.options.basicFieldParams.model;
+                model.updateRecordContext(this.state.id, {aborted: true});
+            }
+        },
+
         /**
          * @override
          */
-        update: function (record) {
-
+        update: function(record) {
             // Detach the widgets because the record will empty its $el, which
             // will remove all event handlers on its descendants, and we want
             // to keep those handlers alive as we will re-use these widgets
@@ -108,15 +129,34 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * new one.
          *
          * @param {Object} state
+         * @returns {Deferred}
          */
-        recreate: function (state) {
+        recreate: function(state) {
+            if (!this.getParent()) {
+                // It's a zombie record! ensure kill it!
+                this.destroy();
+                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 && 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();
                 }
@@ -126,6 +166,15 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             return this._render();
         },
 
+        markToDestroy: function() {
+            this.toDestroy = true;
+            this.$el.hide();
+        },
+
+        isMarkedToDestroy: function() {
+            return this.toDestroy === true;
+        },
+
         /**
          * Generates the URL for the given product using the selected field
          *
@@ -134,11 +183,12 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {String} field_name
          * @returns {String}
          */
-        _getImageUrl: function (product_id, field_name) {
+        _getImageUrl: function(product_id, field_name) {
             return _.str.sprintf(
                 "/web/image/product.product/%d/%s",
                 product_id,
-                field_name);
+                field_name
+            );
         },
 
         /**
@@ -146,15 +196,36 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          *
          * @private
          * @param {String} price_field
+         * @returns {String}
          */
-        _getMonetaryFieldValue: function (price_field) {
+        _getMonetaryFieldValue: function(price_field) {
+            var model = this.options.basicFieldParams.model;
             var field_name = this.options.fieldMap[price_field];
-            var price = this.state.data[field_name];
+            var record = model.get(this.state.id);
+            var price = record.data[field_name];
             return tools.monetary(
                 price,
                 this.state.fields[field_name],
                 this.options.currencyField,
-                this.state.data);
+                this.options.basicFieldParams.record.data
+            );
+        },
+
+        /**
+         * Prints the given field value using the selected format
+         *
+         * @private
+         * @param {String} price_field
+         * @returns {String}
+         */
+        _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]);
         },
 
         /**
@@ -162,7 +233,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {String} d a stringified domain
          * @returns {Boolean} the domain evaluted with the current values
          */
-        _computeDomain: function (d) {
+        _computeDomain: function(d) {
             return new Domain(d).compute(
                 (this.state || this.getParent().state).evalContext
             );
@@ -175,8 +246,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Object} viewState
          * @param {Object} recordSearch
          */
-        _setState: function (viewState, recordSearch) {
-
+        _setState: function(viewState, recordSearch) {
             // No parent = product_pricker widget destroyed
             // So this is a 'zombie' record. Destroy it!
             if (!this.getParent()) {
@@ -184,38 +254,65 @@ 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;
             var model = this.options.basicFieldParams.model;
-            if (this.state) {
+            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);
             }
         },
 
+        /**
+         * Used to know what is the "main" uom
+         * @private
+         */
+        _setMasterUomMap: function() {
+            this.master_uom_map = {
+                field_uom: "product_uom",
+                field_uom_qty: "product_uom_qty",
+                search_field_uom: "uom_id",
+            };
+        },
+
         /**
          * @private
          * @returns {Object}
          */
-        _getQWebContext: function () {
-
+        _getQWebContext: function() {
             // 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.
@@ -223,19 +320,62 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             var record = model.get(this.state.id);
             return {
                 record_search: this.recordSearch,
-                user_context: this.getSession() && this.getSession().user_context || {},
+                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 && record.context.product_picker_modified,
-                active_model: '',
+                active_model: "",
                 auto_save: this.options.autoSave,
                 is_saving: record && record.context.saving,
+                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,
             };
         },
 
@@ -245,12 +385,13 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @returns {Object}
          */
-        _getInternalVirtualRecordContext: function () {
+        _getInternalVirtualRecordContext: function() {
             var context = {};
-            context["default_" + this.options.basicFieldParams.relation_field] =
-                this.options.basicFieldParams.state.id || null;
-            context["default_" + this.options.fieldMap.product] =
+            context[`default_${this.options.basicFieldParams.relation_field}`] =
+                this.options.basicFieldParams.record.id || null;
+            context[`default_${this.options.fieldMap.product}`] =
                 this.recordSearch.id || null;
+            context[`default_${this.master_uom_map.field_uom_qty}`] = 1.0;
             return context;
         },
 
@@ -261,32 +402,141 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @returns {Object}
          */
-         _getInternalVirtualRecordData: function() {
+        _getInternalVirtualRecordData: function() {
             // To be overwritten
             return {};
         },
 
+        /**
+         * This generates a virtual record with delayed call to "get_default" & "onchange"
+         * The method is only needed for records that are 'pure virtual'
+         *
+         * @private
+         * @param {Object} context
+         * @param {Object} def_values
+         * @returns {Deferred}
+         */
+        _generateVirtualStateDeferred: function(context, def_values, options) {
+            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(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;
+        },
+
         /**
          * @private
          * @param {Object} data
          * @param {Object} context
+         * @param {Boolean} simple_mode
          * @returns {Object}
          */
-        _generateVirtualState: function (data, context) {
-            var model = this.options.basicFieldParams.model;
+        _generateVirtualState: function(data, context, options) {
             var scontext = _.extend(
-                {}, this._getInternalVirtualRecordContext(), context);
-            // Force qty to 1.0 to launch correct onchanges
-            scontext[`default_${this.options.fieldMap.product_uom_qty}`] = 1.0;
-            var sdata = _.extend({}, this._getInternalVirtualRecordData(), data);
-            return model.createVirtualRecord(
-                this.options.basicFieldParams.value.id, {
-                    data: sdata,
-                    context: scontext,
-                });
+                {},
+                this._getInternalVirtualRecordContext(),
+                context
+            );
+            // Apply default 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],
+            };
+            return this._generateVirtualStateDeferred(scontext, def_values, options);
         },
 
-        _detachAllWidgets: function () {
+        /**
+         * Apply changes (with onchange)
+         *
+         * @param {Integer/String} record_id
+         * @param {Object} changes
+         * @param {Object} options
+         * @returns {Deferred}
+         */
+        _applyChanges: function(record_id, changes, options) {
+            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,
+                });
+                self.recreate(model.get(record_id));
+            });
+        },
+
+        /**
+         * @private
+         */
+        _detachAllWidgets: function() {
             _.invoke(this.widgets.front, "on_detach_callback");
             _.invoke(this.widgets.back, "on_detach_callback");
             this.widgets = {
@@ -298,21 +548,18 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
         /**
          * @override
          */
-        _render: function () {
+        _render: function() {
             this._detachAllWidgets();
             this.defs = [];
             this._replaceElement(
-                qweb.render(
-                    "One2ManyProductPicker.FlipCard",
-                    this._getQWebContext()
-                )
+                qweb.render("One2ManyProductPicker.FlipCard", this._getQWebContext())
             );
             this.$el.data("renderer_widget_index", this.options.renderer_widget_index);
             this.$card = this.$(".oe_flip_card");
             this.$front = this.$(".oe_flip_card_front");
             this.$back = this.$(".oe_flip_card_back");
             this._processWidgetFields(this.$front);
-            this._processWidgets(this.$front, 'front');
+            this._processWidgets(this.$front, "front");
             this._processDynamicFields();
             return $.when.apply(this, this.defs);
         },
@@ -324,37 +571,34 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @param {jQueryElement} $container
          */
-        _processWidgetFields: function ($container, widget_list) {
+        _processWidgetFields: function($container) {
             var self = this;
-            $container.find("field").each(function () {
-                var $field = $(this);
+            $container.find("field").each(function(key, value) {
+                var $field = $(value);
                 if ($field.parents("widget").length) {
                     return;
                 }
                 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 ;
+                // 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 || self.fields[field_name].type === "many2many") {
                     var widget = self.subWidgets[field_name];
                     if (widget) {
-
-                        // a widget already exists for that field, so reset it
+                        // A widget already exists for that field, so reset it
                         // with the new state
                         widget.reset(self.state);
                         $field.replaceWith(widget.$el);
                     } else {
-
-                        // the widget doesn't exist yet, so instanciate it
+                        // The widget doesn't exist yet, so instanciate it
                         var Widget = self.fieldsInfo[field_name].Widget;
                         if (Widget) {
                             widget = self._processWidget($field, field_name, Widget);
                             self.subWidgets[field_name] = widget;
-                        } else if (config.debug) {
-
-                            // the widget is not implemented
+                        } else if (config.isDebug()) {
+                            // The widget is not implemented
                             $field.replaceWith(
                                 $("<span>", {
                                     text: _.str.sprintf(
@@ -378,9 +622,8 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @param {Class} Widget
          * @returns {Widget} the widget instance
          */
-        _processWidget: function ($field, field_name, Widget) {
-
-            // some field's attrs might be record dependent (they start with
+        _processWidget: function($field, field_name, Widget) {
+            // Some field's attrs might be record dependent (they start with
             // 't-att-') and should thus be evaluated, which is done by qweb
             // we here replace those attrs in the dict of attrs of the state
             // by their evaluted value, to make it transparent from the
@@ -388,7 +631,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             // that dict being shared between records, we don't modify it
             // in place
             var attrs = Object.create(null);
-            _.each(this.fieldsInfo[field_name], function (value, key) {
+            _.each(this.fieldsInfo[field_name], function(value, key) {
                 if (_.str.startsWith(key, "t-att-")) {
                     key = key.slice(6);
                     value = $field.attr(key);
@@ -399,14 +642,9 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 attrs: attrs,
                 data: this.state.data,
             });
-            var widget = new Widget(
-                this, field_name,
-                this.getParent().state,
-                options);
+            var widget = new Widget(this, field_name, this.getParent().state, options);
             var def = widget.replace($field);
-            if (def.state() === "pending") {
-                this.defs.push(def);
-            }
+            this.defs.push(def);
             return widget;
         },
 
@@ -415,11 +653,12 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          *
          * @private
          * @param {jQueryElement} $container
+         * @param {String} widget_zone
          */
-        _processWidgets: function ($container, widget_zone) {
+        _processWidgets: function($container, widget_zone) {
             var self = this;
-            $container.find("widget").each(function () {
-                var $field = $(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,
@@ -437,22 +676,53 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                 self.widgets[widget_zone].push(widget);
 
                 var def = widget
-                    ._widgetRenderAndInsert(function () {
+                    ._widgetRenderAndInsert(function() {
                         // Do nothing
-                    }).then(function () {
+                    })
+                    .then(function() {
                         widget.$el.addClass("o_widget");
                         $field.replaceWith(widget.$el);
                     });
-                if (def.state() === "pending") {
-                    self.defs.push(def);
-                }
+                self.defs.push(def);
             });
         },
 
-        _updateLazyQty: function () {
+        /**
+         * @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
+                    )
+                );
         },
 
         /**
@@ -469,47 +739,52 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * text: 20 Items
          *
          * @private
-         * @param {Array[String]} fields
+         * @param {Array} fields
          */
-        _processDynamicFields: function (fields) {
-            if (!this.state) {
+        _processDynamicFields: function(fields) {
+            if (!this.state || !this.$el || !this.$el.length) {
                 return;
             }
-            var self = this;
             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 = _.map(fields, function (field) {
-                    return _.str.sprintf("[data-field=%s]", [field]);
-                });
-            } else {
+            if (_.isEmpty(fields)) {
                 to_find = ["[data-field]"];
+            } else {
+                to_find = _.map(fields, function(field) {
+                    return `[data-field=${field}]`;
+                });
             }
 
-            this.$el.find(to_find.join()).each(function () {
-                var $elm = $(this);
+            this.$el.find(to_find.join()).each(function(key, value) {
+                var $elm = $(value);
                 var format_out = $elm.data("esc") || $elm.data("field");
-                $elm.html(
-                    py.eval(format_out, _.extend({}, state_data, self.recordSearch))
-                );
+                var text_out = py.eval(format_out, context);
+                $elm.html(text_out);
+                $elm.attr("title", text_out);
             });
 
             if (this.options.showDiscount) {
                 var field_map = this.options.fieldMap;
                 if (state_data) {
-                    var has_discount = state_data[field_map.discount] > 0.0;
-                    this.$el.find(".original_price,.discount_price")
+                    var has_discount = state_data[field_map.discount] !== 0.0;
+                    this.$el
+                        .find(".original_price,.discount_price")
                         .toggleClass("d-none", !has_discount);
                     if (has_discount) {
                         this.$el.find(".price_unit").html(this._calcPriceReduced());
                     } else {
-                        this.$el.find(".price_unit").html(
-                            this._getMonetaryFieldValue("price_unit"));
+                        this.$el
+                            .find(".price_unit")
+                            .html(this._getMonetaryFieldValue("price_unit"));
                     }
                 }
+            } else {
+                this.$el
+                    .find(".price_unit")
+                    .html(this._getMonetaryFieldValue("price_unit"));
             }
         },
 
@@ -517,7 +792,7 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @returns {String}
          */
-        _calcPriceReduced: function () {
+        _calcPriceReduced: function() {
             var price_reduce = 0;
             var field_map = this.options.fieldMap;
             var model = this.options.basicFieldParams.model;
@@ -525,152 +800,230 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
             if (record && record.data[field_map.discount]) {
                 price_reduce = tools.priceReduce(
                     record.data[field_map.price_unit],
-                    record.data[field_map.discount]);
+                    record.data[field_map.discount]
+                );
             }
-            return price_reduce && tools.monetary(
-                price_reduce,
-                this.state.fields[field_map.price_unit],
-                this.options.currencyField,
-                this.state.data
+            return (
+                price_reduce &&
+                tools.monetary(
+                    price_reduce,
+                    this.state.fields[field_map.price_unit],
+                    this.options.currencyField,
+                    this.options.basicFieldParams.record.data
+                )
             );
         },
 
         /**
          * @private
-         * @returns {Promise}
+         * @returns {Deferred}
          */
-        _saveRecord: function () {
-            var self = this;
+        _saveRecord: function() {
             var model = this.options.basicFieldParams.model;
-            model.updateRecordContext(this.state.id, {saving: true});
-            this.recreate();
             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",
-            }).then(function () {
-                var record = model.get(self.state.id);
-                self.trigger_up("create_quick_record", {
-                    id: record.id,
-                    callback: function () {
-                        self.$card.find('.o_catch_attention').removeClass('o_catch_attention');
-                    }
-                });
-                model.unsetDirty(self.state.id);
             });
         },
 
         /**
          * @private
          */
-        _updateRecord: function () {
+        _updateRecord: function(amount) {
             var self = this;
             var model = this.options.basicFieldParams.model;
             var record = model.get(this.state.id);
-            this.trigger_up("update_quick_record", {
-                id: record.id,
-                callback: function () {
-                    self.$card.find('.o_catch_attention').removeClass('o_catch_attention');
-                }
-            });
-            model.unsetDirty(this.state.id);
-        },
-
-        /**
-         * @private
-         * @returns {Promise}
-         */
-        _addProduct: function () {
-            var self = this;
-            var model = this.options.basicFieldParams.model;
-            model.updateRecordContext(this.state.id, {ignore_warning: this.options.ignoreWarning});
-            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();
             }
-            var changes = _.pick(record.data, this.options.fieldMap.product_uom_qty);
-            if (changes[this.options.fieldMap.product_uom_qty] === 0) {
-                changes[this.options.fieldMap.product_uom_qty] = 1;
+            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]
+                ] = 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;
             }
-            var model = this.options.basicFieldParams.model;
             this.$card.addClass("blocked");
-            return model.notifyChanges(
-                record.id,
-                changes
-            ).then(function () {
-                self._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) {
+        _addProduct: function(amount) {
             var self = this;
             var model = this.options.basicFieldParams.model;
-            model.updateRecordContext(this.state.id, {ignore_warning: this.options.ignoreWarning});
             var 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});
-                self._updateLazyQty();
-            } else {
-                var changes = _.pick(record.data, this.options.fieldMap.product_uom_qty);
-                changes[this.options.fieldMap.product_uom_qty] += amount;
-                return model.notifyChanges(
-                    record.id,
-                    changes
-                ).then(function () {
-                    self._processDynamicFields();
-                    self._lazyUpdateRecord();
-                });
+            // 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]
+                ] = 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,
+                    });
+                });
         },
 
-        /**
-         * @private
-         */
-        _doInteractAnim: function (target, currentTarget) {
-            var $target = $(target);
-            var $currentTarget = $(currentTarget);
-            var $img = $currentTarget.find(".oe_flip_card_front img");
-            $target.addClass('o_catch_attention');
-        },
-
-        /**
-         * @private
-         */
-        _openPriceModifier: function () {
-            var state_data = this.state && this.state.data;
-            if (this.options.readOnlyMode || !state_data) {
+        _modifyProductDelayed: function(amount, mode) {
+            var model = this.options.basicFieldParams.model;
+            var record = model.get(this.state.id);
+            if (record.context.saving) {
                 return;
             }
-            var modif_price_form = new ProductPickerQuickModifPriceForm(this, {
+            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);
+                }
+            }
+        },
+
+        /**
+         * @private
+         * @param {Selector/HTMLElement} target
+         */
+        _doInteractAnim: function(target) {
+            var $target = $(target);
+            $target.addClass("o_catch_attention");
+        },
+
+        /**
+         * @private
+         */
+        _openPriceModifier: function() {
+            var state_data = this.state && this.state.data;
+            if (
+                this.options.readOnlyMode ||
+                !state_data ||
+                (this.$modifPriceModal &&
+                    (this.$modifPriceModal.data("bs.modal") || {})._isShown)
+            ) {
+                return;
+            }
+            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.$modifPricePopup = $(
-                qweb.render("One2ManyProductPicker.QuickModifPricePopup"));
-            this.$modifPricePopup.appendTo($(".o_main_content"));
-            modif_price_form.attachTo(this.$modifPricePopup);
+
+            self.$modifPriceModal = $(
+                qweb.render("One2ManyProductPicker.QuickModifPrice.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
@@ -679,47 +1032,44 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @param {ClickEvent} evt
          */
-        _onClickFlipCard: function (evt) {
+        _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;
             }
+
             var $target = $(evt.target);
-            if (!this.options.readOnlyMode) {
+            if (!this.options.readOnlyMode && this.getParent().canBeSaved(this.state.id)) {
                 if (
-                    $target.hasClass('add_product') ||
-                    $target.parents('.add_product').length
+                    $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, evt.currentTarget);
-                    }
+                    this._modifyProductDelayed(1, "add");
                     return;
                 } else if (
-                    $target.hasClass('product_qty') ||
-                    $target.parents('.product_qty').length
+                    $target.hasClass("product_qty") ||
+                    $target.parents(".product_qty").length
                 ) {
-                    this._incProductQty(1);
-                    this._doInteractAnim(evt.target, evt.currentTarget);
+                    this._modifyProductDelayed(1, "update");
                     return;
-                } else if ($target.hasClass('safezone')) {
+                } else if ($target.hasClass("safezone")) {
                     // Do nothing on safe zones
                     return;
                 }
             }
 
-            if (this.$card.hasClass('blocked')) {
-                return;
-            }
-
+            this.trigger_up("pause_auto_save");
             if (!this._clickFlipCardDelayed) {
                 this._clickFlipCardDelayed = setTimeout(
                     this._onClickDelayedFlipCard.bind(this, evt),
-                    this._click_card_delayed_time);
+                    this._click_card_delayed_time
+                );
             }
             ++this._clickFlipCardCount;
-            if (this._clickFlipCardCount >= 2) {
+            if (this._clickFlipCardCount === 2) {
                 clearTimeout(this._clickFlipCardDelayed);
                 this._clickFlipCardDelayed = false;
                 this._clickFlipCardCount = 0;
@@ -730,36 +1080,41 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
         /**
          * @private
          */
-        _onClickDelayedFlipCard: function () {
+        _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 {
-                var self = this;
+                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._processWidgets(this.$back, "back");
                 }
                 this._processDynamicFields();
-                $.when(this.defs).then(function () {
+                $.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");
+                    $actived_card.find(".oe_flip_card_front").removeClass("d-none");
                     self.$card.addClass("active");
-                    self.$card.on('transitionend', function () {
+                    self.$card.on("transitionend", function() {
                         self.$front.addClass("d-none");
-                        self.$card.off('transitionend');
+                        self.$card.off("transitionend");
                     });
                     self.trigger_up("record_flip", {
                         widget_index: self.$el.data("renderer_widget_index"),
-                        prev_widget_index: $actived_card.parent().data("renderer_widget_index"),
+                        prev_widget_index: $actived_card
+                            .parent()
+                            .data("renderer_widget_index"),
                     });
                 });
             }
@@ -769,20 +1124,20 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
          * @private
          * @param {MouseEvent} evt
          */
-        _onDblClickDelayedFlipCard: function (evt) {
+        _onDblClickDelayedFlipCard: function(evt) {
             var $target = $(evt.target);
             if (
-                $target.hasClass('badge_price') ||
-                $target.parents('.badge_price').length
+                $target.hasClass("badge_price") ||
+                $target.parents(".badge_price").length
             ) {
                 this._openPriceModifier();
             } else {
                 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 () {
+                if ($currentTarget.hasClass("oe_flip_card_maximized")) {
+                    $currentTarget.removeClass("oe_flip_card_maximized");
+                    $currentTarget.on("transitionend", function() {
                         $currentTarget.css({
                             position: "",
                             top: "",
@@ -791,14 +1146,13 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                             height: "",
                             zIndex: "",
                         });
-                        $currentTarget.off('transitionend');
+                        $currentTarget.off("transitionend");
                     });
                 } else {
                     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");
+                        $actived_card.find(".oe_flip_card_front").removeClass("d-none");
                     }
                     var offset = $currentTarget.offset();
                     $currentTarget.css({
@@ -809,8 +1163,8 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                         height: $currentTarget.height(),
                         zIndex: 50,
                     });
-                    _.defer(function () {
-                        $currentTarget.addClass('oe_flip_card_maximized');
+                    _.defer(function() {
+                        $currentTarget.addClass("oe_flip_card_maximized");
                     });
                 }
                 $img.attr("src", $img.data("srcAlt"));
@@ -820,14 +1174,25 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
 
         /**
          * @private
+         * @param {CustomEvent} evt
          */
-        _onRestoreFlipCard: function (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");
-            if (this.$card.hasClass('oe_flip_card_maximized')) {
-                this.$card.removeClass('oe_flip_card_maximized');
-                this.$card.on('transitionend', function () {
+            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", function() {
                     self.$card.css({
                         position: "",
                         top: "",
@@ -836,38 +1201,40 @@ odoo.define("web_widget_one2many_product_picker.One2ManyProductPickerRecord", fu
                         height: "",
                         zIndex: "",
                     });
-                    self.$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();
+                this.trigger_up("resume_auto_save");
+            } else {
+                this.trigger_up("resume_auto_save");
             }
-
-            if (evt.data.block) {
-                this.$card.addClass("blocked");
-            }
+            $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) {
+        _onQuickRecordUpdated: function(evt) {
             this._processDynamicFields(Object.keys(evt.data.changes));
             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 b44bc6e5c..404da2d17 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
@@ -1,556 +1,833 @@
 // 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.One2ManyProductPickerRenderer", function (
-    require
-) {
-    "use strict";
+odoo.define(
+    "web_widget_one2many_product_picker.One2ManyProductPickerRenderer",
+    function(require) {
+        "use strict";
 
-    var core = require("web.core");
-    var BasicRenderer = require("web.BasicRenderer");
-    var One2ManyProductPickerRecord = require(
-        "web_widget_one2many_product_picker.One2ManyProductPickerRecord");
-    var 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");
 
-    var qweb = core.qweb;
+        var qweb = core.qweb;
 
-    /* This is the renderer of the main widget */
-    var One2ManyProductPickerRenderer = BasicRenderer.extend({
-        className: 'oe_one2many_product_picker_view',
+        /* This is the renderer of the main widget */
+        var One2ManyProductPickerRenderer = BasicRenderer.extend({
+            className: "oe_one2many_product_picker_view",
 
-        events: {
-            'click #productPickerLoadMore': '_onClickLoadMore',
-        },
-        custom_events: {
-            'record_flip': '_onRecordFlip',
-        },
+            events: {
+                "click #productPickerLoadMore": "_onClickLoadMore",
+            },
+            custom_events: {
+                record_flip: "_onRecordFlip",
+            },
 
-        DELAY_GET_RECORDS: 150,
-        MIN_PERC_GET_RECORDS: 0.9,
+            _instant_search_onchange_delay: 250,
 
-        /**
-         * @override
-         */
-        init: function (parent, state, params) {
-            this._super.apply(this, arguments);
-            this.widgets = [];
-            this.recordOptions = _.extend({}, params.record_options, {
-                viewType: 'One2ManyProductPicker',
-            });
+            /**
+             * @override
+             */
+            init: function(parent, state, params) {
+                this._super.apply(this, arguments);
+                this.widgets = [];
+                this.recordOptions = _.extend({}, params.record_options, {
+                    viewType: "One2ManyProductPicker",
+                });
 
-            // Workaround: Odoo initilize this class so we need do this to
-            // 'receive' more arguments.
-            this.options = parent.options;
-            this.mode = parent.mode;
-            this.search_data = parent._searchRecords;
-            this.search_group = parent._activeSearchGroup;
-            this.last_search_data_count = parent._lastSearchRecordsCount;
-        },
+                // Workaround: Odoo initilize this class so we need do this to
+                // 'receive' more arguments.
+                this.options = parent.options;
+                this.mode = parent.mode;
+                this.search_group = parent._activeSearchGroup;
+            },
 
-        /**
-         * Propagate the event to the view widgets
-         */
-        on_attach_callback: function () {
-            this._isInDom = true;
-            _.invoke(this.widgets, 'on_attach_callback');
-        },
+            /**
+             * Propagate the event to the view widgets
+             */
+            on_attach_callback: function() {
+                this._isInDom = true;
+                _.invoke(_.compact(this.widgets), "on_attach_callback");
+            },
 
-        /**
-         * Propagate the event to the view widgets
-         */
-        on_detach_callback: function () {
-            this._isInDom = false;
-            _.invoke(this.widgets, 'on_detach_callback');
-        },
+            /**
+             * Propagate the event to the view widgets
+             */
+            on_detach_callback: function() {
+                this._isInDom = false;
+                _.invoke(_.compact(this.widgets), "on_detach_callback");
+            },
 
-        /**
-         * @override
-         */
-        start: function () {
-            return this._super.apply(this, arguments);
-        },
+            /**
+             * @override
+             */
+            start: function() {
+                return this._super.apply(this, arguments);
+            },
 
-        /**
-         * @param {Object} search_data
-         */
-        updateSearchData: function (search_data, count, search_group) {
-            this.search_data = search_data;
-            this.last_search_data_count = count;
-            this.search_group = search_group;
-            this._loadMoreWorking = false;
-            this.$btnLoadMore.attr("disabled", false);
-        },
+            /**
+             * @param {Object} search_group
+             */
+            updateSearchGroup: function(search_group) {
+                this.search_group = search_group;
+            },
 
-        /**
-         * @param {Boolean} block
-         */
-        blockLoadMore: function (block) {
-            this.$btnLoadMore.attr("disabled", block);
-        },
+            /**
+             * @param {Boolean} block
+             */
+            blockLoadMore: function(block) {
+                this.$btnLoadMore.attr("disabled", block);
+            },
 
-        /**
-         * Avoid re-render 'pure virtual' states
-         *
-         * @override
-         */
-        updateState: function (state, params) {
-            var self = this;
-            var force_update = params.force;
-            delete params.force;
-            var sparams = _.extend({}, params, {noRender: true});
-            if (!force_update && _.isEqual(this.state.data, state.data)) {
-                return this._super(state, sparams);
-            }
-            var old_state = _.clone(this.state.data);
-            return this._super(state, sparams).then(function () {
-                self._updateStateRecords(old_state);
-            });
-        },
-
-        /**
-         * Recreate the given widget by the state id
-         *
-         * @param {String} state_id
-         * @param {Object} new_state
-         */
-        updateRecord: function (state_id, new_state) {
-            for (var eb = this.widgets.length-1; eb>=0; --eb) {
-                var widget = this.widgets[eb];
-                if (widget.state.id === state_id) {
-                    widget.recreate(new_state);
-                    break;
+            /**
+             * Avoid re-render 'pure virtual' states
+             *
+             * @override
+             */
+            updateState: function(state, params) {
+                var self = this;
+                var force_update = params.force;
+                delete params.force;
+                var sparams = _.extend({}, params, {noRender: true});
+                if (!force_update && _.isEqual(this.state.data, state.data)) {
+                    return this._super(state, sparams);
                 }
-            }
-        },
+                var old_state = _.clone(this.state.data);
+                return this._super(state, sparams).then(function() {
+                    self._updateStateRecords(old_state);
+                });
+            },
 
-        /**
-         * @private
-         * @param {Array[Object]} states
-         * @returns {Deferred}
-         */
-        _removeRecords: function (states, new_states) {
-            var defs = [];
-            var to_destroy = [];
-            for (var index_state in states) {
-                var state = states[index_state];
-                for (var e = this.widgets.length-1; e>=0; --e) {
-                    var widget = this.widgets[e];
-                    if (widget && widget.state.id === state.id) {
-                        to_destroy.push(widget);
-                        delete this.widgets[e];
+            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;
+            },
 
-            // If doesn't exists other records with the same product, we need
-            // create a 'pure virtual' record again.
-            for (var index_destroy in to_destroy) {
-                var widget_destroyed = to_destroy[index_destroy];
-                var widget_product_id = widget_destroyed.state
-                    .data[this.options.field_map.product].data.id;
-                var found = false;
-                // If already exists a widget for the product don't try create a new one
-                for (var eb = this.widgets.length-1; eb>=0; --eb) {
-                    var widget = this.widgets[eb];
+            /**
+             * Because this widget doesn't support comments/sections line types
+             * we need check if the line is valid to be shown.
+             *
+             * @private
+             * @param {Object} state
+             * @returns {Boolean}
+             */
+            _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
+                );
+            },
+
+            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
+                    );
+                });
+            },
+
+            getWidgetsWithoutOnchange: function(product_id) {
+                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
+                    );
+                });
+            },
+
+            /**
+             * When destroy states we need check if pure virtual records
+             * are affected to recreate a new one because this widget can't
+             * remove pure virtual records.
+             *
+             * @private
+             * @param {Array} states
+             * @returns {Array}
+             */
+            _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);
+                    }
+                }
+
+                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 (
-                        widget &&
-                        widget.state &&
-                        widget.state.data[this.options.field_map.product].data.id === widget_product_id
+                        !state_has_modified &&
+                        state_has_onchange &&
+                        !model.isPureVirtual(widget.state.id)
                     ) {
-                        found = true;
-                        break;
+                        to_destroy.push(widget);
+                        continue;
                     }
-                }
 
-                if (!found) {
-                    // Get the new state ID if exists to link it with the new record
-                    var new_state_id = undefined;
-                    for (var eb = new_states.length-1; eb>=0; --eb) {
-                        var state = new_states[eb];
-                        if (
-                            state.data[this.options.field_map.product].data.id === widget_product_id
-                        ) {
-                            new_state_id = state.id;
+                    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;
                         }
                     }
-                    var search_record = _.find(this.search_data, {id: widget_product_id});
-                    var new_search_record = _.extend({}, search_record, {__id: new_state_id});
-                    var search_record_index = widget_destroyed.$el.index();
-                    defs.push(
-                        this.appendSearchRecords(
-                            [new_search_record],
-                            false,
-                            true,
-                            search_record_index
-                        )[0]
-                    );
                 }
-            }
 
-            _.invoke(to_destroy, "destroy");
-            return $.when(defs);
-        },
+                return to_destroy;
+            },
 
-        /**
-         * 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.
-         *
-         * @private
-         * @param {Object} old_states
-         * @returns {Deferred}
-         */
-        _updateStateRecords: function (old_states) {
-
-            // States to remove
-            var states_to_destroy = [];
-            for (var index in old_states) {
-                var old_state = old_states[index];
-                var found = false;
-                for (var e in this.state.data) {
-                    var current_state = this.state.data[e];
-                    if (current_state.id === old_state.id) {
-                        found = true;
-                        break;
-                    }
-                }
-                if (!found) {
-                    states_to_destroy.push(old_state);
-                }
-            }
-
-            this.state.data = _.compact(this.state.data);
-            this._removeRecords(states_to_destroy, this.state.data);
-
-            // Records to Update or Create
-            var defs = [];
-            var to_destroy = [];
-            for (var index in this.state.data) {
-                var state = this.state.data[index];
-                var exists = false;
-                var search_record_index = -1;
-                var search_record = false;
-                for (var e = this.widgets.length-1; e>=0; --e) {
-                    var widget = this.widgets[e];
-                    if (!widget || !widget.state) {
-
-                        // Already processed widget (deleted)
+            /**
+             * We need check current states to ensure that doesn't exists duplications,
+             * update the existing and add the new ones.
+             *
+             * @private
+             * @returns {Array}
+             */
+            _processCurrentStates: function(old_states) {
+                var to_destroy = this._processStatesToDestroy(old_states);
+                // Records to Update or Create
+                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;
                     }
-                    if (widget.state.id === state.id) {
-                        widget.recreate(state);
-                        exists = true;
-                        break;
-                    } else if (
-                        widget.recordSearch.id === state.data[this.options.field_map.product].data.id
-                    ) {
+                    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;
+                        }
 
-                        // Is a new record (a replace for pure virtual)
-                        search_record_index = widget.$el.index();
-                        search_record = widget.recordSearch;
-                        var model = this.getParent().getBasicFieldParams().model;
                         var record = model.get(widget.state.id);
-                        model.updateRecordContext(state.id, {
-                            lazy_qty: record.context.lazy_qty || 0,
+                        // 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;
+                        } else if (
+                            widget.state &&
+                            !model.isPureVirtual(widget.state.id) &&
+                            widget.recordSearch.id ===
+                                state.data[this.options.field_map.product].data.id
+                        ) {
+                            search_record = widget.recordSearch;
+                            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;
+                            }
+                        }
+                    }
+
+                    // Add to create the new record
+                    if (!exists && search_record_index) {
+                        var new_search_record = _.extend({}, search_record, {
+                            __id: state.id,
                         });
+                        to_add.push([
+                            [new_search_record],
+                            {
+                                no_attach_widgets: true,
+                                no_process_records: true,
+                                position: search_record_index,
+                            },
+                        ]);
+                    }
+                }
+                return [to_add.reverse(), to_destroy];
+            },
+
+            /**
+             * 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;
                     }
 
-                    // Remove "pure virtual" records that have the same product that the new record
+                    // 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 (
-                        widget.is_virtual &&
-                        widget.state.data[this.options.field_map.product].data.id === state.data[this.options.field_map.product].data.id
+                        need_virtual &&
+                        products_done.indexOf(search_record.id) === -1
                     ) {
-                        to_destroy.push(widget);
-                        delete this.widgets[e];
-                    }
-                }
-
-                this.state.data = _.compact(this.state.data);
-
-                // Need add a new one?
-                if (!exists && search_record_index !== -1) {
-                    var new_search_record = _.extend({}, search_record, {__id: state.id});
-                    defs.push(this.appendSearchRecords([new_search_record], false, true, search_record_index)[0]);
-                }
-            }
-
-            _.invoke(to_destroy, "destroy");
-            return $.when(defs);
-        },
-
-        /**
-         * @override
-         */
-        _renderView: function () {
-            var self = this;
-            var oldWidgets = _.compact(this.widgets);
-            this.widgets = [];
-            this.$recordsContainer = $("<DIV/>", {
-                class: "w-100 row",
-            });
-            this.$extraButtonsContainer = $(qweb.render("One2ManyProductPicker.ExtraButtons"));
-            this.$btnLoadMore = this.$extraButtonsContainer.find("#productPickerLoadMore");
-            this.search_data = this._sort_search_data(this.search_data);
-            return $.Deferred(function (d) {
-                var defs = self.appendSearchRecords(self.search_data, true);
-                defs[0].then(function () {
-                    _.invoke(oldWidgets, "destroy");
-                    self.$el.empty();
-                    self.$el.append(self.$recordsContainer);
-                    self.$el.append(self.$extraButtonsContainer);
-                    self.showLoadMore(self.last_search_data_count >= self.options.records_per_page);
-                    if (self._isInDom) {
-                        _.invoke(self.widgets, "on_attach_callback");
-                    }
-                    d.resolve(defs[1]);
-                });
-            });
-        },
-
-        /**
-         * @param {Array} datas
-         * @returns {Array}
-         */
-        _sort_search_data: function (datas) {
-            if (this.search_group.name === "main_lines") {
-                var field_name = this.options.field_map.product;
-                for (var index_datas in datas) {
-                    var data = datas[index_datas];
-
-                    for (var index_state in this.state.data) {
-                        var state_data = this.state.data[index_state];
-                        if (state_data.data[field_name].res_id === data.id) {
-                            data._order_value = state_data.res_id;
+                        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);
                         }
                     }
                 }
-                var sorted_datas = _.chain(datas).sortBy('_order_value').map(function(item) {
-                    return _.omit(item, '_order_value');
-                }).value().reverse();
-                return sorted_datas;
-            }
-            return datas;
-        },
+                return to_add;
+            },
 
-        /**
-         * Compare search results with current lines.
-         * Link a current state with the 'search record'.
-         *
-         * @private
-         * @param {Array[Object]} results
-         * @returns {Array[Object]}
-         */
-        _processSearchRecords: function (results) {
-            var field_name = this.options.field_map.product;
-            var records = [];
-            for (var index in results) {
-                var record_search = results[index];
-                var state_data_found = false;
+            /**
+             * 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) {
+                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]);
+                }
 
-                for (var index_data in this.state.data) {
-                    var state_record = this.state.data[index_data];
-                    var field = state_record.data[field_name];
-                    if (
-                        (typeof field === "object" && field.data.id === record_search.id) ||
-                        field === record_search.id
-                    ) {
-                        records.push(
-                            _.extend({}, record_search, {
-                                __id: state_record.id,
-                            })
-                        );
-                        state_data_found = true;
+                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() {
+                _.invoke(_.compact(this.widgets), "destroy");
+                this.widgets = [];
+                if (this.$recordsContainer) {
+                    this.$recordsContainer.empty();
+                }
+            },
+
+            /**
+             * @override
+             */
+            _renderView: function() {
+                _.invoke(_.compact(this.widgets), "destroy");
+                this.widgets = [];
+                this.$recordsContainer = $("<DIV/>", {
+                    class: "w-100 row",
+                });
+                this.$extraButtonsContainer = $(
+                    qweb.render("One2ManyProductPicker.ExtraButtons")
+                );
+                this.$btnLoadMore = this.$extraButtonsContainer.find(
+                    "#productPickerLoadMore"
+                );
+                // This.search_data = this._sort_search_data(this.search_data);
+                this.$el.empty();
+                this.$el.append(this.$recordsContainer);
+                this.$el.append(this.$extraButtonsContainer);
+                // This.showLoadMore(
+                //     this.last_search_data_count >= this.options.records_per_page
+                // );
+                return this._super.apply(this, arguments);
+            },
+
+            /**
+             * @private
+             * @param {Array} datas
+             * @returns {Array}
+             */
+            _sort_search_data: function(datas) {
+                if (this.search_group.name === "main_lines") {
+                    var field_name = this.options.field_map.product;
+                    for (var index_datas in datas) {
+                        var data = datas[index_datas];
+
+                        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
+                            ) {
+                                data._order_value = state_data.res_id;
+                            }
+                        }
+                    }
+                    var sorted_datas = _.chain(datas)
+                        .sortBy("_order_value")
+                        .map(function(item) {
+                            return _.omit(item, "_order_value");
+                        })
+                        .value()
+                        .reverse();
+                    return sorted_datas;
+                }
+                return datas;
+            },
+
+            /**
+             * Compare search results with current lines.
+             * Link a current state with the 'search record'.
+             *
+             * @private
+             * @param {Array} results
+             * @returns {Array}
+             */
+            _processSearchRecords: function(results) {
+                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 (
+                        (typeof field_value === "object" &&
+                            field_value.data.id === record_search.id) ||
+                        field_value === record_search.id
+                    );
+                };
+
+                for (var index in results) {
+                    var record_search = results[index];
+
+                    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 (
+                            !this._isValidLineState(state_record) ||
+                            !test_values(field_value, record_search)
+                        ) {
+                            continue;
+                        }
+                        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);
+                        }
+                    }
+                    if (widget_created) {
+                        continue;
+                    }
+
+                    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"));
+                        }
                     }
                 }
-                if (!state_data_found) {
-                    records.push(record_search);
+
+                return {
+                    records: records,
+                    states: states,
+                };
+            },
+
+            /**
+             * @private
+             * @param {Int} id
+             * @returns {Object}
+             */
+            _getRecordDataById: function(id) {
+                for (var index in this.state.data) {
+                    var record = this.state.data[index];
+                    if (record.id === id) {
+                        return record;
+                    }
                 }
-            }
+                return false;
+            },
 
-            return records;
-        },
+            /**
+             * @private
+             * @param {Object} search_record
+             * @returns {Object}
+             */
+            _getRecordOptions: function(search_record) {
+                return _.extend({}, this.recordOptions, {
+                    fieldMap: this.options.field_map,
+                    searchRecord: search_record,
+                    basicFieldParams: this.getParent().getBasicFieldParams(),
+                    currencyField: this.options.currency_field,
+                    readOnlyMode: this.mode === "readonly",
+                    showDiscount: this.options.show_discount,
+                    editDiscount: this.options.edit_discount,
+                    editPrice: this.options.edit_price,
+                    autoSave: this.options.auto_save,
+                    ignoreWarning: this.options.ignore_warning,
+                });
+            },
 
-        /**
-         * @private
-         * @param {Int} id
-         * @returns {Object}
-         */
-        _getRecordDataById: function (id) {
-            for (var index in this.state.data) {
-                var record = this.state.data[index];
-                if (record.id === id) {
-                    return record;
-                }
-            }
-            return false;
-        },
+            /**
+             * Generates the 'Product Card' per record.
+             *
+             * @private
+             * @param {Array} search_records
+             * @param {Object} options
+             * @returns {Array}
+             */
+            _appendSearchRecords: function(search_records, options) {
+                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
+                    );
+                    self.widgets.push(ProductPickerRecord);
 
-        /**
-         * @private
-         * @param {Object} search_record
-         * @returns {Object}
-         */
-        _getRecordOptions: function (search_record) {
-            return _.extend({}, this.recordOptions, {
-                fieldMap: this.options.field_map,
-                searchRecord: search_record,
-                basicFieldParams: this.getParent().getBasicFieldParams(),
-                currencyField: this.options.currency_field,
-                readOnlyMode: this.mode === "readonly",
-                showDiscount: this.options.show_discount,
-                editDiscount: this.options.edit_discount,
-                editPrice: this.options.edit_price,
-                autoSave: this.options.auto_save,
-                ignoreWarning: this.options.ignore_warning,
-            });
-        },
-
-        /**
-         * Generates the 'Product Card' per record.
-         *
-         * @private
-         * @param {Array[Object]} search_records
-         * @param {Boolean} no_process_records
-         * @param {Number} position
-         */
-        _appendSearchRecords: function (search_records, no_process_records, position) {
-            var self = this;
-            var processed_records =
-                no_process_records?search_records:this._processSearchRecords(search_records);
-            _.each(processed_records, function (search_record) {
-                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
-                );
-                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) {
-                    var defVirtualState = ProductPickerRecord.generateVirtualState();
-                    if (defVirtualState.state() === "pending") {
+                    // 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) {
+                        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
-                // the search data. Using search data instead of waiting for
-                // simulated state gives a low FCP time.
-                var def = ProductPickerRecord.appendTo(self.$recordsContainer)
-                    .then(function (widget, widget_position) {
-                        if (typeof widget_position !== "undefined") {
-                            var $elm = this.$el.find("> div > div:nth("+widget_position+")");
-                            widget.$el.insertAfter($elm);
-                        }
-                    }.bind(self, ProductPickerRecord, position));
-                if (def.state() === "pending") {
+                    // 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.
+                    var def = ProductPickerRecord.appendTo(self.$recordsContainer).then(
+                        function(widget, widget_position) {
+                            if (typeof widget_position !== "undefined") {
+                                var $elm = self.$el.find(
+                                    `[data-card-id="${widget_position}"]:first`
+                                );
+                                widget.$el.insertAfter($elm);
+                            }
+                        }.bind(self, ProductPickerRecord, options.position)
+                    );
                     self.defs.push(def);
-                }
-            });
-        },
-
-        /**
-         * @param {Boolean} status
-         */
-        showLoadMore: function (status) {
-            this.$btnLoadMore.toggleClass("d-none", !status);
-        },
-
-        /**
-         * Append search records to the view
-         *
-         * @param {Array[Object]} search_records
-         * @param {Boolean} no_attach_widgets
-         * @param {Boolean} no_process_records
-         * @param {Number} position
-         * @returns {Array[Deferred]}
-         */
-        appendSearchRecords: function (search_records, no_attach_widgets, no_process_records, position) {
-            var self = this;
-            this.trigger_up("loading_records");
-            this.defs = [];
-            this.defsVirtualState = [];
-            var cur_widget_index = this.widgets.length;
-            this._appendSearchRecords(search_records, no_process_records, position);
-            var defs = this.defs;
-            delete this.defs;
-            var defsVirtualState = this.defsVirtualState;
-            delete this.defsVirtualState;
-            return [
-                $.when.apply($, defs).then(function () {
-                    if (!no_attach_widgets && self._isInDom) {
-                        var new_widgets = self.widgets.slice(cur_widget_index);
-                        _.invoke(new_widgets, "on_attach_callback");
-                    }
-                }),
-                $.when.apply($, defsVirtualState).then(function () {
-                    self.trigger_up("loading_records", {finished:true});
-                }),
-            ];
-        },
-
-        /**
-         * @private
-         */
-        _onClickLoadMore: function () {
-            this.$btnLoadMore.attr("disabled", true);
-            this.trigger_up("load_more");
-            this._loadMoreWorking = true;
-        },
-
-        /**
-         * Do card flip
-         *
-         * @param {Integer} index
-         */
-        doWidgetFlip: function (index) {
-            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");
-            } else {
-                var self = widget;
-                widget.defs = [];
-                widget._processWidgetFields(widget.$back);
-                widget._processWidgets(widget.$back);
-                widget._processDynamicFields();
-                $.when(widget.defs).then(function () {
-                    $actived_card.removeClass("active");
-                    $actived_card.find('.oe_flip_card_front').removeClass("d-none");
-                    self.$card.addClass("active");
-                    setTimeout(function () {
-                        self.$('.oe_flip_card_front').addClass("d-none");
-                    }, 200);
                 });
-            }
-        },
 
-        /**
-         * Handle card flip.
-         * Used to create/update the record
-         *
-         * @param {CustomEvent} evt
-         */
-        _onRecordFlip: function (evt) {
-            var prev_widget_index = evt.data.prev_widget_index;
-            if (typeof prev_widget_index !== "undefined") {
-                // Only check 'back' widgets so there is where the form was created
-                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) {
-                        widget.controller.auto();
-                    }
+                return records_to_add;
+            },
+
+            /**
+             * @param {Boolean} status
+             */
+            showLoadMore: function(status) {
+                this.$btnLoadMore.toggleClass("d-none", !status);
+            },
+
+            /**
+             * Append search records to the view
+             *
+             * @param {Array} search_records
+             * @param {Object} options
+             * @returns {Array}
+             */
+            appendSearchRecords: function(search_records, options = {}) {
+                var self = this;
+                if (options.clear) {
+                    this.clearRecords();
                 }
-            }
-        }
+                this.trigger_up("loading_records");
+                this.defs = [];
+                this.defsVirtualState = [];
+                var cur_widget_index = this.widgets.length;
+                this._appendSearchRecords(search_records, options);
 
-    });
+                var defs = this.defs;
+                delete this.defs;
+                var defsVirtualState = this.defsVirtualState;
+                delete this.defsVirtualState;
+                return [
+                    $.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;
+                    }),
+                    $.when(defsVirtualState).then(function() {
+                        self.trigger_up("loading_records", {finished: true});
+                    }),
+                ];
+            },
 
-    return One2ManyProductPickerRenderer;
-});
+            /**
+             * @private
+             */
+            _onClickLoadMore: function() {
+                this.$btnLoadMore.attr("disabled", true);
+                this.trigger_up("load_more");
+            },
+
+            /**
+             * Do card flip
+             *
+             * @param {Integer} index
+             */
+            doWidgetFlip: function(index) {
+                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");
+                } else {
+                    widget.defs = [];
+                    widget._processWidgetFields(widget.$back);
+                    widget._processWidgets(widget.$back);
+                    widget._processDynamicFields();
+                    $.when(widget.defs).then(function() {
+                        $actived_card.removeClass("active");
+                        $actived_card.find(".oe_flip_card_front").removeClass("d-none");
+                        widget.$card.addClass("active");
+                        setTimeout(function() {
+                            widget.$(".oe_flip_card_front").addClass("d-none");
+                        }, 200);
+                    });
+                }
+            },
+
+            /**
+             * Handle card flip.
+             * Used to create/update the record
+             *
+             * @private
+             * @param {CustomEvent} evt
+             */
+            _onRecordFlip: function(evt) {
+                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 (var index in this.widgets[prev_widget_index].widgets.back) {
+                        var widget = this.widgets[prev_widget_index].widgets.back[
+                            index
+                        ];
+                        if (
+                            widget.controller &&
+                            widget.className ===
+                            "oe_one2many_product_picker_quick_create"
+                        ) {
+                            widget.controller.auto();
+                        }
+                    }
+                    this.widgets[prev_widget_index].recreate();
+                }
+            },
+        });
+
+        return One2ManyProductPickerRenderer;
+    }
+);
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 45c1c74fa..000000000
--- a/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js
+++ /dev/null
@@ -1,33 +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;
-            var self = this;
-            return this._super.apply(this, arguments).then(function () {
-                if (self.renderer && !_.isEmpty(self.renderer.allFieldWidgets)) {
-                    var product_picker_widgets = _.filter(
-                        self.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 0503089a2..ac01da85c 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
@@ -1,37 +1,65 @@
 // 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.BasicModel", function (require) {
+odoo.define("web_widget_one2many_product_picker.BasicModel", function(require) {
     "use strict";
 
     var BasicModel = require("web.BasicModel");
+    var FieldOne2ManyProductPicker = require("web_widget_one2many_product_picker.FieldOne2ManyProductPicker");
 
     BasicModel.include({
-
         /**
-         * @param {Number/String} handle
-         * @param {Object} context
+         * @override
          */
-        updateRecordContext: function (handle, context) {
-            this.localData[handle].context = _.extend(
-                {},
-                this.localData[handle].context,
-                context);
+        init: function() {
+            this._super.apply(this, arguments);
         },
 
         /**
-         * @param {Number/String} id
+         * This is necessary because 'pure virtual' records
+         * can be destroyed at any time.
+         *
+         * @param {String} id
          * @returns {Boolean}
          */
-        isPureVirtual: function (id) {
+        exists: function(id) {
+            return !_.isEmpty(this.localData[id]);
+        },
+
+        /**
+         * @param {String} id
+         * @param {Object} context
+         */
+        updateRecordContext: function(id, context) {
+            this.localData[id].context = _.extend(
+                {},
+                this.localData[id].context,
+                context
+            );
+        },
+
+        /**
+         * @param {String} id
+         * @returns {Boolean}
+         */
+        isSaving: function(id) {
             var data = this.localData[id];
             return data._virtual || false;
         },
 
         /**
-         * @param {Number/String} id
+         * @param {String} id
+         * @returns {Boolean}
+         */
+        isPureVirtual: function(id) {
+            var data = this.localData[id];
+            return data._virtual || false;
+        },
+
+        /**
+         * @param {String} id
          * @param {Boolean} status
          */
-        setPureVirtual: function (id, status) {
+        setPureVirtual: function(id, status) {
             var data = this.localData[id];
             if (status) {
                 data._virtual = true;
@@ -41,47 +69,242 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function (require)
         },
 
         /**
-         * @param {Number/String} id
+         * @param {String} id
          */
-        unsetDirty: function (id) {
+        unsetDirty: function(id) {
             var data = this.localData[id];
             data._isDirty = false;
-            this._visitChildren(data, function (r) {
+            this._visitChildren(data, function(r) {
                 r._isDirty = false;
             });
         },
 
-        removeVirtualRecord: function (id) {
+        /**
+         * 'Pure virtual' records are not used by other
+         * elements so can be removed safesly
+         *
+         * @param {String} id
+         * @returns {Boolean}
+         */
+        removeVirtualRecord: function(id) {
             if (!this.isPureVirtual(id)) {
                 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 (let remove_id of to_remove) {
+            for (var remove_id of to_remove) {
                 this.removeLine(remove_id);
                 delete this.localData[remove_id];
             }
+            return true;
         },
 
         /**
-         * Generates a virtual records without link it
+         * This is a cloned method from Odoo framework.
+         * Virtual records are processed in two parts,
+         * this is the second part and here we trigger onchange
+         * process.
+         *
+         * @param {Object} record
+         * @param {Object} params
+         * @returns {Deferred}
+         */
+        _makeDefaultRecordNoDatapoint: function(record, params) {
+            var self = this;
+
+            var targetView = params.viewType;
+            var fieldsInfo = params.fieldsInfo;
+            var fieldNames = Object.keys(fieldsInfo[targetView]);
+            var fields_key = _.without(fieldNames, "__last_update");
+
+            // Fields that are present in the originating view, that need to be initialized
+            // Hence preventing their value to crash when getting back to the originating view
+            var parentRecord =
+                params.parentID && this.localData[params.parentID].type === "list"
+                    ? this.localData[params.parentID]
+                    : null;
+
+            if (parentRecord && parentRecord.viewType in parentRecord.fieldsInfo) {
+                var originView = parentRecord.viewType;
+                fieldNames = _.union(
+                    fieldNames,
+                    Object.keys(parentRecord.fieldsInfo[originView])
+                );
+            }
+
+            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 $.Deferred().reject();
+                }
+
+                // We want to overwrite the default value of the handle field (if any),
+                // in order for new lines to be added at the correct position.
+                // -> This is a rare case where the defaul_get from the server
+                //    will be ignored by the view for a certain field (usually "sequence").
+
+                var overrideDefaultFields = self._computeOverrideDefaultFields(
+                    params.parentID,
+                    params.position
+                );
+
+                if (overrideDefaultFields) {
+                    result[overrideDefaultFields.field] = overrideDefaultFields.value;
+                }
+
+                return self
+                    .applyDefaultValues(record.id, result, {fieldNames: fieldNames})
+                    .then(function() {
+                        if (!self.exists(record.id)) {
+                            return $.Deferred().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();
+                                }
+                            }
+                            def.resolve();
+                        };
+                        self._performOnChange(record, fields_key)
+                            .then(always)
+                            .always(always);
+                        return def;
+                    })
+                    .then(function() {
+                        if (!self.exists(record.id)) {
+                            return $.Deferred().reject();
+                        }
+                        return self._fetchRelationalData(record);
+                    })
+                    .then(function() {
+                        if (!self.exists(record.id)) {
+                            return $.Deferred().reject();
+                        }
+                        return self._postprocess(record);
+                    })
+                    .then(function() {
+                        if (!self.exists(record.id)) {
+                            return $.Deferred().reject();
+                        }
+                        // Save initial changes, so they can be restored later,
+                        // if we need to discard.
+                        self.save(record.id, {savePoint: true});
+
+                        return record.id;
+                    });
+            });
+        },
+
+        /**
+         * Virtual records are processed in two parts,
+         * this is the first part and here we create
+         * the state (without aditional process)
+         *
+         * @param {String} listID
+         * @param {Object} options
+         * @returns {Object}
+         */
+        createVirtualDatapoint: function(listID, options) {
+            var list = this.localData[listID];
+            var context = _.extend({}, this._getContext(list), options.context);
+
+            var position = options ? options.position : "top";
+            var params = {
+                context: context,
+                fields: list.fields,
+                fieldsInfo: list.fieldsInfo,
+                parentID: list.id,
+                position: position,
+                viewType: list.viewType,
+                allowWarning: true,
+                doNotSetDirty: true,
+                postonchange_values: options.onchange_values,
+            };
+
+            var targetView = params.viewType;
+            var fields = params.fields;
+            var fieldsInfo = params.fieldsInfo;
+
+            // Fields that are present in the originating view, that need to be initialized
+            // Hence preventing their value to crash when getting back to the originating view
+            var parentRecord =
+                params.parentID && this.localData[params.parentID].type === "list"
+                    ? this.localData[params.parentID]
+                    : null;
+
+            if (parentRecord && parentRecord.viewType in parentRecord.fieldsInfo) {
+                var originView = parentRecord.viewType;
+                fieldsInfo[targetView] = _.defaults(
+                    {},
+                    fieldsInfo[targetView],
+                    parentRecord.fieldsInfo[originView]
+                );
+                fields = _.defaults({}, fields, parentRecord.fields);
+            }
+
+            var record = this._makeDataPoint({
+                modelName: list.model,
+                fields: fields,
+                fieldsInfo: fieldsInfo,
+                context: params.context,
+                parentID: params.parentID,
+                res_ids: params.res_ids,
+                viewType: targetView,
+            });
+            this.setPureVirtual(record.id, true);
+            this.updateRecordContext(record.id, {
+                ignore_warning: true,
+                not_onchange: true, // To know is the record has the initial onchange applied
+                shadow: true, // To avoid show the loading backdrop
+            });
+
+            return {
+                record: record,
+                params: params,
+            };
+        },
+
+        /**
+         * Generates a virtual records without hard-link to any model.
          *
          * @param {Integer/String} listID
          * @param {Object} options
          * @returns {Deferred}
          */
-        createVirtualRecord: function (listID, options) {
+        createVirtualRecord: function(listID, options) {
             var self = this;
             var list = this.localData[listID];
-            var context = _.extend({}, this._getContext(list), options.context);
+            var context = _.extend(
+                {shadow: true},
+                this._getContext(list),
+                options.context
+            );
 
-            var position = options?options.position:'top';
+            var position = options ? options.position : "top";
             var params = {
                 context: context,
                 fields: list.fields,
@@ -93,48 +316,276 @@ odoo.define("web_widget_one2many_product_picker.BasicModel", function (require)
                 doNotSetDirty: true,
             };
 
-            return $.Deferred(function (d) {
-                self._makeDefaultRecord(list.model, params)
-                    .then(function (recordID) {
-                        self.setPureVirtual(recordID, true);
-                        self.updateRecordContext(recordID, {ignore_warning: true});
-                        if (options.data) {
-                            self._applyChange(
-                                recordID,
-                                options.data,
-                                params
-                            ).then(function () {
-                                d.resolve(self.get(recordID));
-                            });
-                        } else {
-                            d.resolve(self.get(recordID));
-                        }
-                    });
+            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,
+                };
             });
         },
 
         /**
          * Adds support to avoid show onchange warnings.
          * The implementation is a pure hack that clone
-         * the context and do a monkey path the
+         * the context and do a monkey patch to the
          * 'trigger_up' method.
          *
          * @override
          */
-        _performOnChange: function (record, fields, viewType) {
-            if (record.context && record.context.ignore_warning) {
+        _performOnChange: function(record) {
+            if (record && record.context) {
+                record.context.not_onchange = false;
                 var this_mp = _.clone(this);
-                var super_call = this.trigger_up;
-                this_mp.trigger_up = function (event_name, data) {
-                    if (event_name === 'warning' && data.type === "dialog") {
-                        return; // Do nothing
-                    }
-                    return super_call.apply(this, arguments);
-                }.bind(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);
         },
-    });
 
+        /**
+         * Because records can be removed at any time we
+         * need check if the record still existing.
+         * Necessary for 'instant search' feature.
+         *
+         * @override
+         */
+        _applyOnChange: function(values, record) {
+            if (!this.exists(record.id)) {
+                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) {
+            var record = this.localData[recordID];
+            return record && !_.isEmpty(record._changes);
+        },
+
+        /**
+         * @param {Object} model_fields
+         * @param {String} model
+         * @param {String} search_val
+         * @param {Array} domain
+         * @param {Array} fields
+         * @param {Object} orderby
+         * @param {String} operator
+         * @param {Number} limit
+         * @param {Number} offset
+         * @param {Object} context
+         * @returns {Deferred}
+         */
+        fetchNameSearchFull: function(
+            model_fields,
+            model,
+            search_val,
+            domain,
+            fields,
+            orderby,
+            operator,
+            limit,
+            offset,
+            context
+        ) {
+            var self = this;
+            return this._rpc({
+                model: model,
+                method: "name_search",
+                kwargs: {
+                    name: search_val,
+                    args: domain || [],
+                    operator: operator || "ilike",
+                    limit: this.limit,
+                    context: context || {},
+                },
+            }).then(function(results) {
+                var record_ids = results.map(function(item) {
+                    return item[0];
+                });
+                return self.fetchGenericRecords(
+                    model_fields,
+                    model,
+                    [["id", "in", record_ids]],
+                    fields,
+                    orderby,
+                    limit,
+                    offset,
+                    context
+                );
+            });
+        },
+
+        /**
+         * @param {Object} model_fields
+         * @param {String} model
+         * @param {Array} domain
+         * @param {Array} fields
+         * @param {Array} orderby
+         * @param {Number} limit
+         * @param {Number} offset
+         * @param {Object} context
+         * @returns {Deferred}
+         */
+        fetchGenericRecords: function(
+            model_fields,
+            model,
+            domain,
+            fields,
+            orderby,
+            limit,
+            offset,
+            context
+        ) {
+            var self = this;
+            return this._rpc({
+                model: model,
+                method: "search_read",
+                fields: fields,
+                domain: domain,
+                limit: limit,
+                offset: offset,
+                orderBy: orderby,
+                kwargs: {context: context},
+            }).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] = self._parseServerValue(
+                                model_fields[fieldName],
+                                record[fieldName]
+                            );
+                        }
+                    }
+                }
+                return result;
+            });
+        },
+
+        fetchModelFieldsInfo: function(model) {
+            return this._rpc({
+                model: model,
+                method: "fields_get",
+                args: [
+                    false,
+                    [
+                        "store",
+                        "searchable",
+                        "type",
+                        "string",
+                        "relation",
+                        "selection",
+                        "related",
+                    ],
+                ],
+                context: this.getSession().user_context,
+            });
+        },
+    });
 });
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..75c806503
--- /dev/null
+++ b/web_widget_one2many_product_picker/static/src/js/views/form_controller.js
@@ -0,0 +1,56 @@
+// 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;
+            this.renderer.invokeProductPicker(this.handle, "onDocumentSave", true);
+            return this._super.apply(this, arguments).always(function(changedFields) {
+                self.renderer.invokeProductPicker(self.handle, "onDocumentSave", false);
+                return changedFields;
+            });
+        },
+
+        /**
+         * 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..818349325
--- /dev/null
+++ b/web_widget_one2many_product_picker/static/src/js/views/form_renderer.js
@@ -0,0 +1,31 @@
+/* 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.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 54%
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 f10d35071..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,28 +1,26 @@
 /* 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";
 
     var core = require("web.core");
     var pyUtils = require("web.py_utils");
-    var BasicView = require("web.BasicView");
+    var FormView = require("web.FormView");
 
     var _t = core._t;
 
     // Add ref to _() -> _t() call
-    var PY_t = new py.PY_def.fromJSON(function () {
-        var 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
          */
-        _processField: function (viewType, field, attrs) {
-
+        _processField: function(viewType, field, attrs) {
             /**
              * We need process 'options' attribute to handle translations and
              * special replacements
@@ -31,15 +29,16 @@ odoo.define("web_widget_one2many_product_picker.BasicView", function (require) {
                 attrs.widget === "one2many_product_picker" &&
                 !_.isObject(attrs.options)
             ) {
-                attrs.options = attrs.options ? pyUtils.py_eval(attrs.options, {
-                    _: PY_t,
+                attrs.options = attrs.options
+                    ? pyUtils.py_eval(attrs.options, {
+                          _: PY_t,
 
-                    // Hack: This allow use $number_search out of an string
-                    number_search: '$number_search',
-                }) : {};
+                          // Hack: This allow use $number_search out of an string
+                          number_search: "$number_search",
+                      })
+                    : {};
             }
             return this._super(viewType, field, attrs);
         },
     });
-
 });
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 223b83029..0a14fbf82 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
@@ -1,6 +1,6 @@
 // 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.FieldOne2ManyProductPicker", function (
+odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", function(
     require
 ) {
     "use strict";
@@ -8,8 +8,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
     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 One2ManyProductPickerRenderer = require("web_widget_one2many_product_picker.One2ManyProductPickerRenderer");
     var tools = require("web_widget_one2many_product_picker.tools");
 
     var _t = core._t;
@@ -25,105 +24,169 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 
         events: _.extend({}, FieldOne2Many.prototype.events, {
             "click .dropdown-item": "_onClickSearchMode",
-            "click .oe_search_erase": "_onClickSearchEraser",
             "click .oe_btn_lines": "_onClickLines",
             "click .oe_btn_search_group": "_onClickSearchGroup",
             "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
-        search_read_fields: [
-            "id",
-            "display_name",
-        ],
+        // Product.product model fields
+        search_read_fields: ["id", "display_name", "uom_id"],
 
         /**
          * @override
          */
-        init: function (parent, name, record) {
+        init: function(parent) {
+            var self = this;
             this._super.apply(this, arguments);
 
-            // This is the parent state
-            this.state = record;
-
             // Use jquery 'extend' to have a 'deep' merge.
-            this.options = $.extend(true, this._getDefaultOptions(), this.attrs.options);
+            this.options = $.extend(
+                true,
+                this._getDefaultOptions(),
+                this.attrs.options
+            );
             if (!this.options.search) {
-                this.options.search = [[this.options.field_map.name, 'ilike', '$search']];
+                // Default search domain
+                this.options.search = [
+                    {
+                        name: _t("By Name"),
+                        domain: [],
+                        name_search_value: "$search",
+                    },
+                ];
             }
             this._searchMode = 0;
-            this._searchCategoryNames = [];
-            if (!(this.options.search[0] instanceof Array)) {
-                this._searchCategoryNames = _.map(this.options.search, "name");
-            }
+            this._searchCategoryNames = _.map(this.options.search, "name");
+            this._searchContext = {};
 
             // FIXME: Choose a better way to get the active controller or model objects
             this.parent_controller = parent.getParent();
             if (this.view) {
                 this._processGroups();
             }
+
+            this._currentSearchBatchID = 0;
+            this._saveChain = $.Deferred().resolve();
+
+            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(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(function(fields_info) {
+                    self._fieldsInfo = fields_info;
+                    if (self.isReadonly) {
+                        // Show Lines
+                        self._updateSearchContext(-1);
+                    } else {
+                        self._updateSearchContext(0);
+                    }
+                    self._searchContext.text = "";
+                });
         },
 
         /**
          * @override
          */
-        willStart: function () {
-            if (!this.view) {
-                return $.when();
-            }
+        start: function() {
+            var self = this;
+            return this._super.apply(this, arguments).then(function() {
+                self.$el.append(
+                    "<div class='loading'>" + _("SAVING DOCUMENT...") + "</div>"
+                );
+            });
+        },
 
-            // Uses to work with searchs, so we can mix properties with the user values.
-            this._searchContext = {
-                domain: this.mode === "readonly" ? this._getLinesDomain() : this._activeSearchGroup.domain,
-                text: false,
-                order: this.mode === "readonly" ? false : this._activeSearchGroup.order,
-                activeTest: true,
-            };
-            if (this.mode === "readonly") {
-                this._activeSearchGroup = {
-                    'name': 'main_lines',
-                };
-                this._searchContext.activeTest = false;
+        /**
+         * @override
+         */
+        isValid: function () {
+            let is_valid = this._super.apply(this, arguments);
+            if (is_valid) {
+                is_valid = this._ids_to_wait.length === 0;
             }
-            return $.when(this._super.apply(this, arguments), this._getSearchRecords());
+            return is_valid;
         },
 
         /**
          * Updates the lines counter badge
          */
-        updateBadgeLines: function () {
-            var records = this.parent_controller.model.get(this.state.id).data[this.name].data;
+        updateBadgeLines: function() {
+            var records = this.parent_controller.model.get(this.record.id).data[
+                this.name
+            ].data;
             this.$badgeLines.text(records.length);
         },
 
-        updateSubtotalPrice: function () {
+        updateSubtotalPrice: function() {
             if (!this.options.show_subtotal) {
                 return;
             }
             var prices = [];
             var field_map = this.options.field_map;
-            var records = this.parent_controller.model.get(this.state.id).data[this.name].data;
+            var records = this.parent_controller.model.get(this.record.id).data[
+                this.name
+            ].data;
             if (this.options.show_discount) {
-                prices = _.map(records, function (line) {
-                    return line.data[field_map.product_uom_qty] *
+                prices = _.map(records, function(line) {
+                    return (
+                        line.data[field_map.product_uom_qty] *
                         tools.priceReduce(
                             line.data[field_map.price_unit],
                             line.data[field_map.discount]
-                        );
+                        )
+                    );
                 });
             } else {
-                prices = _.map(records, function (line) {
+                prices = _.map(records, function(line) {
                     return (
                         line.data[field_map.product_uom_qty] *
                         line.data[field_map.price_unit]
@@ -131,14 +194,14 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 });
             }
             var total =
-                _.reduce(prices, function (a, b) {
+                _.reduce(prices, function(a, b) {
                     return a + b;
                 }) || 0;
             total = tools.monetary(
                 total,
                 this.value.fields[this.options.field_map.price_unit],
                 this.options.currency_field,
-                this.state.data
+                this.record.data
             );
             this.$totalZone.find(".total_price").html(total || 0.0);
         },
@@ -149,17 +212,19 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          *
          * @returns {Object}
          */
-        getBasicFieldParams: function () {
+        getBasicFieldParams: function() {
             return {
                 domain: this.record.getDomain(this.recordParams),
                 field: this.field,
                 parentID: this.value.id,
-                state: this.state,
+                record: this.record,
                 model: this.parent_controller.model,
                 fieldName: this.name,
                 recordData: this.recordData,
                 value: this.value,
-                relation_field: this.state.fields[this.name].relation_field,
+                relation_field: this.record.fields[this.name].relation_field,
+                current_batch_id: this._currentSearchBatchID,
+                controller: this.parent_controller, // TODO: Use events!
             };
         },
 
@@ -173,15 +238,26 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
         onDocumentConfirmChanges: function(fields, e) {
             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.doRenderSearchRecords();
+                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
          */
-        _getRenderer: function () {
+        _getRenderer: function() {
             return One2ManyProductPickerRenderer;
         },
 
@@ -190,25 +266,29 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          *
          * @private
          */
-        _processGroups: function () {
+        _processGroups: function() {
             this.searchGroups = [];
             var hasUserActive = false;
-            var groups = this.options.groups || [];
+            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;
                 }
+                if (!group_def.records_per_page) {
+                    group_def.records_per_page = 16;
+                }
                 this.searchGroups.push(group_def);
             }
 
             this.searchGroups.splice(0, 0, {
-                name: 'all',
+                name: "all",
                 string: _t("All"),
                 domain: this.options.all_domain,
                 order: false,
                 active: !hasUserActive,
+                records_per_page: 16,
             });
             this._activeSearchGroup = this.searchGroups[0];
         },
@@ -219,9 +299,9 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          *
          * @override
          */
-        _renderControlPanel: function () {
+        _renderControlPanel: function() {
             var self = this;
-            return this._super.apply(this, arguments).then(function () {
+            return this._super.apply(this, arguments).then(() => {
                 self.control_panel.update({
                     cp_content: {
                         $buttons: self.$buttons,
@@ -234,7 +314,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
         /**
          * @override
          */
-        _renderButtons: function () {
+        _renderButtons: function() {
             if (this.isReadonly) {
                 return this._super.apply(this, arguments);
             }
@@ -242,8 +322,8 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 qweb.render("One2ManyProductPicker.ControlPanelButtons", {
                     search_category_names: this._searchCategoryNames,
                     search_mode: this._searchMode,
-                }
-            ));
+                })
+            );
             this.$searchInput = this.$buttons.find(".oe_search_input");
             this.$groups = $(
                 qweb.render("One2ManyProductPicker.ControlPanelGroupButtons", {
@@ -259,38 +339,48 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
         /**
          * @override
          */
-        _render: function () {
+        _render: function() {
             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);
 
-            // Parent implementation can return 'undefined' :(
-            return (
-                def &&
-                def.then(function () {
-                    if (!self.$el.hasClass("oe_field_one2many_product_picker_maximized")) {
-                        self.$el.addClass("position-relative d-flex flex-column");
-                    }
-                    self._addMaximizeButton();
+                // Check maximize state
+                if (!this.$el.hasClass("oe_field_one2many_product_picker_maximized")) {
+                    this.$el.addClass("position-relative d-flex flex-column");
+                }
+
+                return this.doRenderSearchRecords({
+                    cleanup: false,
+                }).then(function() {
                     if (self.options.show_subtotal) {
                         self._addTotalsZone();
                     }
-                })
-            );
+                });
+            }
+
+            return def;
         },
 
         /**
          * @returns {Deferred}
          */
-        doRenderSearchRecords: function () {
+        doRenderSearchRecords: function(options) {
+            options = options || {};
             var self = this;
-            return $.Deferred(function (d) {
-                self._getSearchRecords().then(function () {
-                    self.renderer.$el.scrollTop(0);
-                    self.renderer._renderView().then(function (virtualStateDefs) {
-                        virtualStateDefs.then(function () {
-                            d.resolve();
-                        });
-                    });
+            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();
                 });
             });
         },
@@ -300,84 +390,97 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          *
          * @private
          */
-        _addMaximizeButton: function () {
-            this.$("#product_picker_maximize").remove();
-            this.$btnMaximize = $(qweb.render("One2ManyProductPicker.ButtonMaximize"));
-            this.$btnMaximize
-                .appendTo(this.$el)
-                .on("click", this._onClickMaximize.bind(this));
-        },
-
-        /**
-         * Inject the 'maximize' button
-         *
-         * @private
-         */
-        _addTotalsZone: function () {
+        _addTotalsZone: function() {
             this.$("#product_picker_total").remove();
             this.$totalZone = $(qweb.render("One2ManyProductPicker.Total"));
             this.$totalZone.appendTo(this.$el);
             this.updateSubtotalPrice();
         },
 
+        /**
+         * Replace placeholders for search
+         *   - $number_search -> Is a number
+         *   - $search -> Is a string
+         *
+         * @private
+         * @param {Number/String} value
+         * @param {String} format
+         * @returns {Number/String}
+         */
+        _getSearchValue: function(value, format) {
+            if (format === "$number_search") {
+                return Number(value);
+            } else if (typeof format === "string") {
+                return format.replace(/\$search/, value);
+            }
+            return value;
+        },
+
         /**
          * Obtain the linked records defined in the options.
          * If merge is true the current records aren't removed.
          *
          * @private
          * @param {Dictionary} options
-         * @param {Boolean} merge
          * @returns {Deferred}
          */
-        _getSearchRecords: function (options, merge) {
+        _getSearchRecords: function(options) {
             var self = this;
-            var arch = this.view.arch;
-            var field_name = this.options.field_map.product;
-            var field_info = this.view.fieldsInfo[arch.tag][field_name];
-            var model = this.view.viewFields[field_info.name].relation;
+            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
-            var domain = this._getFullSearchDomain();
+            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,
-                'active_test': this._searchContext.activeTest,
-            }, this.value.getContext());
+            var context = _.extend(
+                {
+                    active_search_group_name: this._activeSearchGroup.name,
+                    active_search_involved_fields: this._searchContext.involvedFields,
+                    active_test: this._searchContext.activeTest,
+                },
+                this.value.getContext()
+            );
+            var limit = soptions.limit || this._activeSearchGroup.records_per_page;
+            var offset = soptions.offset || 0;
 
-            return $.Deferred(function (d) {
-                var limit = soptions.limit || self.options.records_per_page;
-                var offset = soptions.offset || 0;
-                self._rpc({
-                    model: model,
-                    method: "search_read",
-                    fields: self.search_read_fields,
-                    domain: domain,
-                    limit: limit,
-                    offset: offset,
-                    orderBy: self._searchContext.order,
-                    kwargs: {context: context},
-                }).then(function (results) {
-                    if (merge) {
-                        self._searchRecords = _.union(
-                            self._searchRecords || [],
-                            results
-                        );
-                    } else {
-                        self._searchRecords = results;
-                    }
-                    self._lastSearchRecordsCount = results.length;
-                    self._searchOffset = offset + limit;
-                    if (self.renderer) {
-                        self.renderer.updateSearchData(
-                            self._searchRecords,
-                            self._lastSearchRecordsCount,
-                            self._activeSearchGroup
-                        );
-                    }
-                    d.resolve(results);
-                });
+            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
+                );
+            }
+
+            return task.then(function(results) {
+                self._searchOffset = offset + limit;
+                self.renderer.showLoadMore(limit && results.length === limit);
+                return results;
             });
         },
 
@@ -385,35 +488,46 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @param {MouseEvent} evt
          */
-        _onClickSearchGroup: function (evt) {
+        _onClickSearchGroup: function(evt) {
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
             var $btn = $(evt.target);
             var groupIndex = Number($btn.data("group")) || 0;
-            this._activeSearchGroup = this.searchGroups[groupIndex];
-            this._searchContext.domain = this._activeSearchGroup.domain;
-            this._searchContext.order = this._activeSearchGroup.order;
-            this._searchContext.activeTest = true;
-            this.doRenderSearchRecords();
-            this.$btnLines.removeClass("active");
-            $btn.parent().find(".active").removeClass("active");
+            this.showGroup(groupIndex);
+            $btn.parent()
+                .find(".active")
+                .removeClass("active");
             $btn.addClass("active");
         },
 
         /**
          * @private
          */
-        _onClickMaximize: function () {
+        _onClickMaximize: function() {
             this.$el.toggleClass(
                 "position-relative h-100 bg-white oe_field_one2many_product_picker_maximized"
             );
             if (this.$buttons) {
-                this.$buttons.find('.dropdown-toggle').popover('update');
+                this.$buttons.find(".dropdown-toggle").popover("update");
             }
         },
 
         /**
          * @private
          */
-        _onClickLines: function () {
+        _onClickClearInput: function() {
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
+            this._clearSearchInput();
+            this.doRenderSearchRecords({clenaup: true});
+        },
+
+        /**
+         * @private
+         */
+        _onClickLines: function() {
             this.showLines();
         },
 
@@ -421,15 +535,23 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @param {MouseEvent} ev
          */
-        _onClickSearchMode: function (ev) {
+        _onClickSearchMode: function(ev) {
+            if (!this.renderer.canBeUpdated()) {
+                return;
+            }
             var self = this;
             ev.preventDefault();
             var $target = $(ev.target);
             this._searchMode = $target.index();
-            $target.parent().children().removeClass('active');
-            $target.addClass('active');
-            this.doRenderSearchRecords().then(function () {
-                self.$searchInput.focus();
+            $target
+                .parent()
+                .children()
+                .removeClass("active");
+            $target.addClass("active");
+            this.doRenderSearchRecords({cleanup: true}).then(function() {
+                if (self.options.auto_focus) {
+                    self.$searchInput.focus();
+                }
             });
         },
 
@@ -437,10 +559,9 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @returns {Object}
          */
-        _getDefaultOptions: function () {
+        _getDefaultOptions: function() {
             return {
                 currency_field: "currency_id",
-                records_per_page: 16,
                 show_subtotal: true,
                 show_discount: false,
                 edit_discount: false,
@@ -457,6 +578,11 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                 auto_save: false,
                 ignore_warning: false,
                 all_domain: [],
+                instant_search: false,
+                groups: [],
+                default_group: false,
+                auto_focus: true,
+                auto_save_delay: 1500,
             };
         },
 
@@ -465,16 +591,14 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * This domain is used to get the records to display.
          *
          * @private
+         * @param {Object} search_mode
          * @returns {Array}
          */
-        _getFullSearchDomain: function () {
+        _getFullSearchDomain: function(search_mode) {
             this._searchContext.involvedFields = [];
             var domain = _.clone(this._searchContext.domain) || [];
             if (this._searchContext.text) {
-                var search_domain = this.options.search;
-                if (!(search_domain[0] instanceof Array)) {
-                    search_domain = search_domain[this._searchMode].domain;
-                }
+                var search_domain = search_mode.domain;
                 var involved_fields = [];
 
                 // Iterate domain triplets and logic operators
@@ -483,27 +607,16 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 
                     // Is a triplet
                     if (domain_cloned instanceof Array) {
-
                         // Replace right leaf with the current value of the search input
-                        if (domain_cloned[2] === "$number_search") {
-                            domain_cloned[2] = Number(this._searchContext.text);
-                            involved_fields.push({
-                                type: 'number',
-                                field: domain_cloned[0],
-                                oper: domain_cloned[1],
-                            });
-                        } else if (
-                            typeof domain_cloned[2] === "string" &&
-                            domain_cloned[2].includes("$search")
-                        ) {
-                            domain_cloned[2] = domain_cloned[2]
-                                .replace(/\$search/, this._searchContext.text);
-                            involved_fields.push({
-                                type: 'text',
-                                field: domain_cloned[0],
-                                oper: domain_cloned[1],
-                            });
-                        }
+                        domain_cloned[2] = this._getSearchValue(
+                            this._searchContext.text,
+                            domain_cloned[2]
+                        );
+                        involved_fields.push({
+                            type: "number",
+                            field: domain_cloned[0],
+                            oper: domain_cloned[1],
+                        });
                     }
                     domain.push(domain_cloned);
                 }
@@ -519,167 +632,338 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @returns {Array}
          */
-        _getLinesDomain: function () {
+        _getLinesDomain: function() {
             if (!this.view) {
                 return [];
             }
             var field_name = this.options.field_map.product;
-            var lines = this.parent_controller.model.get(this.state.id)
-                .data[this.name].data;
-            var ids = _.map(lines, function (line) {
-                return line.data[field_name].data.id;
-            });
+            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
+            var ids = _.chain(lines)
+                .filter(function(line) {
+                    return line.data[field_name] !== false;
+                })
+                .map(function(line) {
+                    return line.data[field_name].data.id;
+                })
+                .value();
             return [["id", "in", ids]];
         },
 
+        /**
+         * @param {Number} group_id
+         */
+        _updateSearchContext: function(group_id) {
+            if (group_id >= 0) {
+                this._activeSearchGroup = this.searchGroups[group_id];
+                this._searchContext.domain = this._activeSearchGroup.domain;
+                this._searchContext.order = this._activeSearchGroup.order;
+                this._searchContext.activeTest = this._activeSearchGroup.active_test;
+            } else {
+                this._activeSearchGroup = {
+                    name: "main_lines",
+                };
+                this._searchContext.domain = this._getLinesDomain();
+                this._searchContext.order = [{name: "sequence"}, {name: "id"}];
+                this._searchContext.activeTest = false;
+            }
+            if (this.renderer) {
+                this.renderer.updateSearchGroup(this._activeSearchGroup);
+            }
+        },
+
         /**
          * The lines are special data, so we need display it in a other way
          * that the search results. Use directy in-memory values.
          */
-        showLines: function () {
+        showLines: function() {
+            if (
+                !this.renderer.canBeUpdated() ||
+                this._activeSearchGroup.name === "main_lines"
+            ) {
+                return;
+            }
+            this._updateSearchContext(-1);
             this._clearSearchInput();
-            this.$btnLines.parent().find(".active").removeClass("active");
+            this.$btnLines
+                .parent()
+                .find(".active")
+                .removeClass("active");
             this.$btnLines.addClass("active");
-            this._activeSearchGroup = {
-                'name': 'main_lines',
-            };
-            this._searchContext.domain = this._getLinesDomain();
-            this._searchContext.order = [{'name': 'sequence'}, {'name': 'id'}];
-            this._searchContext.activeTest = false;
-            this.doRenderSearchRecords();
+            this.doRenderSearchRecords({clear: true});
+        },
+
+        /**
+         * @param {Number} group_id
+         */
+        showGroup: function(group_id) {
+            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({cleanup: true, clear: need_clear});
+            this.$btnLines.removeClass("active");
         },
 
         /**
          * @private
          */
-        _clearSearchInput: function () {
-            this.$searchInput.val("");
-            this._searchContext.text = "";
+        _clearSearchInput: function() {
+            if (this.$searchInput) {
+                this.$searchInput.val("");
+                this._searchContext.text = "";
+            }
         },
 
-        _onKeyPressSearch: function (evt) {
+        /**
+         * Odoo stop bubble of the event, but we need listen it.
+         *
+         * @override
+         */
+        _onKeydown: function(evt) {
             if (evt.keyCode === $.ui.keyCode.ENTER) {
+                // Do nothing
+                return;
+            }
+            return this._super.apply(this, arguments);
+        },
+
+        /**
+         * @private
+         * @param {KeyboardEvent} evt
+         */
+        _onKeyPressSearch: function(evt) {
+            if (evt.keyCode === $.ui.keyCode.ENTER && this.renderer.canBeUpdated()) {
                 var self = this;
                 this._searchContext.text = evt.target.value;
-                this.doRenderSearchRecords().then(function () {
-                    self.$searchInput.focus();
+                this.doRenderSearchRecords({cleanup: true}).then(function() {
+                    if (self.options.auto_focus) {
+                        self.$searchInput.focus();
+                    }
                 });
             }
         },
 
         /**
          * @private
+         * @param {InputEvent} evt
          */
-        _onClickSearchEraser: function () {
+        _onInputSearch: function(evt) {
+            if (this.options.instant_search && this.renderer.canBeUpdated()) {
+                this._searchContext.text = evt.target.value;
+                this._lazyRenderSearchRecords();
+            }
+        },
+
+        /**
+         * Auto select all content when user enters into fields with this
+         * widget.
+         *
+         * @private
+         */
+        _onFocusInSearch: function() {
             var self = this;
-            this._clearSearchInput();
-            this.doRenderSearchRecords().then(function () {
-                self.$searchInput.focus();
+            // 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(function() {
+                return self.$searchInput.select();
             });
+            this._onPauseAutoSave();
+        },
+
+        /**
+         * @private
+         */
+        _onFocusOutSearch: function() {
+            this._onResumeAutoSave();
         },
 
         /**
          * @private
          * @param {DropdownEvent} evt
          */
-        _onShowSearchDropdown: function (evt) {
-
+        _onShowSearchDropdown: function(evt) {
             // Workaround: This "ensures" a correct dropdown position
-            var offset = $(evt.currentTarget).find(".dropdown-toggle").parent().height();
-            _.defer(function () {
-                $(evt.currentTarget).find(".dropdown-menu")
+            var offset = $(evt.currentTarget)
+                .find(".dropdown-toggle")
+                .parent()
+                .height();
+            _.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.
          *
          * @private
          * @param {CustomEvent} evt
          */
-        _onCreateQuickRecord: function (evt) {
-            evt.stopPropagation();
+        _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) {
-                // Don't notifyChange because we already have all the onchange data for 1 qty
-                this._setValue(
+                model.updateRecordContext(evt.data.id, {need_save: true});
+                def = this._setValue(
                     {operation: "ADD", id: evt.data.id},
-                    {notifyChange: false}
-                ).then(function () {
-                    self.parent_controller.saveRecord(undefined, {stayInEdit: true}).then(function () {
-                        // When call 'saveRecord' with 'stayInEdit' the changes aren't confirmed so we force it
-                        var parent_record = model.get(self.parent_controller.handle);
-                        self.parent_controller.renderer.confirmChange(parent_record, parent_record.id, [self.name]).then(function() {
-                            // Second call to callback method.
-                            // We call two times because the first is for fast update
-                            // this second is the update after parent changes
-                            if (evt.data.callback) {
-                                evt.data.callback();
-                            }
-                        });
-                    });
-                    // First call to callback method
-                    if (evt.data.callback) {
-                        evt.data.callback();
-                    }
-                });
-            } else {
-                // This is used to know when need use 'yellow' color
-                this.parent_controller.model.updateRecordContext(evt.data.id, {
-                    product_picker_modified: true,
-                });
-                // This will trigger an "state" update
-                this._setValue({operation: "ADD", id: evt.data.id}).then(function () {
-                    if (evt.data.callback) {
-                        evt.data.callback();
-                    }
-                });
-            }
-        },
-
-        _doUpdateQuickRecord: function (id, data, callback) {
-            if (this.options.auto_save) {
-                var self = this;
-                var model = this.parent_controller.model;
-                this._setValue(
-                    {operation: "UPDATE", id: id, data: data},
                     {notifyChange: true}
-                ).then(function () {
-                    self.parent_controller.saveRecord(undefined, {stayInEdit: true}).then(function () {
-                        // When call 'saveRecord' with 'stayInEdit' the changes aren't confirmed so we force it
-                        var parent_record = model.get(self.parent_controller.handle);
-                        self.parent_controller.renderer.confirmChange(parent_record, parent_record.id, [self.name]).then(function() {
-                            // Second call to callback method.
-                            // We call two times because the first is for fast update
-                            // this second is the update after parent changes
-                            if (callback) {
-                                callback();
-                            }
-                        });
-                    });
-                    // First call to callback method
-                    if (callback) {
-                        callback();
+                ).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 is used to know when need use 'yellow' color
-                this.parent_controller.model.updateRecordContext(id, {
-                    product_picker_modified: true,
-                });
                 // This will trigger an "state" update
-                this._setValue(
-                    {operation: "UPDATE", id: id, data: data},
-                ).then(function () {
-                    if (callback) {
-                        callback();
+                def = this._setValue({operation: "ADD", id: 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;
         },
 
         /**
@@ -688,34 +972,122 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @param {CustomEevent} evt
          */
-        _onUpdateQuickRecord: function (evt) {
+        _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();
+            }
         },
 
         /**
          * Handle auto_save when remove a record
+         *
+         * @param {CustomEvent} evt
          */
-        _onListRecordRemove: function (evt) {
-            evt.stopPropagation();
+        _onListRecordRemove: function(evt) {
             var self = this;
-            this._setValue({operation: "DELETE", ids: [evt.data.id]}).then(function () {
-                if (self.options.auto_save) {
-                    self.parent_controller.saveRecord(undefined, {stayInEdit: true}).then(function () {
-                        if (evt.data.callback) {
-                            evt.data.callback();
+            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) {
+                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();
                         }
-                    });
-                } else if (evt.data.callback) {
-                    evt.data.callback();
-                }
-            });
+                    }
+                );
+            }
+            return def;
         },
 
         /**
          * @private
          */
-        _onUpdateSubtotal: function () {
+        _onUpdateSubtotal: function() {
             this.updateSubtotalPrice();
         },
 
@@ -725,18 +1097,15 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          *
          * @private
          */
-        _onLoadMore: function () {
+        _onLoadMore: function() {
+            var self = this;
             if (this._isLoading) {
                 return;
             }
-            var self = this;
-            this._getSearchRecords(
-                {
-                    offset: this._searchOffset,
-                },
-                true
-            ).then(function (records) {
-                self.renderer.appendSearchRecords(records);
+            this._getSearchRecords({
+                offset: this._searchOffset,
+            }).then(function(records) {
+                return self.renderer.appendSearchRecords(records);
             });
         },
 
@@ -744,7 +1113,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          * @param {CustomEvent} evt
          */
-        _onLoadingRecords: function (evt) {
+        _onLoadingRecords: function(evt) {
             this._isLoading = !evt.data.finished;
             this._blockControlPanel(this._isLoading);
             if (this.renderer) {
@@ -754,24 +1123,85 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 
         /**
          * @private
-         * @param {Boolean} block
          */
-        _blockControlPanel: function (block) {
-            if (this.$buttons) {
-                this.$buttons.find("input,button").attr("disabled", block);
+        _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
+         */
+        _blockControlPanel: function(block) {
+            if (this.$buttons) {
+                this.$buttons.find("button").attr("disabled", block);
+            }
+        },
 
         /**
          * Refresh lines count on every change.
          *
          * @override
          */
-
-        _setValue: function (value, options) {
+        _setValue: function() {
             var self = this;
-            return this._super.apply(this, arguments).then(function () {
+            return this._super.apply(this, arguments).then(function() {
                 self.updateBadgeLines();
                 self.updateSubtotalPrice();
             });
diff --git a/web_widget_one2many_product_picker/static/src/scss/main_variables.scss b/web_widget_one2many_product_picker/static/src/scss/main_variables.scss
index 159cf8450..96ab3f083 100644
--- a/web_widget_one2many_product_picker/static/src/scss/main_variables.scss
+++ b/web_widget_one2many_product_picker/static/src/scss/main_variables.scss
@@ -1,6 +1,6 @@
 $one2many-product-picker-grid-breakpoints: map-merge(
     $grid-breakpoints,
-  (
-    xxl: 1440px,
-  )
+    (
+        xxl: 1440px,
+    )
 );
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 6b997bd19..a65501695 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,21 @@
 .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 +32,17 @@
         }
     }
 
+    &.disabled {
+        .badge {
+            filter: opacity(0.6);
+        }
+        pointer-events: none;
+
+        > div.loading {
+            display: inline-block;
+        }
+    }
+
     > div {
         width: unset !important;
     }
@@ -30,6 +58,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%;
 
@@ -45,7 +86,10 @@
     }
 
     .oe_one2many_product_picker_view {
-        @include make-grid-columns($columns: 24, $breakpoints: $one2many-product-picker-grid-breakpoints);
+        @include make-grid-columns(
+            $columns: 24,
+            $breakpoints: $one2many-product-picker-grid-breakpoints
+        );
 
         overflow: auto;
 
@@ -54,16 +98,32 @@
             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;
             perspective: 1000px;
-            transition: top $one2many-product-picker-transition-3d-time, left $one2many-product-picker-transition-3d-time, width $one2many-product-picker-transition-3d-time, height $one2many-product-picker-transition-3d-time;
+            transition: top $one2many-product-picker-transition-3d-time,
+                left $one2many-product-picker-transition-3d-time,
+                width $one2many-product-picker-transition-3d-time,
+                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 {
@@ -77,11 +137,6 @@
                 .oe_flip_card_inner {
                     height: 100% !important;
                     box-shadow: 0px 0px 15px;
-                    .img-fluid {
-                        transform: translateY(-50%) !important;
-                        top: 50%;
-                        position: relative;
-                    }
                     .oe_one2many_product_picker_title {
                         font-size: 1.95rem !important;
                     }
@@ -93,11 +148,13 @@
                         }
                     }
 
-                    .o_field_widget, .oe_one2many_product_picker_form_buttons .btn {
+                    .o_field_widget,
+                    .oe_one2many_product_picker_form_buttons .btn {
                         transform: scale($one2many-product-picker-zoom-scale);
                         margin-bottom: 1.3em !important;
                     }
-                    .o_field_widget, .w-100 {
+                    .o_field_widget,
+                    .w-100 {
                         width: 100% / $one2many-product-picker-zoom-scale !important;
                     }
                 }
@@ -129,9 +186,19 @@
                 position: relative;
                 width: 100%;
                 height: $one2many-product-picker-card-min-height;
-                transition: transform $one2many-product-picker-transition-3d-time, height $one2many-product-picker-transition-3d-time/2 ease-in-out $one2many-product-picker-transition-3d-time/2;
+                transition: transform $one2many-product-picker-transition-3d-time,
+                    height $one2many-product-picker-transition-3d-time/2 ease-in-out
+                        $one2many-product-picker-transition-3d-time/2;
                 transform-style: preserve-3d;
 
+                .img-fluid {
+                    transform: translate(-50%, -50%) !important;
+                    top: 50%;
+                    left: 50%;
+                    z-index: -1;
+                    position: absolute;
+                }
+
                 .position-absolute {
                     z-index: 1;
                 }
@@ -140,8 +207,19 @@
                     font-size: 1rem;
                 }
 
+                .indicator_zones {
+                    display: inline-flex;
+                    flex-direction: column;
+                    max-width: 50%;
+                    align-items: flex-start;
+
+                    > span.badge {
+                        font-size: 0.8rem;
+                    }
+                }
+
                 .badge_price {
-                    top: 50%;
+                    top: 55%;
                     right: -2px;
                     transform: translateY(-50%);
                     display: grid;
@@ -180,8 +258,17 @@
                     .o_form_view.o_form_nosheet {
                         padding: $one2many-product-picker-card-form-padding;
 
-                        .o_field_widget .o_input_dropdown > input {
-                            height: unset;
+                        .o_field_widget {
+                            &:not(.widget_numeric_step) {
+                                max-width: 95%;
+                            }
+
+                            .o_input_dropdown > input {
+                                height: unset;
+                            }
+                        }
+                        .btn.w-100 {
+                            max-width: 95%;
                         }
                     }
                 }
@@ -201,6 +288,17 @@
                         top: 50%;
                         left: 0;
                         transform: translateY(-50%);
+                        width: 100%;
+
+                        .oe_one2many_product_picker_form_buttons {
+                            display: flex;
+                            padding: 0 3px;
+                            justify-content: center;
+
+                            .oe_record_remove {
+                                flex-grow: 1;
+                            }
+                        }
                     }
                 }
 
@@ -213,25 +311,46 @@
                 font-size: 0.95rem;
                 z-index: 0;
             }
-            .add_product, .product_qty, .price_unit {
+            .add_product,
+            .product_qty,
+            .price_unit {
                 cursor: pointer;
             }
         }
     }
-}
 
-.oe_product_picker_quick_modif_price {
-    width: 80%;
-    max-width: $one2many-product-picker-quick-modif-price-max-width;
-    margin: auto;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: 1px solid $border-color;
-    z-index: 55;
+    /** Extra tools **/
+    .icon-waiting {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
 
-    .oe_one2many_product_picker_form_buttons {
-        text-align: center;
+    /* 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 d3146f6de..b964b8f73 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
@@ -1,58 +1,81 @@
 <template>
-
     <t t-name="One2ManyProductPicker.ControlPanelButtons">
         <div class="text-center mx-auto">
             <div class="input-group">
                 <div class="input-group-prepend">
                     <t t-if="search_category_names">
-                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <button
+                            class="btn btn-secondary dropdown-toggle"
+                            type="button"
+                            data-toggle="dropdown"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                        >
                             <i class="fa fa-search" />
                         </button>
                         <div class="dropdown-menu">
                             <t t-foreach="search_category_names" t-as="name">
-                                <a t-attf-class="dropdown-item search_mode_option {{name_index == search_mode ? 'active' : ''}}" href="#" t-esc="name" />
+                                <a
+                                    t-attf-class="dropdown-item search_mode_option {{name_index == search_mode ? 'active' : ''}}"
+                                    href="#"
+                                    t-esc="name"
+                                />
                             </t>
                         </div>
                     </t>
                     <t t-else="">
-                        <button type="button" t-attf-class="btn btn-secondary btn-lg input-group-button">
+                        <button
+                            type="button"
+                            t-attf-class="btn btn-secondary btn-lg input-group-button"
+                        >
                             <i class="fa fa-search" />
                         </button>
                     </t>
                 </div>
-                <input type="search" class="form-control form-control-lg oe_search_input" placeholder="Search..." aria-label="Search..." aria-describedby="btnGroupAddon2" />
+                <input
+                    type="search"
+                    class="form-control form-control-lg oe_search_input"
+                    placeholder="Search..."
+                    aria-label="Search..."
+                    aria-describedby="btnGroupAddon2"
+                />
                 <div class="input-group-append">
-                    <button type="button" t-attf-class="btn btn-secondary btn-lg input-group-button oe_search_erase">
-                        <i class="fa fa-eraser" />
+                    <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'
+                    >
+                        <i class='fa fa-expand' />
                     </button>
                 </div>
             </div>
         </div>
     </t>
-
     <t t-name="One2ManyProductPicker.ControlPanelGroupButtons">
         <div class="oe_one2many_product_picker_groups">
             <div class="btn-group" role="group" aria-label="Groups">
                 <t t-foreach="groups" t-as="group">
-                    <button type="button" t-att-name="group.name" t-attf-class="btn btn-lg btn-secondary rounded-0 border-top-0 {{group.active &amp;&amp; 'active' || ''}} oe_btn_search_group" t-att-data-group="group_index">
+                    <button
+                        type="button"
+                        t-att-name="group.name"
+                        t-attf-class="btn btn-lg btn-secondary rounded-0 border-top-0 {{group.active &amp;&amp; 'active' || ''}} oe_btn_search_group"
+                        t-att-data-group="group_index"
+                    >
                         <t t-esc="group.string" />
                     </button>
                 </t>
             </div>
-
             <button type="button" class="btn btn-light btn-lg oe_btn_lines">
                 Lines
                 <span class="ml-1 badge badge-light">0</span>
             </button>
         </div>
     </t>
-
-    <t t-name="One2ManyProductPicker.ButtonMaximize">
-        <button if="product_picker_maximize" class='o_fullscreen btn btn-primary position-absolute border border-dark py-1 px-2'>
-            <i class='fa fa-expand' />
-        </button>
-    </t>
-
     <t t-name="One2ManyProductPicker.Total">
         <div id="product_picker_total" class="text-right">
             <h2>
@@ -61,62 +84,163 @@
             </h2>
         </div>
     </t>
-
     <t t-name="One2ManyProductPicker.ExtraButtons">
         <div class="w-100 row">
-            <button id="productPickerLoadMore" class="btn btn-lg btn-secondary m-auto d-none">Load More</button>
+            <button
+                id="productPickerLoadMore"
+                class="btn btn-lg btn-secondary m-auto d-none"
+            >Load More</button>
+        </div>
+    </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="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
+                        t-esc="state.data[field_map[field_uom]].data.display_name"
+                    /></span>
+            </t>
+            <t t-elif="!is_virtual">
+                <span
+                    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" /><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>
+        </div>
+    </t>
+    <t t-name="One2ManyProductPicker.PriceZone">
+        <div class="position-absolute m-0 text-left badge_price">
+            <t t-if="show_discount">
+                <span
+                    t-att-data-field="field_map.discount"
+                    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"
+                    data-esc="str(monetary('price_unit'))"
+                    class="badge font-weight-bold rounded-0 original_price"
+                />
+                <span
+                    t-if="has_onchange"
+                    class="badge badge-info price_unit font-weight-bold rounded-0 mt-1 p-2"
+                />
+            </t>
+            <t t-else="has_onchange">
+                <span
+                    t-att-data-field="field_map.price_unit"
+                    data-esc="str(monetary('price_unit'))"
+                    class="badge badge-info price_unit font-weight-bold rounded-0 mt-1 p-2"
+                />
+            </t>
+        </div>
+    </t>
+    <t t-name="One2ManyProductPicker.FlipCard.Front">
+        <div
+            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">
+                    <t t-call="One2ManyProductPicker.ActionButton" />
+                    <t t-call="One2ManyProductPicker.PriceZone" />
+                </div>
+                <span
+                    data-field="display_name"
+                    class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1"
+                    data-esc="obj.display_name"
+                />
+                <img
+                    alt=""
+                    class="img img-fluid"
+                    t-att-src="image(state.data[field_map.product].data.id,'image_medium')"
+                    t-att-data-src-alt="image(state.data[field_map.product].data.id,'image')"
+                />
+            </t>
+            <t t-else="">
+                <span
+                    class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1"
+                    t-esc="record_search.display_name"
+                />
+                <img
+                    alt=""
+                    class="img img-fluid"
+                    t-att-src="image(record_search.id,'image_medium')"
+                    t-att-data-src-alt="image(record_search.id,'image')"
+                />
+            </t>
+        </div>
+    </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"
+            />
         </div>
     </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">
-            <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
+            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' || ''}}">
+                <div class="loading">LOADING...</div>
                 <div class="oe_flip_card_inner text-center">
-                    <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 t-if="state">
-                            <t t-if="!is_virtual">
-                                <div class="safezone position-absolute m-0 pb-2 pr-2 text-left">
-                                    <span t-att-data-field="field_map.product_uom_qty" t-attf-data-esc="str({{field_map.product_uom_qty}}) + ' x ' + {{field_map.product_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" />
-                                </div>
-                            </t>
-                            <t t-elif="is_saving">
-                                <div class="safezone position-absolute m-0 pb-2 pr-2 text-left">
-                                    <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">1</span> x <t t-esc="state.data[field_map.product_uom].data.display_name"/></span>
-                                </div>
-                            </t>
-                            <t t-else="">
-                                <div class="safezone position-absolute m-0 pb-2 pr-2 text-left">
-                                    <span class="badge badge-primary font-weight-bold rounded-0 mt-0 px-2 py-3 add_product"><i class="fa fa-plus"></i> 1 <t t-esc="state.data[field_map.product_uom].data.display_name"/></span>
-                                </div>
-                            </t>
-                            <div class="position-absolute m-0 text-left badge_price">
-                                <t t-if="show_discount">
-                                    <span t-att-data-field="field_map.discount" t-attf-data-esc="'-' + str({{field_map.discount}}) +'%'" 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)}}'" class="badge font-weight-bold rounded-0 original_price" />
-                                    <span class="badge badge-info price_unit font-weight-bold rounded-0 mt-1 p-2" />
-                                </t>
-                                <t t-else="">
-                                    <span t-att-data-field="field_map.price_unit" t-attf-data-esc="'{{monetary('price_unit',true)}}'" class="badge badge-info price_unit font-weight-bold rounded-0 mt-1 p-2" />
-                                </t>
-                            </div>
-                            <span data-field="display_name" class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1" data-esc="display_name" />
-                            <img alt="" class="img img-fluid" t-att-src="image(state.data[field_map.product].data.id,'image_variant_medium')" t-att-data-src-alt="image(state.data[field_map.product].data.id,'image_variant_big')" />
-                        </t>
-                        <t t-else="">
-                            <span class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1" t-esc="record_search.display_name" />
-                            <img alt="" class="img img-fluid" t-att-src="image(record_search.id,'image_variant_medium')" t-att-data-src-alt="image(record_search.id,'image_variant_big')" />
-                        </t>
+                    <t t-call="One2ManyProductPicker.FlipCard.Front" />
+                    <t t-call="One2ManyProductPicker.FlipCard.Back" />
+                </div>
+            </div>
+        </div>
+    </t>
+    <t t-name="One2ManyProductPicker.QuickModifPrice.Modal">
+        <div
+            class="oe_product_picker_quick_modif_price modal fade"
+            id="One2ManyProductPickerQuickModifPrice"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="One2ManyProductPickerQuickModifPriceLabel"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <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="oe_flip_card_back">
-                        <widget name="product_picker_quick_create_form" t-att-compare-key="field_map.product_uom" />
+                    <div class="modal-footer">
+                        <button class="btn btn-success oe_record_change mr-auto d-none">
+                            <i class="fa fa-check" />
+                        </button>
+                        <button
+                            class="btn btn-warning oe_record_discard"
+                            data-dismiss="modal"
+                        >
+                            <i class="fa fa-times" />
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
     </t>
-
-    <t t-name="One2ManyProductPicker.QuickModifPricePopup">
-        <div class="oe_product_picker_quick_modif_price shadow" />
-    </t>
-
 </template>
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 be1b9d2b1..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
@@ -1,18 +1,25 @@
 <template>
-
     <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 mr-2"><i class="fa fa-check" /></button>
-                <button class="btn btn-warning oe_record_discard ml-2"><i class="fa fa-times" /></button>
+                <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 w-50">
+                    <i class="fa fa-times" /> Discard
+                </button>
             </t>
             <t t-else="">
-                <button class="btn btn-danger oe_record_remove w-100"><i class="fa fa-trash"/> Remove</button>
+                <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 w-50">
+                    <i class="fa fa-times" /> Discard
+                </button>
             </t>
         </div>
     </t>
-
 </template>
diff --git a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml
index 48f1ff09a..927b2fab3 100644
--- a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml
+++ b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker_quick_modif_price.xml
@@ -1,14 +1,8 @@
 <template>
-
-    <t t-name="One2ManyProductPicker.QuickModifPrice.FormButtons">
-        <div class="oe_one2many_product_picker_form_buttons">
-            <button class="btn btn-success oe_record_change mr-2"><i class="fa fa-check" /></button>
-            <button class="btn btn-warning oe_record_discard ml-2"><i class="fa fa-times" /></button>
+    <t t-name="One2ManyProductPicker.QuickModifPrice.Price">
+        <div class="text-left">
+            <strong>Price</strong>
+            <div class="oe_price" />
         </div>
     </t>
-
-    <t t-name="One2ManyProductPicker.QuickModifPrice.Price">
-        <div class="text-left"><strong>Price:</strong> <div class="oe_price" /></div>
-    </t>
-
 </template>
diff --git a/web_widget_one2many_product_picker/static/tests/widget_tests.js b/web_widget_one2many_product_picker/static/tests/widget_tests.js
index 9c52b193b..64049fdfb 100644
--- a/web_widget_one2many_product_picker/static/tests/widget_tests.js
+++ b/web_widget_one2many_product_picker/static/tests/widget_tests.js
@@ -1,136 +1,228 @@
 /* global QUnit */
 // 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.widget_tests', function (require) {
+odoo.define("web_widget_one2many_product_picker.widget_tests", function(require) {
     "use strict";
 
-    var FormView = require('web.FormView');
-    var testUtils = require('web.test_utils');
+    var FormView = require("web.FormView");
+    var testUtils = require("web.test_utils");
 
     var createView = testUtils.createView;
 
-    var getArch = function () {
-        return '<form>' +
-        '<field name="currency_id" invisible="1" />' +
-        '<field name="line_ids" widget="one2many_product_picker" options="{\'groups\': [{\'name\': \'Desk\', \'domain\': [(\'name\', \'ilike\', \'%desk%\')], \'order\': {\'name\': \'id\', \'asc\': true}}, {\'name\': \'Chairs\', \'domain\': [(\'name\', \'ilike\', \'%chair%\')]}]}">' +
-            '<kanban>' +
-                '<field name="name" />' +
-                '<field name="product_id" />' +
-                '<field name="price_reduce" />' +
-                '<field name="price_unit" />' +
-                '<field name="foo_id" />' +
-                '<field name="product_uom_qty" />' +
-                '<field name="product_uom" />' +
-            '</kanban>' +
-        '</field>' +
-        '</form>';
+    var getArch = function() {
+        return (
+            "<form>" +
+            '<field name="currency_id" invisible="1" />' +
+            "<field name=\"line_ids\" widget=\"one2many_product_picker\" options=\"{'groups': [{'name': 'Desk', 'domain': [('name', 'ilike', '%desk%')], 'order': {'name': 'id', 'asc': true}}, {'name': 'Chairs', 'domain': [('name', 'ilike', '%chair%')]}]}\">" +
+            "<kanban>" +
+            '<field name="name" />' +
+            '<field name="product_id" />' +
+            '<field name="price_reduce" />' +
+            '<field name="price_unit" />' +
+            '<field name="foo_id" />' +
+            '<field name="product_uom_qty" />' +
+            '<field name="product_uom" />' +
+            "</kanban>" +
+            "</field>" +
+            "</form>"
+        );
     };
 
-    QUnit.module('Web Widget One2Many Product Picker', {
-        beforeEach: function () {
-            this.data = {
-                foo: {
-                    fields: {
-                        currency_id: {string: "Currency", type: "many2one", relation: "currency"},
-                        line_ids: {string: "Lines Test", type: "one2many", relation: "line", relation_field: "foo_id"},
-                        display_name: {string: "Display Name", type: "char"},
+    QUnit.module(
+        "Web Widget One2Many Product Picker",
+        {
+            beforeEach: function() {
+                this.data = {
+                    foo: {
+                        fields: {
+                            currency_id: {
+                                string: "Currency",
+                                type: "many2one",
+                                relation: "currency",
+                            },
+                            line_ids: {
+                                string: "Lines Test",
+                                type: "one2many",
+                                relation: "line",
+                                relation_field: "foo_id",
+                            },
+                            display_name: {string: "Display Name", type: "char"},
+                        },
+                        records: [
+                            {
+                                id: 1,
+                                line_ids: [1, 2],
+                                currency_id: 1,
+                                display_name: "FT01",
+                            },
+                        ],
                     },
-                    records: [
-                        {id: 1, line_ids: [1, 2], currency_id: 1, display_name: "FT01"},
-                    ],
-                },
-                line: {
-                    fields: {
-                        name: {string: "Product Name", type: "string"},
-                        product_id: {string: "Product", type: "many2one", relation: "product"},
-                        product_uom: {string: "UoM", type: "many2one", relation: "uom"},
-                        product_uom_qty: {string: "Qty", type: "integer"},
-                        price_unit: {string: "Product Price", type: "float"},
-                        price_reduce: {string: "Product Price Reduce", type: "float"},
-                        foo_id: {string: "Parent", type: "many2one", relation: "foo"},
+                    line: {
+                        fields: {
+                            name: {string: "Product Name", type: "string"},
+                            product_id: {
+                                string: "Product",
+                                type: "many2one",
+                                relation: "product",
+                            },
+                            product_uom: {
+                                string: "UoM",
+                                type: "many2one",
+                                relation: "uom",
+                            },
+                            product_uom_qty: {string: "Qty", type: "integer"},
+                            price_unit: {string: "Product Price", type: "float"},
+                            price_reduce: {
+                                string: "Product Price Reduce",
+                                type: "float",
+                            },
+                            foo_id: {
+                                string: "Parent",
+                                type: "many2one",
+                                relation: "foo",
+                            },
+                        },
+                        records: [
+                            {
+                                id: 1,
+                                name: "Large Cabinet",
+                                product_id: 1,
+                                product_uom: 1,
+                                product_uom_qty: 3,
+                                price_unit: 9.99,
+                                price_reduce: 9.0,
+                                foo_id: 1,
+                            },
+                            {
+                                id: 2,
+                                name: "Cabinet with Doors",
+                                product_id: 2,
+                                product_uom: 1,
+                                product_uom_qty: 8,
+                                price_unit: 42.99,
+                                price_reduce: 40.0,
+                                foo_id: 1,
+                            },
+                        ],
                     },
-                    records: [
-                        {id: 1, name: "Large Cabinet", product_id: 1, product_uom: 1, product_uom_qty: 3, price_unit: 9.99, price_reduce: 9.00, foo_id: 1},
-                        {id: 2, name: "Cabinet with Doors", product_id: 2, product_uom: 1, product_uom_qty: 8, price_unit: 42.99, price_reduce: 40.00, foo_id: 1},
-                    ],
-                },
-                product: {
-                    fields: {
-                        name: {string : "Product name", type: "char"},
-                        display_name: {string : "Display Name", type: "char"},
-                        list_price: {string: "Price", type: "float"},
-                        image_medium: {string: "Image Medium", type: "binary"},
-                        uom_category_id: {string: "Category", type: "many2one", relation: "uom_category"},
+                    product: {
+                        fields: {
+                            name: {string: "Product name", type: "char"},
+                            display_name: {string: "Display Name", type: "char"},
+                            list_price: {string: "Price", type: "float"},
+                            image_medium: {string: "Image Medium", type: "binary"},
+                            uom_category_id: {
+                                string: "Category",
+                                type: "many2one",
+                                relation: "uom_category",
+                            },
+                        },
+                        records: [
+                            {
+                                id: 1,
+                                name: "Large Cabinet",
+                                display_name: "Large Cabinet",
+                                list_price: 9.99,
+                                image_medium: "",
+                                uom_category_id: 1,
+                            },
+                            {
+                                id: 2,
+                                name: "Cabinet with Doors",
+                                display_name: "Cabinet with Doors",
+                                list_price: 42.0,
+                                image_medium: "",
+                                uom_category_id: 1,
+                            },
+                        ],
                     },
-                    records: [
-                        {id: 1, name: "Large Cabinet", display_name: "Large Cabinet", list_price: 9.99, image_medium: "", uom_category_id: 1},
-                        {id: 2, name: "Cabinet with Doors", display_name: "Cabinet with Doors", list_price: 42.0, image_medium: "", uom_category_id: 1},
-                    ],
-                },
-                uom_category: {
-                    fields: {
-                        display_name: {string : "Display Name", type: "char"},
+                    uom_category: {
+                        fields: {
+                            display_name: {string: "Display Name", type: "char"},
+                        },
+                        records: [{id: 1, display_name: "Unit(s)"}],
                     },
-                    records: [
-                        {id: 1, display_name: "Unit(s)"},
-                    ],
-                },
-                uom: {
-                    fields: {
-                        name: {string: "Name", type: "char"},
+                    uom: {
+                        fields: {
+                            name: {string: "Name", type: "char"},
+                        },
+                        records: [{id: 1, name: "Unit(s)"}],
                     },
-                    records: [
-                        {id: 1, name: "Unit(s)"},
-                    ],
-                },
-                currency: {
-                    fields: {
-                        name: {string: "Name", type: "char"},
-                        symbol: {string: "Symbol", type: "char"},
+                    currency: {
+                        fields: {
+                            name: {string: "Name", type: "char"},
+                            symbol: {string: "Symbol", type: "char"},
+                        },
+                        records: [{id: 1, name: "Eur", symbol: "€"}],
                     },
-                    records: [
-                        {id: 1, name: "Eur", symbol: "€"},
-                    ],
-                },
-            };
+                };
+            },
         },
-    }, function () {
-        QUnit.test('Load widget', function (assert) {
-            assert.expect(4);
+        function() {
+            QUnit.test("Load widget", function(assert) {
+                assert.expect(4);
 
-            var form = createView({
-                View: FormView,
-                model: 'foo',
-                data: this.data,
-                arch: getArch(),
-                res_id: 1,
-                viewOptions: {
-                    ids: [1],
-                    index: 0,
-                },
-                mockRPC: function (route, args) {
-                    if (route === '/web/dataset/call_kw/foo/read') {
-                        assert.deepEqual(args.args[1], ['currency_id', 'line_ids', 'display_name'],
-                            'should only read "currency_id", "line_ids" and "display_name"');
-                        return $.when(this.data.foo.records);
-                    } else if (route === '/web/dataset/call_kw/line/read') {
-                        assert.deepEqual(args.args[1], ['name', 'product_id', 'price_reduce', 'price_unit', 'foo_id', 'product_uom_qty', 'product_uom'],
-                            'should only read "name", "product_id", "price_reduce", "price_unit", "foo_id", "product_uom_qty" and "product_uom"');
-                        return $.when(this.data.line.records);
-                    } else if (route === '/web/dataset/call_kw/product/search_read') {
-                        assert.deepEqual(args.kwargs.fields, ['id', 'uom_id', 'display_name', 'uom_category_id', 'image_medium', 'list_price'],
-                            'should only read "id", "uom_id", "display_name", "uom_category_id", "image_medium" and "list_price"');
-                        return $.when(this.data.product.records);
-                    }
-                    return this._super.apply(this, arguments);
-                },
+                var form = createView({
+                    View: FormView,
+                    model: "foo",
+                    data: this.data,
+                    arch: getArch(),
+                    res_id: 1,
+                    viewOptions: {
+                        ids: [1],
+                        index: 0,
+                    },
+                    mockRPC: function(route, args) {
+                        if (route === "/web/dataset/call_kw/foo/read") {
+                            assert.deepEqual(
+                                args.args[1],
+                                ["currency_id", "line_ids", "display_name"],
+                                'should only read "currency_id", "line_ids" and "display_name"'
+                            );
+                            return $.when(this.data.foo.records);
+                        } else if (route === "/web/dataset/call_kw/line/read") {
+                            assert.deepEqual(
+                                args.args[1],
+                                [
+                                    "name",
+                                    "product_id",
+                                    "price_reduce",
+                                    "price_unit",
+                                    "foo_id",
+                                    "product_uom_qty",
+                                    "product_uom",
+                                ],
+                                'should only read "name", "product_id", "price_reduce", "price_unit", "foo_id", "product_uom_qty" and "product_uom"'
+                            );
+                            return $.when(this.data.line.records);
+                        } else if (
+                            route === "/web/dataset/call_kw/product/search_read"
+                        ) {
+                            assert.deepEqual(
+                                args.kwargs.fields,
+                                [
+                                    "id",
+                                    "uom_id",
+                                    "display_name",
+                                    "uom_category_id",
+                                    "image_medium",
+                                    "list_price",
+                                ],
+                                'should only read "id", "uom_id", "display_name", "uom_category_id", "image_medium" and "list_price"'
+                            );
+                            return $.when(this.data.product.records);
+                        }
+                        return this._super.apply(this, arguments);
+                    },
+                });
+
+                assert.ok(
+                    form.$(".oe_field_one2many_product_picker").is(":visible"),
+                    "should have a visible one2many product picker"
+                );
+
+                form.destroy();
             });
-
-            assert.ok(form.$('.oe_field_one2many_product_picker').is(':visible'),
-                "should have a visible one2many product picker");
-
-            form.destroy();
-        });
-    });
-
+        }
+    );
 });
diff --git a/web_widget_one2many_product_picker/templates/assets.xml b/web_widget_one2many_product_picker/templates/assets.xml
index 560e49df9..d53a2754d 100644
--- a/web_widget_one2many_product_picker/templates/assets.xml
+++ b/web_widget_one2many_product_picker/templates/assets.xml
@@ -1,39 +1,86 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <odoo>
     <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
         <xpath expr=".">
-            <link type="text/css" rel="stylesheet"
-              href="/web_widget_one2many_product_picker/static/src/scss/_variables.scss"/>
+            <link
+                type="text/css"
+                rel="stylesheet"
+                href="/web_widget_one2many_product_picker/static/src/scss/_variables.scss"
+            />
         </xpath>
     </template>
-
     <template id="_assets_bootstrap" inherit_id="web._assets_bootstrap">
         <xpath expr="link[2]">
-          <link type="text/css" rel="stylesheet" href="/web_widget_one2many_product_picker/static/src/scss/main_variables.scss"/>
+            <link
+                type="text/css"
+                rel="stylesheet"
+                href="/web_widget_one2many_product_picker/static/src/scss/main_variables.scss"
+            />
         </xpath>
     </template>
-
     <template id="assets_backend" name="account assets" inherit_id="web.assets_backend">
         <xpath expr="." position="inside">
-            <link type="text/css" rel="stylesheet"
-              href="/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss"/>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/tools.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/basic_view.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/basic_model.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/views/basic_controller.js"></script>
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js"></script>
+            <link
+                type="text/css"
+                rel="stylesheet"
+                href="/web_widget_one2many_product_picker/static/src/scss/one2many_product_picker.scss"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/tools.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/record.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/renderer.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form_view.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_create_form.js"
+            />
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/src/js/views/One2ManyProductPicker/quick_modif_price_form_view.js"
+            />
+            <script
+                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_model.js"
+            />
+            <script
+                type="text/javascript"
+                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"
+                src="/web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js"
+            />
         </xpath>
     </template>
-
     <template id="qunit_suite" name="base_import_tests" inherit_id="web.qunit_suite">
         <xpath expr="//t[@t-set='head']" position="inside">
-            <script type="text/javascript" src="/web_widget_one2many_product_picker/static/tests/widget_tests.js"></script>
+            <script
+                type="text/javascript"
+                src="/web_widget_one2many_product_picker/static/tests/widget_tests.js"
+            />
         </xpath>
     </template>
 </odoo>