[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>

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,
+};

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() {

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"/>

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",