[IMP] web: use user's decimal separator for numeric fields

Until now, the numpad decimal key was not properly handled for some keyboard layouts. This commit will ensure that when this key will get pressed inside a numeric field, the user's display language decimal separator will get inserted. closes odoo/odoo#56962 Taskid: 1913999 Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
2020-10-05 08:21:00 +00:00
parent 574154eb47
commit e654b32bc1
3 changed files with 149 additions and 6 deletions
@@ -479,6 +479,91 @@ QUnit.module('basic_fields', {
        form.destroy();
    });

+    QUnit.module('FieldNumeric');
+
+    QUnit.test('numeric field: fields with keydown on numpad decimal key', async function (assert) {
+        assert.expect(6);
+
+        this.data.partner.fields.float_factor_field = { string: "Float Factor", type: 'float_factor' };
+        this.data.partner.records[0].float_factor_field = 9.99;
+
+        this.data.partner.fields.float_time_field = { string: "Float Time", type: 'float_time' };
+        this.data.partner.records[0].float_time_field = 9.99;
+
+        this.data.partner.fields.monetary = { string: "Monetary", type: 'monetary' };
+        this.data.partner.records[0].monetary = 9.99;
+        this.data.partner.records[0].currency_id = 1;
+
+        this.data.partner.fields.percentage = { string: "Percentage", type: 'percentage' };
+        this.data.partner.records[0].percentage = .99;
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `
+                <form string="Partners">
+                    <field name="float_factor_field" options="{'factor': 0.5}"/>
+                    <field name="qux"/>
+                    <field name="float_time_field"/>
+                    <field name="int_field"/>
+                    <field name="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                    <field name="percentage"/>
+                </form>
+            `,
+            res_id: 1,
+            translateParameters: {
+                decimal_point: "🇧🇪",
+            },
+        });
+
+        // Record edit mode
+        await testUtilsDom.click(form.el.querySelector('.o_form_button_edit'));
+
+        // Get all inputs
+        const floatFactorField = form.el.querySelector('.o_input[name="float_factor_field"]');
+        const floatInput = form.el.querySelector('.o_input[name="qux"]');
+        const floatTimeInput = form.el.querySelector('.o_input[name="float_time_field"]');
+        const integerInput = form.el.querySelector('.o_input[name="int_field"]');
+        const monetaryInput = form.el.querySelector('.o_input[name="monetary"]');
+        const percentageInput = form.el.querySelector('.o_input[name="percentage"]');
+
+        // Dispatch numpad "dot" and numpad "comma" keydown events to all inputs and check
+        // Numpad "comma" is specific to some countries (Brazil...)
+        floatFactorField.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        floatFactorField.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(floatFactorField.value.endsWith('🇧🇪🇧🇪'));
+
+        floatInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        floatInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(floatInput.value.endsWith('🇧🇪🇧🇪'));
+
+        floatTimeInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        floatTimeInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(floatTimeInput.value.endsWith('🇧🇪🇧🇪'));
+
+        integerInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        integerInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(integerInput.value.endsWith('🇧🇪🇧🇪'));
+
+        monetaryInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        monetaryInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(monetaryInput.querySelector('input.o_input') .value.endsWith('🇧🇪🇧🇪'));
+
+        percentageInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: '.' }));
+        percentageInput.dispatchEvent(new KeyboardEvent('keydown', { code: 'NumpadDecimal', key: ',' }));
+        await testUtils.nextTick();
+        assert.ok(percentageInput.querySelector('input.o_input').value.endsWith('🇧🇪🇧🇪'));
+
+        form.destroy();
+    });
+
    QUnit.module('FieldFloat');

    QUnit.test('float field when unset', async function (assert) {