diff --git a/addons/web/static/src/views/fields/signature/signature_field.js b/addons/web/static/src/views/fields/signature/signature_field.js
index 75f07b364f0..62474829c50 100644
--- a/addons/web/static/src/views/fields/signature/signature_field.js
+++ b/addons/web/static/src/views/fields/signature/signature_field.js
@@ -43,9 +43,9 @@ export class SignatureField extends Component {
     }
 
     get getUrl() {
-        const { name, previewImage, record, value } = this.props;
-        if (this.state.isValid && value) {
-            if (isBinarySize(value)) {
+        const { name, previewImage, record } = this.props;
+        if (this.state.isValid && this.value) {
+            if (isBinarySize(this.value)) {
                 return url("/web/image", {
                     model: record.resModel,
                     id: record.resId,
@@ -63,9 +63,9 @@ export class SignatureField extends Component {
     }
 
     get sizeStyle() {
-        let { width, height, value } = this.props;
+        let { width, height } = this.props;
 
-        if (!value) {
+        if (!this.value) {
             if (width && height) {
                 width = Math.min(width, this.displaySignatureRatio * height);
                 height = width / this.displaySignatureRatio;
@@ -86,6 +86,10 @@ export class SignatureField extends Component {
         return style;
     }
 
+    get value() {
+        return this.props.record.data[this.props.name];
+    }
+
     onClickSignature() {
         if (!this.props.readonly) {
             const nameAndSignatureProps = {
diff --git a/addons/web/static/src/views/fields/signature/signature_field.xml b/addons/web/static/src/views/fields/signature/signature_field.xml
index d52feb52423..8b506a62178 100644
--- a/addons/web/static/src/views/fields/signature/signature_field.xml
+++ b/addons/web/static/src/views/fields/signature/signature_field.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.SignatureField" owl="1">
-        <t t-if="props.record.data[props.name]">
+        <t t-if="value">
             <img class="o_signature img img-fluid"
                 alt="Binary file"
                 t-att-src="getUrl"
diff --git a/addons/web/static/tests/views/fields/signature_field_tests.js b/addons/web/static/tests/views/fields/signature_field_tests.js
index bb54a75df19..9477168a4b0 100644
--- a/addons/web/static/tests/views/fields/signature_field_tests.js
+++ b/addons/web/static/tests/views/fields/signature_field_tests.js
@@ -1,5 +1,11 @@
 /** @odoo-module **/
-import { click, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import {
+    click,
+    dragAndDrop,
+    getFixture,
+    makeDeferred,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { NameAndSignature } from "@web/core/signature/name_and_signature";
 
@@ -48,6 +54,55 @@ QUnit.module("Fields", (hooks) => {
 
     QUnit.module("Signature Field");
 
+    QUnit.test("signature can be drawned", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form>
+                        <field name="sign" widget="signature" />
+                    </form>`,
+            mockRPC: async (route) => {
+                if (route === "/web/sign/get_fonts/") {
+                    return {};
+                }
+            },
+        });
+
+        assert.containsNone(target, "div[name=sign] img.o_signature");
+        assert.containsOnce(
+            target,
+            "div[name=sign] div.o_signature svg",
+            "should have a valid signature widget"
+        );
+
+        // Click on the widget to open signature modal
+        await click(target, "div[name=sign] div.o_signature");
+        assert.containsOnce(target, ".modal .modal-body .o_web_sign_name_and_signature");
+        assert.containsNone(target, ".modal .btn.btn-primary:not([disabled])");
+
+        // Use a drag&drop simulation to draw a signature
+        const def = makeDeferred();
+        const $jSignatureEl = $(target.querySelector(".modal .o_web_sign_signature"));
+        $jSignatureEl.on("change", def.resolve);
+        await dragAndDrop("canvas.jSignature", "canvas.jSignature");
+        await def; // makes sure the signature stroke is taken into account by jSignature
+        assert.containsOnce(target, ".modal .btn.btn-primary:not([disabled])");
+
+        // Click on "Adopt and Sign" button
+        await click(target, ".modal .btn.btn-primary:not([disabled])");
+        assert.containsNone(target, ".modal");
+
+        // The signature widget should now display the signature img
+        assert.containsNone(target, "div[name=sign] div.o_signature svg");
+        assert.containsOnce(target, "div[name=sign] img.o_signature");
+
+        const signImgSrc = target.querySelector("div[name=sign] img.o_signature").dataset.src;
+        assert.notOk(signImgSrc.includes("placeholder"));
+        assert.ok(signImgSrc.startsWith("data:image/png;base64,"));
+    });
+
     QUnit.test("Set simple field in 'full_name' node option", async function (assert) {
         patchWithCleanup(NameAndSignature.prototype, {
             setup() {