[IMP] web_editor, website: improve the behavior of we-list

This commit improves the handling of events on the editor's lists. The
fields that make up the list can trigger a preview and it is possible to
switch from one field to another using the keyboard. Note that the
social media we-list must render at each blur of one of its inputs, so
this we-list does not allow to switch from one input to another with the
keyboard.

As the we-list events changed, the social media block tests had to be
slightly modified to take these changes into account.

task-2601533

Part-of: odoo/odoo#81241

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -1956,7 +1956,8 @@ const ListUserValueWidget = UserValueWidget.extend({
         'click we-button.o_we_list_add_existing': '_onAddExistingItemClick',
         'click we-select.o_we_user_value_widget.o_we_add_list_item': '_onAddItemSelectClick',
         'click we-button.o_we_checkbox_wrapper': '_onAddItemCheckboxClick',
-        'change table input': '_onListItemChange',
+        'input table input': '_onListItemBlurInput',
+        'blur table input': '_onListItemBlurInput',
     },
 
     /**
@@ -2171,8 +2172,9 @@ const ListUserValueWidget = UserValueWidget.extend({
     },
     /**
      * @private
+     * @param {Boolean} [preview]
      */
-    _notifyCurrentState() {
+    _notifyCurrentState(preview = false) {
         const values = [...this.listTable.querySelectorAll('.o_we_list_record_name input')].map(el => {
             let id = this.isCustom ? el.value : el.name;
             if (this.el.dataset.idMode && this.el.dataset.idMode === "name") {
@@ -2199,7 +2201,11 @@ const ListUserValueWidget = UserValueWidget.extend({
             });
         }
         this._value = JSON.stringify(values);
-        this.notifyValueChange(false);
+        if (preview) {
+            this._onUserValuePreview();
+        } else {
+            this._onUserValueChange();
+        }
         if (!this.createWidget && !this.isCustom) {
             this._reloadSelectDropdown(values);
         }
@@ -2274,9 +2280,19 @@ const ListUserValueWidget = UserValueWidget.extend({
     },
     /**
      * @private
+     * @param {Event} ev
      */
-    _onListItemChange() {
-        this._notifyCurrentState();
+    _onListItemBlurInput(ev) {
+        const preview = ev.type === 'input';
+        if (preview || !this.el.contains(ev.relatedTarget) || this.el.dataset.renderOnInputBlur) {
+            // We call the function below only if the element that recovers the
+            // focus after this blur is not an element of the we-list or if it
+            // is an input event (preview). This allows to use the TAB key to go
+            // from one input to another in the list. This behavior can be
+            // cancelled if the widget has reloadOnInputBlur = "true" in its
+            // dataset.
+            this._notifyCurrentState(preview);
+        }
     },
     /**
      * @private

addons/website/static/tests/tours/snippet_social_media.js

@@ -20,7 +20,7 @@ const addNewSocialNetwork = function (optionIndex, linkIndex, url) {
     {
         content: "Change added Option label",
         trigger: `we-list table input:eq(${optionIndex})`,
-        run: `text ${url}`,
+        run: `text_blur ${url}`,
     },
     {
         content: "Ensure new link is changed",
@@ -79,7 +79,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', {
     {
         content: 'Change custom social to unsupported link',
         trigger: 'we-list table input:eq(5)',
-        run: 'text https://www.paypal.com/abc',
+        run: 'text_blur https://www.paypal.com/abc',
     },
     {
         content: "Ensure paypal icon is found",
@@ -118,7 +118,7 @@ wTourUtils.registerWebsitePreviewTour('snippet_social_media', {
     {
         content: 'Change url of the DB instagram link',
         trigger: 'we-list table input:eq(3)',
-        run: 'text https://instagram.com/odoo.official/',
+        run: 'text_blur https://instagram.com/odoo.official/',
     },
     {
         content: 'Save',

addons/website/views/snippets/s_social_media.xml

@@ -32,7 +32,8 @@
             <we-list string="Social Networks" t-att-data-add-item-title="add_item_title"
                 data-render-list-items="" data-has-default="multiple" data-name="social_media_list"
                 data-default-value="https://www.example.com" data-id-mode="name"
-                data-new-elements-not-toggleable="true" data-no-preview="true"/>
+                data-new-elements-not-toggleable="true" data-no-preview="true"
+                data-render-on-input-blur="true"/>
         </div>
     </xpath>
 </template>