mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
975ed32f0b
Previously, refs could get set to null incorrectly, or could stay set when they shouldn't. This was caused by the fact that singleRefSetter and multiRefSetters are created on every render, meaning that any render that did not affect the status of the ref (mounted or not), would overwrite the previous ref setter, including its closure, causing the captured `_el` or `count` to be lost. This means that on a subsequent render that did affect the status of the ref, the singleRefSetter would consider that it did not set the ref, and so shouldn't unset it, causing it to incorrectly stay keep the element, while in multiRefSetter, the opposite problem occured: the count would be 0 on removal, causing it to believe that it was the first call in the corresponding patch that affected the ref, when in fact, the closure is already stale, because it was created from the previous render, and the fresh multiRefSetter from the latest render may already have been called by an element with that ref that came earlier in the template. This commit changes the ref setting strategy to work around the issue of stale closures: we define a setRef method on ComponentNode that is always called, this method ignores calls with `null`, meaning that the refs object on the ComponentNode never reverts to a null value for any key. Instead, the useRef hook will check whether the element that the ref points to is still mounted, and return null if not.
141 lines
4.1 KiB
Plaintext
141 lines
4.1 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`t-ref can get a dynamic ref on a node 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const v1 = ctx['id'];
|
|
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
|
|
return block1([ref1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const v1 = ctx['id'];
|
|
let ref1 = (el) => this.__owl__.setRef((\`myspan\${v1}\`), el);
|
|
return block1([ref1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref can get a ref on a node 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let ref1 = (el) => this.__owl__.setRef((\`myspan\`), el);
|
|
return block1([ref1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref ref in a t-call 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
const callTemplate_1 = app.getTemplate(\`sub\`);
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref ref in a t-call 2`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
|
return block1([ref1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref ref in a t-if 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2;
|
|
if (ctx['condition']) {
|
|
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
|
b2 = block2([ref1]);
|
|
}
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref refs in a loop 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
let { prepareList, withKey } = helpers;
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
ctx = Object.create(ctx);
|
|
const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
|
|
for (let i1 = 0; i1 < l_block2; i1++) {
|
|
ctx[\`item\`] = v_block2[i1];
|
|
const key1 = ctx['item'];
|
|
const tKey_1 = ctx['item'];
|
|
const v1 = ctx['item'];
|
|
let ref1 = (el) => this.__owl__.setRef(((v1)), el);
|
|
let txt1 = ctx['item'];
|
|
c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
|
|
}
|
|
const b2 = list(c_block2);
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`t-ref two refs, one in a t-if 1`] = `
|
|
"function anonymous(app, bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
|
|
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2;
|
|
if (ctx['condition']) {
|
|
let ref1 = (el) => this.__owl__.setRef((\`name\`), el);
|
|
b2 = block2([ref1]);
|
|
}
|
|
let ref2 = (el) => this.__owl__.setRef((\`p\`), el);
|
|
return block1([ref2], [b2]);
|
|
}
|
|
}"
|
|
`;
|