From f5543ca74e9061f5b631917e6fb15f63db63cac9 Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Thu, 21 Dec 2023 09:20:29 +0100
Subject: [PATCH] [FIX] web: keydown on list view in a dialog

Description:
===========
Before this commit, when a line in edit mode in a list view is the last
tabable element in a dialog, pressing "tab" does not cause a switch to
the next line in edit mode. It is therefore not possible to navigate
in this dialog using "tab".

Problem:
=======
Currently, the ListRenderer listens to keydown events using few t-on-keydown.synthetic
in order to know whether to switch the next line to edition.
For information, the effect of a synthetic is to create a single listener
on "document" instead of creating a listener for each element. There is
a conflict with the ui service which listens to all the "tab" keydowns
in order to check whether or not we are on the last tabable element of
the current activeElement. If we are, we stop the event and focus on the
first tabable element. This feature avoids the need to navigate outside
dialogs by pressing tab.
In our situation, this has the effect of stopping the keydown event
before the synthetic can receive it, as the service ui listener is placed
on the dialog and the synthetic listener on the document.

Solution:
========
Remove the use of synthetic in the ListRenderer.
No significant loss of performance was observed.

closes odoo/odoo#147027

X-original-commit: 48e154e
Related: odoo/enterprise#53150
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Francois Georis (fge) <fge@odoo.com>
---
 .../static/src/views/list/list_renderer.xml   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 1781d0dd38c..caff9c8511e 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -13,7 +13,7 @@
             <table t-attf-class="o_list_table table table-sm table-hover position-relative mb-0 {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped table-striped'}}" t-ref="table">
                 <thead>
                     <tr>
-                        <th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
+                        <th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
                             <CheckBox disabled="!canSelectRecord" value="selectAll" className="'d-flex m-0'" onChange.bind="toggleSelection"/>
                         </th>
                         <t t-foreach="state.columns" t-as="column" t-key="column.id">
@@ -22,7 +22,7 @@
                                 t-att-class="getColumnClass(column) + ' opacity-trigger-hover'"
                                 t-on-pointerup="onColumnTitleMouseUp"
                                 t-on-click="() => this.onClickSortColumn(column)"
-                                t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)"
+                                t-on-keydown="(ev) => this.onCellKeydown(ev)"
                                 t-att-data-tooltip-template="isDebugMode ? 'web.FieldTooltip' : false"
                                 t-att-data-tooltip-info="isDebugMode ? makeTooltip(column) : false"
                                 data-tooltip-delay="1000"
@@ -39,10 +39,10 @@
                                           t-on-pointerdown.stop.prevent="onStartResize"/>
                                 </t>
                             </th>
-                            <th t-else="" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-att-class="{o_list_button: column.type === 'button_group'}"/>
+                            <th t-else="" t-on-keydown="(ev) => this.onCellKeydown(ev)" t-att-class="{o_list_button: column.type === 'button_group'}"/>
                         </t>
-                        <th t-if="props.onOpenFormView" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" class="o_list_open_form_view"/>
-                        <th t-if="displayOptionalFields or activeActions.onDelete" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" class="o_list_controller o_list_actions_header position-sticky end-0">
+                        <th t-if="props.onOpenFormView" t-on-keydown="(ev) => this.onCellKeydown(ev)" class="o_list_open_form_view"/>
+                        <th t-if="displayOptionalFields or activeActions.onDelete" t-on-keydown="(ev) => this.onCellKeydown(ev)" class="o_list_controller o_list_actions_header position-sticky end-0">
                             <Dropdown t-if="displayOptionalFields"
                                 class="'o_optional_columns_dropdown text-center border-top-0'"
                                 togglerClass="'btn p-0'"
@@ -105,7 +105,7 @@
                 <td t-if="withHandleColumn"/>
                 <td t-att-colspan="withHandleColumn ? nbCols - 1 : nbCols"
                     class="o_field_x2many_list_row_add"
-                    t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, null)"
+                    t-on-keydown="(ev) => this.onCellKeydown(ev, null)"
                 >
                     <t t-foreach="creates" t-as="create" t-key="create_index">
                         <a
@@ -153,7 +153,7 @@
                             <a href="#"
                                 role="button"
                                 t-on-click.stop.prevent="() => group.addNewRecord({}, props.editable === 'top')"
-                                t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)"
+                                t-on-keydown="(ev) => this.onCellKeydown(ev)"
                             >
                                 Add a line
                             </a>
@@ -168,7 +168,7 @@
         <tr t-attf-class="{{group.count > 0 ? 'o_group_has_content' : ''}} o_group_header {{!group.isFolded ? 'o_group_open' : ''}} cursor-pointer"
             t-on-click="() => this.toggleGroup(group)"
         >
-            <th t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)"
+            <th t-on-keydown="(ev) => this.onCellKeydown(ev, group)"
                 tabindex="-1"
                 t-attf-class="o_group_name fs-6 fw-bold {{!group.isFolded ? 'text-900' : 'text-700'}}"
                 t-att-colspan="getGroupNameCellColSpan(group)">
@@ -203,11 +203,11 @@
                     </div>
                 </div>
             </th>
-            <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" t-foreach="getAggregateColumns(group)" t-as="column" t-key="column.id" t-att-class="{'o_list_number': column.type === 'field'}">
+            <td t-on-keydown="(ev) => this.onCellKeydown(ev, group)" t-foreach="getAggregateColumns(group)" t-as="column" t-key="column.id" t-att-class="{'o_list_number': column.type === 'field'}">
                 <t t-if="column.type === 'field'" t-esc="formatAggregateValue(group, column)"/>
             </td>
             <t t-set="groupPagerColspan" t-value="getGroupPagerCellColspan(group)"/>
-            <th t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" t-if="groupPagerColspan > 0" t-att-colspan="groupPagerColspan"/>
+            <th t-on-keydown="(ev) => this.onCellKeydown(ev, group)" t-if="groupPagerColspan > 0" t-att-colspan="groupPagerColspan"/>
         </tr>
     </t>
 
@@ -223,13 +223,13 @@
             t-on-touchend="() => this.onRowTouchEnd(record)"
             t-on-touchmove="() => this.onRowTouchMove(record)"
         >
-            <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" t-if="hasSelectors" class="o_list_record_selector user-select-none" t-on-click.stop="() => this.toggleRecordSelection(record)" tabindex="-1">
+            <td t-on-keydown="(ev) => this.onCellKeydown(ev, group, record)" t-if="hasSelectors" class="o_list_record_selector user-select-none" t-on-click.stop="() => this.toggleRecordSelection(record)" tabindex="-1">
                 <CheckBox disabled="!canSelectRecord" value="record.selected" onChange.alike="() => this.toggleRecordSelection(record)" />
             </td>
             <t t-foreach="getColumns(record)" t-as="column" t-key="column.id">
                 <t t-if="column.type === 'field'">
                     <t t-set="isInvisible" t-value="evalInvisible(column.invisible, record) or !(column.name in record.data)"/>
-                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)"
+                    <td t-on-keydown="(ev) => this.onCellKeydown(ev, group, record)"
                         class="o_data_cell cursor-pointer"
                         t-att-class="getCellClass(column, record)"
                         t-att-name="column.name"
@@ -244,7 +244,7 @@
                     </td>
                 </t>
                 <t t-if="column.type === 'button_group'">
-                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell cursor-pointer" t-att-class="getCellClass(column, record)" t-on-click="(ev) => this.onButtonCellClicked(record, column, ev)" tabindex="-1">
+                    <td t-on-keydown="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell cursor-pointer" t-att-class="getCellClass(column, record)" t-on-click="(ev) => this.onButtonCellClicked(record, column, ev)" tabindex="-1">
                         <t t-foreach="column.buttons" t-as="button" t-key="button.id">
                             <ViewButton t-if="!evalInvisible(button.invisible, record)"
                                 className="button.className"
@@ -270,7 +270,7 @@
 
             <t t-if="props.onOpenFormView">
                 <td class="o_list_record_open_form_view text-center"
-                    t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)"
+                    t-on-keydown="(ev) => this.onCellKeydown(ev, group, record)"
                     t-on-click.stop="() => props.onOpenFormView(record)"
                     tabindex="-1"
                 >
@@ -287,7 +287,7 @@
             <t t-if="displayOptionalFields or hasX2ManyAction">
                 <t t-if="hasX2ManyAction">
                     <td class="o_list_record_remove text-center"
-                        t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)"
+                        t-on-keydown="(ev) => this.onCellKeydown(ev, group, record)"
                         t-on-click.stop="() => this.onDeleteRecord(record)"
                         tabindex="-1"
                     >