From 05d133c47cf11198a90ebf5baf8f28de3725f2bb Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Wed, 9 Feb 2022 10:43:39 +0000
Subject: [PATCH] [FIX] website, web_editor: fix form ids generation

Commit [1] modified the function that generates HTML ids, unfortunately
this was not done correctly and should have been done in all versions
since 14.0. This commit fixes that by bringing the benefits that commit
[1] brings (correction so that HTML Ids don't start with a number) but
without the defaults that it has.
See the related discussion here [2].

[1]: https://github.com/odoo/odoo/commit/3dde03308d4adffd861570230edcef1c5f7fc1c4
[2]: https://github.com/odoo/odoo/pull/80217#discussion_r787975515

task-2760205

closes odoo/odoo#84474

X-original-commit: 105f80e57cacf48dcdafc41dc3d1cf418c75311e
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_editor/static/src/js/common/utils.js        | 10 ++--------
 .../static/src/js/editor/snippets.options.js           |  2 +-
 .../static/src/snippets/s_social_media/options.js      |  2 +-
 .../static/src/snippets/s_website_form/options.js      |  2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 77c63a55b0c..061267020b8 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -340,16 +340,10 @@ function _isColorGradient(value) {
  * Generates a string ID.
  *
  * @private
- * @param {integer} length the length of the generated ID.
  * @returns {string}
  */
-function _generateHTMLId(length) {
-    let result = '';
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    while (result.length < length) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
-    }
-    return result;
+function _generateHTMLId() {
+    return `o${Math.random().toString(36).substring(2, 15)}`;
 }
 /**
  * Returns the class of the element that matches the specified prefix.
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 186698ff35a..b0e936a3b9c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -2161,7 +2161,7 @@ const ListUserValueWidget = UserValueWidget.extend({
     _onAddCustomItemClick() {
         let id;
         if (this.el.dataset.generateIdForNewItems) {
-            id = generateHTMLId(30);
+            id = generateHTMLId();
         }
         if (this.el.dataset.newElementsToggled) {
             this.selected.push(id);
diff --git a/addons/website/static/src/snippets/s_social_media/options.js b/addons/website/static/src/snippets/s_social_media/options.js
index d9f1ab6d180..7828c67bb81 100644
--- a/addons/website/static/src/snippets/s_social_media/options.js
+++ b/addons/website/static/src/snippets/s_social_media/options.js
@@ -9,7 +9,7 @@ options.registry.SocialMedia = options.Class.extend({
      * @override
      */
     async willStart() {
-        this.$target[0].querySelectorAll(':scope > a').forEach(el => el.setAttribute('id', generateHTMLId(30)));
+        this.$target[0].querySelectorAll(':scope > a').forEach(el => el.setAttribute('id', generateHTMLId()));
         await this._super(...arguments);
         let websiteId;
         this.trigger_up('context_get', {
diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js
index 2f1f140dd44..a2572e5bb61 100644
--- a/addons/website/static/src/snippets/s_website_form/options.js
+++ b/addons/website/static/src/snippets/s_website_form/options.js
@@ -127,7 +127,7 @@ const FormEditor = options.Class.extend({
      */
     _renderField: function (field, resetId = false) {
         if (!field.id) {
-            field.id = generateHTMLId(30);
+            field.id = generateHTMLId();
         }
         const template = document.createElement('template');
         template.innerHTML = qweb.render("website.form_field_" + field.type, {field: field}).trim();