[FIX] web: clipped dropdown on firefox in list views

On firefox and safari applying a position-sticky on an element inside
an other element with an overflow is causing a rendering issue (see
issue [1]).

This was occuring with the dropdown `.o_optional_columns_dropdown`
making it unusable as soon as the `overflow-x` triggered the horizontal
scroll in the table.

This commit works around this bug by moving the dropdown's menu out of
the actual table and attachs it to the ListRender's root element.

As this issue is specific to the Optional Fields dropdown, we
implemented it only in the ListRender (and not for all Dropdowns). Also
the issue is not present anymore in master since the Dropdown
refactoring (see PR [2]).

Note: a unique class identifying the ListRenderer has been introduced to
handle multiple List Views rendered at the same time (in the same view,
in modal...) as the the `t-portal` requires a global selector and
doesn't allow to use relative one (i.e. searching only the parents ; cf.
OWL feature request [3]).

task-3696473
opw-3682280
opw-3697814

X-original-commit: 01cd6d4d0cfa418f5a72a90742d10ee44af523a4

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1887116
[2]: https://github.com/odoo/odoo/pull/137691
[3]: https://github.com/odoo/owl/issues/1428

closes odoo/odoo#160566

X-original-commit: 9a9da10bf5d1c0f96f48c9d56807512e0ad1d6ef
Related: odoo/enterprise#60116
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/views/list/list_renderer.js

@@ -20,6 +20,7 @@ import { useBounceButton } from "@web/views/view_hook";
 import { Widget } from "@web/views/widgets/widget";
 import { getFormattedValue } from "../utils";
 import { localization } from "@web/core/l10n/localization";
+import { uniqueId } from "@web/core/utils/functions";
 
 import {
     Component,
@@ -73,6 +74,26 @@ function getElementToFocus(cell, index) {
     return getTabableElements(cell).at(index) || cell;
 }
 
+/**
+ * Here be dragons. 🐉
+ * This is a workaround to avoid clipping issues in Firefox and Safari.
+ * cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1887116
+ */
+class OptionalFieldsDropdown extends Dropdown {
+    static template = "web.ListRenderer.OptionalFieldsDropdown";
+    static props = {
+        ...Dropdown.props,
+        listRendererClass: String,
+    };
+
+    onWindowClicked(ev) {
+        if (ev.target.closest(".o_optional_columns_dropdown.o-dropdown--menu")) {
+            return;
+        }
+        super.onWindowClicked(...arguments);
+    }
+}
+
 export class ListRenderer extends Component {
     setup() {
         this.uiService = useService("ui");
@@ -215,6 +236,7 @@ export class ListRenderer extends Component {
             this.lastEditedCell = null;
         });
         this.isRTL = localization.direction === "rtl";
+        this.uniqueRendererClass = uniqueId("o_list_renderer_");
     }
 
     displaySaveNotification() {
@@ -2137,7 +2159,7 @@ ListRenderer.rowsTemplate = "web.ListRenderer.Rows";
 ListRenderer.recordRowTemplate = "web.ListRenderer.RecordRow";
 ListRenderer.groupRowTemplate = "web.ListRenderer.GroupRow";
 
-ListRenderer.components = { DropdownItem, Field, ViewButton, CheckBox, Dropdown, Pager, Widget };
+ListRenderer.components = { DropdownItem, Field, ViewButton, CheckBox, Dropdown: OptionalFieldsDropdown, Pager, Widget };
 ListRenderer.props = [
     "activeActions?",
     "list",

addons/web/static/src/views/list/list_renderer.xml

@@ -5,6 +5,7 @@
         <t t-set="_canSelectRecord" t-value="canSelectRecord"/>
         <div
             class="o_list_renderer o_renderer table-responsive"
+            t-att-class="uniqueRendererClass"
             tabindex="-1"
             t-ref="root"
         >
@@ -48,6 +49,7 @@
                                 class="'o_optional_columns_dropdown text-center border-top-0'"
                                 togglerClass="'btn p-0'"
                                 skipTogglerTabbing="true"
+                                listRendererClass="uniqueRendererClass"
                                 position="'bottom-end'">
                                 <t t-set-slot="toggler">
                                     <i class="o_optional_columns_dropdown_toggle oi oi-fw oi-settings-adjust"/>
@@ -308,4 +310,11 @@
         </tr>
     </t>
 
+    <t t-name="web.ListRenderer.OptionalFieldsDropdown" t-inherit="web.Dropdown" t-inherit-mode="primary">
+        <xpath expr="//div[@t-if='state.open']" position="attributes">
+            <attribute name="t-portal">`.${props.listRendererClass}`</attribute>
+            <attribute name="class" add="o_optional_columns_dropdown" separator=" "/>
+        </xpath>
+    </t>
+
 </templates>