[IMP] web: listview remove extra style on click

Before this commit, when clicking on a cell in the listview, the cell
receives the focus, which makes it have an extra style (darker gray)
when waiting for the page to laod.

After this commit, the extra style will only be added when using the
keyboard to navigate between the cells and not on click.

task-id: 2041902

closes odoo/odoo#35303

Signed-off-by: Mathieu Duckerts-Antoine <Polymorphe57@users.noreply.github.com>

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

@@ -36,6 +36,7 @@ var FIELD_CLASSES = {
 var ListRenderer = BasicRenderer.extend({
     className: 'o_list_view',
     events: {
+        "mousedown": "_onMouseDown",
         "click .o_optional_columns_dropdown .dropdown-item": "_onToggleOptionalColumn",
         "click .o_optional_columns_dropdown_toggle": "_onToggleOptionalColumnDropdown",
         'click tbody tr': '_onRowClicked',
@@ -1068,6 +1069,7 @@ var ListRenderer = BasicRenderer.extend({
             case $.ui.keyCode.LEFT:
                 ev.preventDefault();
                 $tr = $cell.closest('tr');
+                $tr.closest('tbody').addClass('o_keyboard_navigation');
                 if ($tr.hasClass('o_group_header') && $tr.hasClass('o_group_open')) {
                     this._onToggleGroup(ev);
                 } else {
@@ -1077,6 +1079,7 @@ var ListRenderer = BasicRenderer.extend({
             case $.ui.keyCode.RIGHT:
                 ev.preventDefault();
                 $tr = $cell.closest('tr');
+                $tr.closest('tbody').addClass('o_keyboard_navigation');
                 if ($tr.hasClass('o_group_header') && !$tr.hasClass('o_group_open')) {
                     this._onToggleGroup(ev);
                 } else {
@@ -1085,11 +1088,13 @@ var ListRenderer = BasicRenderer.extend({
                 break;
             case $.ui.keyCode.UP:
                 ev.preventDefault();
+                $cell.closest('tbody').addClass('o_keyboard_navigation');
                 colIndex = this.currentColIndex || $cell.index();
                 $futureCell = this._findConnectedCell($cell, 'prev', colIndex);
                 break;
             case $.ui.keyCode.DOWN:
                 ev.preventDefault();
+                $cell.closest('tbody').addClass('o_keyboard_navigation');
                 colIndex = this.currentColIndex || $cell.index();
                 $futureCell = this._findConnectedCell($cell, 'next', colIndex);
                 break;
@@ -1119,6 +1124,13 @@ var ListRenderer = BasicRenderer.extend({
             }
         }
     },
+    /**
+     *
+     * @param {MouseEvent} ev
+     */
+    _onMouseDown: function(ev) {
+        $('.o_keyboard_navigation').removeClass('o_keyboard_navigation');
+    },
     /**
      * @private
      * @param {MouseEvent} ev

addons/web/static/src/scss/list_view.scss

@@ -153,7 +153,8 @@
                 background-color: lighten($o-form-lightsecondary, 10%);
             }
         }
-        thead th:focus-within, tbody td:focus-within {
+        thead th:focus-within,
+        tbody.o_keyboard_navigation td:focus-within {
             background-color: $o-form-lightsecondary;
             outline: none;
         }