[FIX] web: kanban: format monetary w/o widget

Before this commit, monetary fields occurring in kanban views
without widget="monetary" specified weren't correctly formatted:
the whitespace separating the value from the currency symbol was
formatted has $nbsp; (html) instead of a simple whitespace.

closes odoo/odoo#52521

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Aaron Bohy <aab@odoo.com>

3 files changed, 54 insertions, 8 deletions

diff --git a/addons/web/static/src/js/fields/field_utils.js b/addons/web/static/src/js/fields/field_utils.js
index 681a1eb3672..4f637994c47 100644
--- a/addons/web/static/src/js/fields/field_utils.js
+++ b/addons/web/static/src/js/fields/field_utils.js
@@ -329,13 +329,16 @@ function formatX2Many(value) {
  *        the number of digits that should be used, instead of the default
  *        digits precision in the field. Note: if the currency defines a
  *        precision, the currency's one is used.
+ * @param {boolean} [options.html=true]
+ *        if true, returns a string encoding the html formatted value (with
+ *        whitespace encoded as ' ')
  * @returns {string}
  */
 function formatMonetary(value, field, options) {
     if (value === false) {
         return "";
     }
-    options = options || {};
+    options = Object.assign({ html: true }, options);
 
     var currency = options.currency;
     if (!currency) {
@@ -358,10 +361,11 @@ function formatMonetary(value, field, options) {
     if (!currency || options.noSymbol) {
         return formatted_value;
     }
+    const ws = options.html ? ' ' : ' ';
     if (currency.position === "after") {
-        return formatted_value += ' ' + currency.symbol;
+        return formatted_value + ws + currency.symbol;
     } else {
-        return currency.symbol + ' ' + formatted_value;
+        return currency.symbol + ws + formatted_value;
     }
 }
 /**
diff --git a/addons/web/static/src/js/views/kanban/kanban_record.js b/addons/web/static/src/js/views/kanban/kanban_record.js
index f6216171f12..b3b11a7ed54 100644
--- a/addons/web/static/src/js/views/kanban/kanban_record.js
+++ b/addons/web/static/src/js/views/kanban/kanban_record.js
@@ -268,7 +268,7 @@ var KanbanRecord = Widget.extend({
         // it is much more efficient to use a formatter
         var field = this.fields[field_name];
         var value = this.recordData[field_name];
-        var options = { data: this.recordData };
+        var options = { data: this.recordData, html: false };
         var formatted_value = field_utils.format[field.type](value, field, options);
         var $result = $('<span>', {
             text: formatted_value,
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index 225826c8515..795d3b54324 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/addons/web/static/tests/views/kanban_tests.js
@@ -40,12 +40,14 @@ QUnit.module('Views', {
                     datetime: {string: "Datetime Field", type: 'datetime'},
                     image: {string: "Image", type: "binary"},
                     displayed_image_id: {string: "cover", type: "many2one", relation: "ir.attachment"},
+                    currency_id: {string: "Currency", type: "many2one", relation: "currency", default: 1},
+                    salary: {string: "Monetary field", type: "monetary"},
                 },
                 records: [
-                    {id: 1, bar: true, foo: "yop", int_field: 10, qux: 0.4, product_id: 3, state: "abc", category_ids: [], 'image': 'R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA=='},
-                    {id: 2, bar: true, foo: "blip", int_field: 9, qux: 13, product_id: 5, state: "def", category_ids: [6]},
-                    {id: 3, bar: true, foo: "gnap", int_field: 17, qux: -3, product_id: 3, state: "ghi", category_ids: [7]},
-                    {id: 4, bar: false, foo: "blip", int_field: -4, qux: 9, product_id: 5, state: "ghi", category_ids: []},
+                    {id: 1, bar: true, foo: "yop", int_field: 10, qux: 0.4, product_id: 3, state: "abc", category_ids: [], 'image': 'R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==', salary: 1750, currency_id: 1},
+                    {id: 2, bar: true, foo: "blip", int_field: 9, qux: 13, product_id: 5, state: "def", category_ids: [6], salary: 1500, currency_id: 1},
+                    {id: 3, bar: true, foo: "gnap", int_field: 17, qux: -3, product_id: 3, state: "ghi", category_ids: [7], salary: 2000, currency_id: 2},
+                    {id: 4, bar: false, foo: "blip", int_field: -4, qux: 9, product_id: 5, state: "ghi", category_ids: [], salary: 2222, currency_id: 1},
                 ]
             },
             product: {
@@ -80,6 +82,20 @@ QUnit.module('Views', {
                     {id: 2, name: "2.png", mimetype: 'image/png', res_model: 'partner', res_id: 2},
                 ]
             },
+            'currency': {
+                fields: {
+                    symbol: {string: "Symbol", type: "char"},
+                    position: {
+                        string: "Position",
+                        type: "selection",
+                        selection: [['after', 'A'], ['before', 'B']],
+                    },
+                },
+                records: [
+                    {id: 1, display_name: "USD", symbol: '$', position: 'before'},
+                    {id: 2, display_name: "EUR", symbol: '€', position: 'after'},
+                ],
+            },
         };
     },
 }, function () {
@@ -6106,6 +6122,32 @@ QUnit.module('Views', {
             'div.custom-checkbox.o_field_boolean');
         kanban.destroy();
     });
+
+    QUnit.test('kanban view with monetary and currency fields without widget', async function (assert) {
+        assert.expect(1);
+
+        var kanban = await createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: `
+                <kanban>
+                    <field name="currency_id"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="salary"/></div>
+                    </t></templates>
+                </kanban>`,
+            session: {
+                currencies: _.indexBy(this.data.currency.records, 'id'),
+            },
+        });
+
+        const kanbanRecords = kanban.el.querySelectorAll('.o_kanban_record:not(.o_kanban_ghost)');
+        assert.deepEqual([...kanbanRecords].map(r => r.innerText),
+            ['$ 1750.00', '$ 1500.00', '2000.00 €', '$ 2222.00']);
+
+        kanban.destroy();
+    });
 });
 
 });