[IMP] web: show the search panel on click and search on icon click

This commit allows users:
- to click on the search icon to trigger the search (as if pressing enter)
- to open the search panel by clicking on the search input. This behaviour
  is deactivated on touch devices.

task-id 3649979

closes odoo#156319

Signed-off-by: Luca Vitali (luvi) <[email protected]>

Author: fdardenne

addons/web/static/src/search/search_bar/search_bar.js

@@ -9,6 +9,8 @@ import { _t } from "@web/core/l10n/translation";
 import { SearchBarMenu } from "../search_bar_menu/search_bar_menu";
 
 import { Component, useExternalListener, useRef, useState } from "@odoo/owl";
+import { useDropdownState } from "@web/core/dropdown/dropdown_hooks";
+import { hasTouch } from "@web/core/browser/feature_detection";
 const parsers = registry.category("parsers");
 
 const CHAR_FIELDS = ["char", "html", "many2many", "many2one", "one2many", "text", "properties"];
@@ -54,6 +56,8 @@ export class SearchBar extends Component {
         this.items = useState([]);
         this.subItems = {};
 
+        this.searchBarDropdownState = useDropdownState();
+
         this.orm = useService("orm");
 
         this.keepLast = new KeepLast();
@@ -562,10 +566,19 @@ export class SearchBar extends Component {
         }
     }
 
+    onSearchClick() {
+        if (!hasTouch() && !this.inputRef.el.value.length) {
+            this.searchBarDropdownState.open();
+        }
+    }
+
     /**
      * @param {InputEvent} ev
      */
     onSearchInput(ev) {
+        if (!hasTouch()) {
+            this.searchBarDropdownState.close();
+        }
         const query = ev.target.value;
         if (query.trim()) {
             this.computeState({ query, expanded: [], focusedIndex: 0, subItems: [] });
@@ -574,6 +587,15 @@ export class SearchBar extends Component {
         }
     }
 
+    onClickSearchIcon() {
+        const focusedItem = this.items[this.state.focusedIndex];
+        if (!this.state.query.length) {
+            this.env.searchModel.search();
+        } else if (focusedItem) {
+            this.selectItem(focusedItem);
+        }
+    }
+
     onToggleSearchBar() {
         this.state.showSearchBar = !this.state.showSearchBar;
     }

addons/web/static/src/search/search_bar/search_bar.xml

@@ -59,6 +59,7 @@
             role="searchbox"
             t-ref="autofocus"
             t-on-keydown="onSearchKeydown"
+            t-on-click="onSearchClick"
             t-on-input="onSearchInput"
         />
     </t>
@@ -95,11 +96,16 @@
         <div class="o_cp_searchview d-flex input-group" role="search" t-ref="root">
             <div class="o_searchview form-control d-print-contents d-flex align-items-center py-1 border-end-0"
                  role="search" aria-autocomplete="list">
-                <i class="o_searchview_icon d-print-none oi oi-search me-2"
-                    role="img"
+                <button class="d-print-none btn border-0 p-0"
+                    role="button"
                     aria-label="Search..."
                     title="Search..."
-                />
+                    t-on-click="this.onClickSearchIcon"
+                >
+                    <i class="o_searchview_icon oi oi-search me-2"
+                        role="img"
+                    />
+                </button>
                 <div class="o_searchview_input_container d-flex flex-grow-1 flex-wrap gap-1">
                     <t t-call="web.SearchBar.Facets"/>
                     <t t-call="web.SearchBar.Input"/>
@@ -108,7 +114,7 @@
                     </t>
                 </div>
             </div>
-            <SearchBarMenu>
+            <SearchBarMenu dropdownState="searchBarDropdownState">
                 <t t-slot="search-bar-additional-menu"/>
             </SearchBarMenu>
         </div>

addons/web/static/src/search/search_bar_menu/search_bar_menu.js

@@ -34,6 +34,15 @@ export class SearchBarMenu extends Component {
                 default: { optional: true },
             },
         },
+        dropdownState: {
+            type: Object,
+            optional: true,
+            shape: {
+                isOpen: Boolean,
+                open: Function,
+                close: Function,
+            },
+        },
     };
 
     setup() {

addons/web/static/src/search/search_bar_menu/search_bar_menu.xml

@@ -5,6 +5,7 @@
         <Dropdown menuClass="'o_search_bar_menu d-flex flex-wrap flex-lg-nowrap w-100 w-md-auto mx-md-auto mt-2 py-3'"
                   position="'bottom-end'"
                   holdOnHover="true"
+                  state="this.props.dropdownState"
                   t-if="this.env.searchModel.searchMenuTypes.size">
             <button
                 class="o_searchview_dropdown_toggler d-print-none btn btn-outline-secondary o-dropdown-caret rounded-start-0"

addons/web/static/tests/legacy/search/search_bar_tests.js

@@ -1720,4 +1720,30 @@ QUnit.module("Search", (hooks) => {
         assert.deepEqual(getFacetTexts(target), ["Bar is in ( First record )"]);
         assert.verifySteps([`/web/domain/validate`]);
     });
+
+    QUnit.test("clicking on search input trigger the search menu", async function (assert) {
+        await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: SearchBar,
+        });
+        await click(target, ".o_searchview_input");
+        assert.containsOnce(target, ".o_search_bar_menu");
+    });
+
+    QUnit.test("clicking on the searchview icon trigger the search", async function (assert) {
+        await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: SearchBar,
+            searchViewId: false,
+        });
+        await editSearch(target, "a");
+        await click(target, ".o_searchview button");
+        assert.strictEqual(
+            target.querySelector(".o_searchview_input_container .o_facet_values").innerText.trim(),
+            "a",
+            "There should be a field facet with label 'a'"
+        );
+    });
 });

addons/web/static/tests/legacy/views/kanban/kanban_view_tests.js

@@ -14231,7 +14231,7 @@ QUnit.module("Views", (hooks) => {
             const cpButtons = getVisibleButtons(target);
             assert.deepEqual(
                 [...cpButtons].map((button) => button.textContent.trim()),
-                ["New", "display", ""]
+                ["New", "display", "", ""]
             );
             assert.hasClass(cpButtons[1], "display");
 

addons/web/static/tests/legacy/views/list_view_tests.js

@@ -1042,6 +1042,7 @@ QUnit.module("Views", (hooks) => {
                 [
                     "New",
                     "display",
+                    "", // magnifying glass btn
                     "", // cog dropdown
                     "", // search btn
                 ]
@@ -1065,6 +1066,7 @@ QUnit.module("Views", (hooks) => {
                 [
                     "New",
                     "display",
+                    "", // magnifying glass btn
                     "", // cog dropdown
                     "", // search btn
                 ]