diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js
index 471ea3b1e4a..5ee9652f1da 100644
--- a/addons/portal/static/src/js/portal_signature.js
+++ b/addons/portal/static/src/js/portal_signature.js
@@ -55,10 +55,13 @@ var SignatureForm = publicWidget.Widget.extend({
      * @override
      */
     start: function () {
+        var self = this;
         this.$confirm_btn = this.$('.o_portal_sign_submit');
         this.$controls = this.$('.o_portal_sign_controls');
-        this.nameAndSignature.replace(this.$('.o_web_sign_name_and_signature'));
-        return this._super.apply(this, arguments);
+        var subWidgetStart = this.nameAndSignature.replace(this.$('.o_web_sign_name_and_signature'));
+        return Promise.all([subWidgetStart, this._super.apply(this, arguments)]).then(function () {
+            self.nameAndSignature.resetSignature();
+        });
     },
 
     //----------------------------------------------------------------------
diff --git a/addons/web/static/src/js/fields/signature.js b/addons/web/static/src/js/fields/signature.js
index 6011cf7bf3f..e27ec36e01a 100644
--- a/addons/web/static/src/js/fields/signature.js
+++ b/addons/web/static/src/js/fields/signature.js
@@ -56,7 +56,18 @@ var SignatureDialog = Dialog.extend({
         this.nameAndSignature = new NameAndSignature(this, options.nameAndSignatureOptions);
     },
     /**
-     * Inserts the name and signature.
+     * Start the nameAndSignature widget and wait for it.
+     *
+     * @override
+     */
+    willStart: function () {
+        return Promise.all([
+            this.nameAndSignature.appendTo($('<div>')),
+            this._super.apply(this, arguments)
+        ]);
+    },
+    /**
+     * Initialize the name and signature widget when the modal is opened.
      *
      * @override
      */
@@ -65,7 +76,9 @@ var SignatureDialog = Dialog.extend({
         this.$primaryButton = this.$footer.find('.btn-primary');
 
         this.opened().then(function () {
-            self.nameAndSignature.replace(self.$('.o_web_sign_name_and_signature'));
+            self.$('.o_web_sign_name_and_signature').replaceWith(self.nameAndSignature.$el);
+            // initialize the signature area
+            self.nameAndSignature.resetSignature();
         });
 
         return this._super.apply(this, arguments);
diff --git a/addons/web/static/src/js/widgets/name_and_signature.js b/addons/web/static/src/js/widgets/name_and_signature.js
index 57a9a697494..0dda31050c0 100644
--- a/addons/web/static/src/js/widgets/name_and_signature.js
+++ b/addons/web/static/src/js/widgets/name_and_signature.js
@@ -144,10 +144,7 @@ var NameAndSignature = Widget.extend({
             self.resetSignature();
         }, 250));
 
-        return this._super.apply(this, arguments).then(function () {
-            // initialize the signature area
-            return self.resetSignature();
-        });
+        return this._super.apply(this, arguments);
     },
     /**
      * @override
diff --git a/addons/web/static/tests/fields/signature.js b/addons/web/static/tests/fields/signature.js
index 43f9bf7b502..fc85832da15 100644
--- a/addons/web/static/tests/fields/signature.js
+++ b/addons/web/static/tests/fields/signature.js
@@ -65,6 +65,8 @@ QUnit.module('signature', {
             "should have a valid signature widget");
         // Click on the widget to open signature modal
         await testUtils.dom.click(form.$('div[name=sign] div.o_signature'));
+        await testUtils.nextTick(); // dialog xmlDependencies load
+-       await testUtils.nextTick(); // name_and_signature xmlDependencies load
         assert.strictEqual($('.modal .modal-body a.o_web_sign_auto_button').length, 1,
             'should open a modal with "Auto" button');
         assert.strictEqual($('.modal .modal-body .o_web_sign_name_input').val(), "Pop's Chock'lit",
@@ -99,6 +101,8 @@ QUnit.module('signature', {
             "should have a valid signature widget");
         // Click on the widget to open signature modal
         await testUtils.dom.click(form.$('div[name=sign] div.o_signature'));
+        await testUtils.nextTick(); // dialog xmlDependencies load
+-       await testUtils.nextTick(); // name_and_signature xmlDependencies load
         assert.strictEqual($('.modal .modal-body a.o_web_sign_auto_button').length, 1,
             'should open a modal with "Auto" button');
         assert.strictEqual($('.modal .modal-body .o_web_sign_name_input').val(), "Veggie Burger",