[FIX] web: useAutofocus in mobile mode

In https://github.com/odoo/odoo/commit/4308de6aab93630c2c24a2d1d2ffd2db4e1d4b6b, the API of useAutofocus
was modified but only partly leading to problems in mobile mode.
We make the appropriate correction.

closes odoo/odoo#84541

Related: odoo/enterprise#24324
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Mathieu Duckerts-Antoine
2022-02-15 14:54:52 +00:00
parent 78c0257ae4
commit 93ea0d6ff9
2 changed files with 41 additions and 4 deletions
+3 -3
View File
@@ -31,16 +31,16 @@ const { status, useComponent, useEffect, useRef } = owl;
*/
export function useAutofocus() {
const comp = useComponent();
let ref = useRef("autofocus");
// Prevent autofocus in mobile
if (comp.env.isSmall) {
return () => {};
return ref;
}
// LEGACY
if (comp.env.device && comp.env.device.isMobileDevice) {
return () => {};
return ref;
}
// LEGACY
let ref = useRef("autofocus");
useEffect(
(el) => {
if (el) {
@@ -6,7 +6,7 @@ import { registry } from "@web/core/registry";
import { makeTestEnv } from "@web/../tests/helpers/mock_env";
import { click, destroy, getFixture, mount, nextTick } from "@web/../tests/helpers/utils";
const { Component, xml } = owl;
const { Component, onMounted, xml } = owl;
const serviceRegistry = registry.category("services");
QUnit.module("utils", () => {
@@ -72,6 +72,43 @@ QUnit.module("utils", () => {
assert.strictEqual(document.activeElement, comp.inputRef.el);
});
QUnit.test("useAutofocus returns also a ref when isSmall is true", async function (assert) {
assert.expect(2);
class MyComponent extends Component {
setup() {
this.inputRef = useAutofocus();
assert.ok(this.env.isSmall);
onMounted(() => {
assert.ok(this.inputRef.el);
});
}
}
MyComponent.template = xml`
<span>
<input type="text" t-ref="autofocus" />
</span>
`;
const fakeUIService = {
start(env) {
let ui = {};
Object.defineProperty(env, "isSmall", {
get() {
return true;
},
});
return ui;
},
};
registry.category("services").add("ui", fakeUIService);
const env = await makeTestEnv();
const target = getFixture();
await mount(MyComponent, target, { env });
});
QUnit.module("useBus");
QUnit.test("useBus hook: simple usecase", async function (assert) {