pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: keydown on list view in a dialog

Browse Source 
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>
This commit is contained in:
FrancoisGe
2023-12-21 10:42:46 +00:00
parent c3e497f1d2
commit f5543ca74e
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/views/list/list_renderer.xml
+15 -15
View File
@@ -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"
>