From 638d0e875dcb05191fe833d2f889235891dfb46a Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 20 Jun 2022 10:23:01 +0000
Subject: [PATCH] [FIX] web_editor: prevent dropping form fields outside of
 their form

Drop zones are available outside form when dragging form fields.
This leads to errors whenever the field is dropped outside a form.

This commit removes all drop zones outside the form when a field is
dragged.

Steps to reproduce:
- Edit Contact Us form.
- Drag'n'drop a field to the footer.
=> Error popup (should not be allowed in the first place)

task-2855670

closes odoo/odoo#108863

X-original-commit: 31aec4f89eea5f6095e420137c9603732674901c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js           | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index f2d6a2b40d5..86fadd1709a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1054,6 +1054,7 @@ var SnippetEditor = Widget.extend({
             width: self.$target.width(),
             height: self.$target.height()
         };
+        const closestFormEl = this.$target[0].closest('form');
         self.$target.after('<div class="oe_drop_clone" style="display: none;"/>');
         self.$target.detach();
         self.$el.addClass('d-none');
@@ -1081,6 +1082,16 @@ var SnippetEditor = Widget.extend({
         if (this.$target[0].classList.contains('s_table_of_content')) {
             $selectorChildren = $selectorChildren.filter((i, el) => !el.closest('.s_table_of_content'));
         }
+        // Disallow dropping form fields outside of their form.
+        // TODO this can probably be implemented by reviewing data-drop-near
+        // definitions in master but we should find a better to define those and
+        // such cases.
+        if (this.$target[0].classList.contains('s_website_form_field')) {
+            $selectorSiblings = $selectorSiblings.filter(
+                (i, el) => closestFormEl === el.closest('form')
+            );
+        }
+
         const canBeSanitizedUnless = this._canBeSanitizedUnless(this.$target[0]);
 
         // Remove the siblings that belong to a snippet in grid mode