From 75aca37453384aa58617d0505936cd9f2039fedf Mon Sep 17 00:00:00 2001
From: Vincent Schippefilt <vsc@odoo.com>
Date: Tue, 30 Jul 2019 14:03:00 +0000
Subject: [PATCH] [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 | 12 ++++++++++++
 addons/web/static/src/scss/list_view.scss            |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index f7efaab1798..d4896276b90 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/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
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index a18d9f70083..0311747ebe8 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/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;
         }