[IMP] web: show % symbol outside the input in percentage widget

Before this commit the % symbol was part of the input. We could write a
value with the % symbol to divide the value by 100 (50% = 0.5, 50 = 50)

This commit removes the % symbol from the input and adds it in a span
after the input so we do not need to write the % symbol anymore.

The value from the input will be saved as $value / 100 in database.

task-2065078

closes odoo/odoo#43995

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

2 files changed, 41 insertions, 11 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index f2c44891ea2..4aac42db13b 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1325,8 +1325,41 @@ var FieldFloatToggle = AbstractField.extend({
 });
 
 var FieldPercentage = FieldFloat.extend({
+    className: 'o_field_float_percentage o_field_number',
     description: _lt("Percentage"),
-    formatType:'percentage',
+
+    /**
+     * @constructor
+     */
+    init() {
+        this._super(...arguments);
+        if (this.mode === 'edit') {
+            this.tagName = 'div';
+            this.className += ' o_input';
+            
+            // do not display % in the input in edit
+            this.formatOptions.noSymbol = true;
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * For percentage widget, the input is inside a div, alongside a span
+     * containing the percentage(%) symbol.
+     *
+     * @override
+     * @private
+     */
+    _renderEdit() {
+        this.$el.empty();
+        // Prepare and add the input
+        this._prepareInput(this.$input).appendTo(this.$el);
+        const $percentageSymbol = $('<span>', { text: '%' });
+        this.$el.append($percentageSymbol);
+    },
 });
 
 var FieldText = InputField.extend(TranslatableFieldMixin, {
diff --git a/addons/web/static/src/js/fields/field_utils.js b/addons/web/static/src/js/fields/field_utils.js
index f8546f90e55..8bba006aaf1 100644
--- a/addons/web/static/src/js/fields/field_utils.js
+++ b/addons/web/static/src/js/fields/field_utils.js
@@ -370,11 +370,11 @@ function formatMonetary(value, field, options) {
  */
 function formatPercentage(value, field, options) {
     options = options || {};
-    var result = formatFloat(value * 100, field, options) || '0';
-    if (options.humanReadable && options.humanReadable(value * 100)) {
-        return result + "%";
+    let result = formatFloat(value * 100, field, options) || '0';
+    if (!options.humanReadable || !options.humanReadable(value * 100)) {
+        result = parseFloat(result).toString().replace('.', _t.database.parameters.decimal_point);
     }
-    return (parseFloat(result) + "%").replace('.', _t.database.parameters.decimal_point);
+    return result + (options.noSymbol ? '' : '%');
 }
 /**
  * Returns a string representing the value of the selection.
@@ -598,8 +598,8 @@ function parseFloatTime(value) {
 }
 
 /**
- * Parse a String containing a percentage and convert it to float.
- * The percentage can be a regular xx.xx float or a xx%.
+ * Parse a String containing float and unconvert it with a conversion factor
+ * of 100. The percentage can be a regular xx.xx float or a xx%.
  *
  * @param {string} value
  *                The string to be parsed
@@ -607,10 +607,7 @@ function parseFloatTime(value) {
  * @throws {Error} if the value couldn't be converted to float
  */
 function parsePercentage(value) {
-    if (value.slice(-1) === '%') {
-        return parseFloat(value.slice(0, -1)) / 100;
-    }
-    return parseFloat(value);
+    return parseFloat(value) / 100;
 }
 
 /**