[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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user