diff --git a/web_widget_product_label_section_and_note/__manifest__.py b/web_widget_product_label_section_and_note/__manifest__.py
index 3613acb611c..3d0121a4a3e 100644
--- a/web_widget_product_label_section_and_note/__manifest__.py
+++ b/web_widget_product_label_section_and_note/__manifest__.py
@@ -1,6 +1,6 @@
 {
     "name": "Web widget product label section and note",
-    "version": "16.0.1.0.1",
+    "version": "17.0.1.0.0",
     "summary": "unify the product and name into a single column",
     "author": "Tecnativa, Odoo Community Association (OCA), Odoo S.A.",
     "website": "https://github.com/OCA/web",
diff --git a/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.esm.js b/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.esm.js
index c90dbe63dac..3469ea14753 100644
--- a/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.esm.js
+++ b/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.esm.js
@@ -15,8 +15,11 @@ import {
 import {AutoComplete} from "@web/core/autocomplete/autocomplete";
 import {Many2OneField} from "@web/views/fields/many2one/many2one_field";
 import {Many2XAutocomplete} from "@web/views/fields/relational_utils";
-import {SectionAndNoteListRenderer} from "@account/components/section_and_note_fields_backend/section_and_note_fields_backend";
-import {X2ManyField} from "@web/views/fields/x2many/x2many_field";
+import {
+    SectionAndNoteListRenderer,
+    sectionAndNoteFieldOne2Many,
+} from "@account/components/section_and_note_fields_backend/section_and_note_fields_backend";
+import {X2ManyField, x2ManyField} from "@web/views/fields/x2many/x2many_field";
 import {_t} from "@web/core/l10n/translation";
 import {getActiveHotkey} from "@web/core/hotkeys/hotkey_service";
 import {registry} from "@web/core/registry";
@@ -70,19 +73,23 @@ export class ProductLabelSectionAndNoteListRender extends SectionAndNoteListRend
     }
 }
 
-export class ProductLabelSectionAndNoteOne2Many extends X2ManyField {}
-ProductLabelSectionAndNoteOne2Many.components = {
-    ...X2ManyField.components,
-    ListRenderer: ProductLabelSectionAndNoteListRender,
-};
-ProductLabelSectionAndNoteOne2Many.additionalClasses =
-    SectionAndNoteListRenderer.additionalClasses;
+export class ProductLabelSectionAndNoteOne2Many extends X2ManyField {
+    static components = {
+        ...X2ManyField.components,
+        ListRenderer: ProductLabelSectionAndNoteListRender,
+    };
+}
 
+export const productLabelSectionAndNoteOne2Many = {
+    ...x2ManyField,
+    component: ProductLabelSectionAndNoteOne2Many,
+    additionalClasses: sectionAndNoteFieldOne2Many.additionalClasses,
+};
 registry
     .category("fields")
     .add(
         "product_label_section_and_note_field_o2m",
-        ProductLabelSectionAndNoteOne2Many
+        productLabelSectionAndNoteOne2Many
     );
 
 export class ProductLabelSectionAndNoteAutocomplete extends AutoComplete {
@@ -107,6 +114,19 @@ export class ProductLabelSectionAndNoteAutocomplete extends AutoComplete {
 }
 
 export class ProductLabelSectionAndNoteFieldAutocomplete extends Many2XAutocomplete {
+    static components = {
+        ...Many2XAutocomplete.components,
+        AutoComplete: ProductLabelSectionAndNoteAutocomplete,
+    };
+    static props = {
+        ...Many2XAutocomplete.props,
+        isNote: {type: Boolean},
+        isSection: {type: Boolean},
+        onFocusout: {type: Function, optional: true},
+        updateLabel: {type: Function, optional: true},
+    };
+    static template =
+        "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete";
     setup() {
         super.setup();
         this.input = useRef("section_and_note_input");
@@ -121,14 +141,13 @@ export class ProductLabelSectionAndNoteFieldAutocomplete extends Many2XAutocompl
     }
 }
 
-ProductLabelSectionAndNoteFieldAutocomplete.components = {
-    ...Many2XAutocomplete.components,
-    AutoComplete: ProductLabelSectionAndNoteAutocomplete,
-};
-ProductLabelSectionAndNoteFieldAutocomplete.template =
-    "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete";
-
 export class ProductLabelSectionAndNoteField extends Many2OneField {
+    static components = {
+        ...Many2OneField.components,
+        Many2XAutocomplete: ProductLabelSectionAndNoteFieldAutocomplete,
+    };
+    static template =
+        "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField";
     setup() {
         super.setup();
         this.isPrintMode = useState({value: false});
@@ -266,13 +285,10 @@ export class ProductLabelSectionAndNoteField extends Many2OneField {
     }
 }
 
-ProductLabelSectionAndNoteField.components = {
-    ...Many2OneField.components,
-    Many2XAutocomplete: ProductLabelSectionAndNoteFieldAutocomplete,
+export const productLabelSectionAndNoteField = {
+    ...Many2OneField,
+    component: ProductLabelSectionAndNoteField,
 };
-ProductLabelSectionAndNoteField.template =
-    "web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField";
-
 registry
     .category("fields")
-    .add("product_label_section_and_note_field", ProductLabelSectionAndNoteField);
+    .add("product_label_section_and_note_field", productLabelSectionAndNoteField);
diff --git a/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml b/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
index 3e512fd94ca..6e1c534a026 100644
--- a/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
+++ b/web_widget_product_label_section_and_note/static/src/components/product_label_section_and_note_field/product_label_section_and_note_field.xml
@@ -3,7 +3,6 @@
 
     <t
         t-name="web_widget_product_label_section_and_note.ProductLabelSectionAndNoteField"
-        owl="1"
     >
         <div class="o_field_product_label_section_and_note_cell">
             <t t-if="props.readonly">
@@ -96,12 +95,12 @@
                         <button
                             t-if="hasExternalButton"
                             aria-label="Internal link"
-                            class="btn btn-secondary fa o_external_button"
+                            class="btn btn-link text-action oi o_external_button"
                             data-tooltip="Internal link"
                             draggable="false"
                             tabindex="-1"
                             type="button"
-                            t-att-class="(props.openTarget === 'current' and !env.inDialog )? 'fa-arrow-right' : 'fa-external-link'"
+                            t-att-class="env.inDialog ? 'oi-launch' : 'oi-arrow-right'"
                             t-on-click="onExternalBtnClick"
                         />
                         <button
@@ -181,18 +180,18 @@
         t-name="web_widget_product_label_section_and_note.ProductLabelSectionAndNoteFieldAutocomplete"
         t-inherit="web.Many2XAutocomplete"
         t-inherit-mode="primary"
-        owl="1"
     >
         <xpath expr="//AutoComplete[@t-else='']" position="replace">
             <t t-else="">
                 <t t-if="!isSectionOrNote">
                     <AutoComplete
+                        autofocus="props.autofocus"
                         autoSelect="props.autoSelect"
+                        dropdown="props.dropdown"
                         id="props.id"
                         onChange.bind="onChange"
                         onInput.bind="onInput"
                         onSelect.bind="onSelect"
-                        onCancel.bind="onCancel"
                         placeholder="props.placeholder"
                         resetOnSelect="props.value === ''"
                         sources="sources"
@@ -211,7 +210,7 @@
                 </t>
             </t>
         </xpath>
-        <xpath expr="//a[@class='o_dropdown_button']" position="attributes">
+        <xpath expr="//span[hasclass('o_dropdown_button')]" position="attributes">
             <attribute name="t-if">!isSectionOrNote</attribute>
         </xpath>
     </t>
diff --git a/web_widget_product_label_section_and_note/static/src/core/utils/autoresize.esm.js b/web_widget_product_label_section_and_note/static/src/core/utils/autoresize.esm.js
index 4136d43d2fb..f3852deb83b 100644
--- a/web_widget_product_label_section_and_note/static/src/core/utils/autoresize.esm.js
+++ b/web_widget_product_label_section_and_note/static/src/core/utils/autoresize.esm.js
@@ -5,6 +5,7 @@
 
 import {useEffect} from "@odoo/owl";
 import {browser} from "@web/core/browser/browser";
+import {resizeTextArea} from "@web/core/utils/autoresize";
 
 function resizeInput(input) {
     // This mesures the maximum width of the input which can get from the flex layout.
@@ -25,37 +26,6 @@ function resizeInput(input) {
     input.style.width = input.scrollWidth + 5 + (isSafari16 ? 8 : 0) + "px";
 }
 
-export function resizeTextArea(textarea, options = {}) {
-    const minimumHeight = options.minimumHeight || 0;
-    let heightOffset = 0;
-    const style = window.getComputedStyle(textarea);
-    if (style.boxSizing === "border-box") {
-        const paddingHeight =
-            parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
-        const borderHeight =
-            parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-        heightOffset = borderHeight + paddingHeight;
-    }
-    const previousStyle = {
-        borderTopWidth: style.borderTopWidth,
-        borderBottomWidth: style.borderBottomWidth,
-        padding: style.padding,
-    };
-    Object.assign(textarea.style, {
-        height: "auto",
-        borderTopWidth: 0,
-        borderBottomWidth: 0,
-        paddingTop: 0,
-        paddingRight: style.paddingRight,
-        paddingBottom: 0,
-        paddingLeft: style.paddingLeft,
-    });
-    textarea.style.height = "auto";
-    const height = Math.max(minimumHeight, textarea.scrollHeight + heightOffset);
-    Object.assign(textarea.style, previousStyle, {height: `${height}px`});
-    textarea.parentElement.style.height = `${height}px`;
-}
-
 /**
  * This is used on text inputs or textareas to automatically resize it based on its
  * content each time it is updated. It takes the reference of the element as