[FIX] website: fix input default value translation

Issue:

- Go to website > edit mode > add a form
- On one of the form fields, add a default value > save
- Change language > translate > the input has html code shown as value.

On translation editor, the default html values we get from translation
mapping (see 'ir.translation' > _get_terms_mapping()) are used on the
editor's JS code (beforeEditorActive()) to set the right translatable
attributes values on DOM elements, and since the use of jQuery "attr()"
will not update the "value" property on inputs, we force it to replace
the default translation html.

Remark: the same issue will prevent updating the "value" property on
the input when "AttributeTranslateDialog" is used for translation.

task-3042522

closes odoo/odoo#117472

X-original-commit: 9dbc25aab92ee31281d2bbc8c2ab6d743d5e43af
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
This commit is contained in:
xO-Tx
2023-04-03 13:55:30 +02:00
parent f56ff35a5f
commit 29fd20d945
2 changed files with 25 additions and 5 deletions
@@ -24,10 +24,16 @@ export class AttributeTranslateDialog extends Component {
$input.on('change keyup', function () {
const value = $input.val();
$node.text(value).trigger('change', node);
if ($node.data('attribute')) {
$node.data('$node').attr($node.data('attribute'), value).trigger('translate');
const $originalNode = $node.data('$node');
const nodeAttribute = $node.data('attribute');
if (nodeAttribute) {
$originalNode.attr(nodeAttribute, value);
if (nodeAttribute === 'value') {
$originalNode[0].value = value;
}
$originalNode.trigger('translate');
} else {
$node.data('$node').val(value).trigger('translate');
$originalNode.val(value).trigger('translate');
}
$node.trigger('change');
});
@@ -138,6 +144,13 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
translation[attr] = $trans[0];
$node.attr(attr, match[2]);
// Using jQuery attr() to update the "value" will not change
// what appears in the DOM and will not update the value
// property on inputs. We need to force the right value instead
// of the original translation <span/>.
if (attr === 'value') {
$node[0].value = match[2];
}
$node.addClass('o_translatable_attribute').data('translation', translation);
});
@@ -153,8 +166,9 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
$trans.data('$node', $node);
translation['textContent'] = $trans[0];
$trans.remove();
$node.val(match[2]);
// Update the text content of textarea too.
$node[0].innerText = match[2];
$node.addClass('o_translatable_text').removeClass('o_text_content_invisible')
.data('translation', translation);
@@ -124,7 +124,13 @@ odoo.define('website.s_website_form', function (require) {
// Data-fill-with attribute is given during registry and is used by
// to know which user data should be used to prfill fields.
const dataForEl = document.querySelector(`[data-for='${this.el.id}']`);
if (dataForEl || Object.keys(this.preFillValues).length) {
this.editTranslations = !!this._getContext(true).edit_translations;
// On the "edit_translations" mode, a <span/> with a translated term
// will replace the attribute value, leading to some inconsistencies
// (setting again the <span> on the attributes after the editor's
// cleanup, setting wrong values on the attributes after translating
// default values...)
if (!this.editTranslations && (dataForEl || Object.keys(this.preFillValues).length)) {
const dataForValues = dataForEl ?
JSON.parse(dataForEl.dataset.values
.replace('False', '""')