From 91af1abbd5ceb91cb47a19daeaffc3a2dcb55b4b Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Thu, 25 May 2023 13:26:10 +0000
Subject: [PATCH] [FIX] web: searchbar in listview takes focus after unselected
 all items

Steps to reproduce:

1. Open the "project" app
2. Switch to the list view
3. Select "All items"
4. Unselect "All items"
5. The focus searchbar is now focused => bug

The searchbar is autofocused (each time it enters into the dom). Unlike
before, in lists, it is removed when there are selected records, and
comes back when there's no selection anymore. As a consequence, it takes
back the focus. It should only take the focus on a first load, not every
time the searchbar re-appears

Task ID: 3336233

closes odoo/odoo#123025

X-original-commit: 15aacceb401a6868b694870693e7679677be80a0
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../src/search/search_bar/search_bar.js       | 14 ++++++++---
 .../static/src/views/list/list_controller.js  | 14 ++++++++++-
 .../static/src/views/list/list_controller.xml |  2 +-
 .../web/static/tests/views/list_view_tests.js | 25 +++++++++++++++++++
 4 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
index a2ed1ec39bf..dd43fc0e1aa 100644
--- a/addons/web/static/src/search/search_bar/search_bar.js
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -41,9 +41,10 @@ export class SearchBar extends Component {
 
         this.keepLast = new KeepLast();
 
-        this.inputRef = this.env.config.disableSearchBarAutofocus
-            ? useRef("autofocus")
-            : useAutofocus();
+        this.inputRef =
+            this.env.config.disableSearchBarAutofocus || !this.props.autofocus
+                ? useRef("autofocus")
+                : useAutofocus();
 
         useBus(this.env.searchModel, "focus-search", () => {
             this.inputRef.el.focus();
@@ -572,4 +573,9 @@ SearchBar.template = "web.SearchBar";
 SearchBar.components = {
     SearchBarMenu,
 };
-SearchBar.props = {};
+SearchBar.props = {
+    autofocus: { type: Boolean, optional: true },
+};
+SearchBar.defaultProps = {
+    autofocus: true,
+};
diff --git a/addons/web/static/src/views/list/list_controller.js b/addons/web/static/src/views/list/list_controller.js
index 9929ee7d01c..e4a2a41d067 100644
--- a/addons/web/static/src/views/list/list_controller.js
+++ b/addons/web/static/src/views/list/list_controller.js
@@ -27,7 +27,15 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
 import { ActionMenusItems } from "@web/search/cog_menu/action_menus_items";
 
-import { Component, onMounted, onWillStart, useEffect, useRef, useSubEnv } from "@odoo/owl";
+import {
+    Component,
+    onMounted,
+    onWillPatch,
+    onWillStart,
+    useEffect,
+    useRef,
+    useSubEnv,
+} from "@odoo/owl";
 
 // -----------------------------------------------------------------------------
 
@@ -146,6 +154,10 @@ export class ListController extends Component {
             () => [this.model.root.selection.length]
         );
         this.searchBarToggler = useSearchBarToggler();
+        this.firstLoad = true;
+        onWillPatch(() => {
+            this.firstLoad = false;
+        });
     }
 
     get modelParams() {
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
index 8c0a00f8558..4c036f9b536 100644
--- a/addons/web/static/src/views/list/list_controller.xml
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -32,7 +32,7 @@
                 </t>
 
                 <t t-set-slot="layout-actions">
-                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar" autofocus="firstLoad"/>
                 </t>
                 <t t-set-slot="control-panel-navigation-additional">
                     <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index cfac9d3fa25..69e78007458 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -492,6 +492,31 @@ QUnit.module("Views", (hooks) => {
         assert.containsNone(target, ".o_list_button_add", "should not have the 'Create' button");
     });
 
+    QUnit.test(
+        "searchbar in listview doesn't take focus after unselected all items",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `<tree><field name="foo"/></tree>`,
+            });
+
+            assert.equal(
+                document.activeElement,
+                target.querySelector(".o_searchview_input"),
+                "The search input should be have the focus"
+            );
+            await click(target, `tbody .o_data_row:first-child input[type="checkbox"]`);
+            await click(target, `tbody input[type="checkbox"]:checked`);
+            assert.notEqual(
+                document.activeElement,
+                target.querySelector(".o_searchview_input"),
+                "The search input shouldn't have the focus"
+            );
+        }
+    );
+
     QUnit.test('list with delete="0"', async function (assert) {
         await makeView({
             type: "list",