Files
web/web_responsive/static/src/xml/apps.xml
Jairo Llopis 6235617679 [FIX] web_responsive: Allow searching apps in mobile Chrome
This patch fixes #1251.

The keydown event is faked in mobile chrome because it's not something reliable due to today's virtual keyboards prediction features. Typing a <kbd>C</kbd> character doesn't mean it will be there when user uses autocorrection/autoguessing.

Instead of that, we use now the `keydown` event exclusively for movement features, and `input` event exclusively for content changes in the search input element.

Apart from fixing search in mobile Chrome, it also makes code more readable.

The search input also disables autocompletion since it would be useless and annoying here.
2023-03-01 15:33:26 +01:00

66 lines
2.6 KiB
XML

<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright 2018 Tecnativa - Jairo Llopis
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
<template>
<t t-extend="AppsMenu">
<!-- App icons must be clickable -->
<t t-jquery=".o_app" t-operation="attributes">
<attribute name="t-attf-href">#menu_id=#{app.menuID}&amp;action_id=#{app.actionID}</attribute>
</t>
<!-- App icons should be more than a text -->
<t t-jquery=".o_app &gt; t" t-operation="replace">
<t t-call="web_responsive.AppIcon"/>
</t>
<!-- Same hotkey as in EE -->
<t t-jquery=".full" t-operation="attributes">
<attribute name="accesskey">a</attribute>
</t>
<!-- Search bar -->
<t t-jquery="[t-as=app]" t-operation="before">
<div class="search-container form-row align-items-center mb-4 col-12">
<div class="search-input col-md-10 ml-auto mr-auto mb-2">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-search"/>
</div>
</div>
<input type="search"
autocomplete="off"
placeholder="Search menus..."
class="form-control"/>
</div>
</div>
<div class="search-results col-md-10 ml-auto mr-auto"/>
</div>
</t>
</t>
<!-- Separate app icon template, for easier inheritance -->
<t t-name="web_responsive.AppIcon">
<img class="o-app-icon"
t-attf-src="data:image/png;base64,#{app.web_icon_data}"/>
<span class="o-app-name">
<t t-esc="app.name"/>
</span>
</t>
<!-- A search result -->
<t t-name="web_responsive.MenuSearchResults">
<t t-foreach="results" t-as="result">
<t t-set="menu" t-value="widget._menuInfo(result.original)"/>
<a t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}"
t-attf-style="background-image:url('data:image/png;base64,#{menu.web_icon_data}')"
t-attf-href="#menu_id=#{menu.id}&amp;action_id=#{menu.action_id}"
t-att-data-menu-id="menu.id"
t-att-data-action-id="menu.action_id"
t-att-data-parent-id="menu.parent_id[0]"
t-raw="result.string"/>
</t>
</t>
</template>