diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts index 0f7cd57cb8..f65d8be4f6 100644 --- a/src/compile/nodes/Component.ts +++ b/src/compile/nodes/Component.ts @@ -429,12 +429,13 @@ export default class Component extends Node { `)} ${this.ref && `#component.refs.${this.ref} = ${name};`} - } - - ${this.ref && deindent` - else if (#component.refs.${this.ref} === ${name}) { + } else { + ${name} = null; + ${this.ref && deindent` + if (#component.refs.${this.ref} === ${name}) { #component.refs.${this.ref} = null; }`} + } } `); diff --git a/test/runtime/samples/dynamic-component-nulled-out/Foo.html b/test/runtime/samples/dynamic-component-nulled-out/Foo.html new file mode 100644 index 0000000000..c62ee08e19 --- /dev/null +++ b/test/runtime/samples/dynamic-component-nulled-out/Foo.html @@ -0,0 +1 @@ +

Foo

\ No newline at end of file diff --git a/test/runtime/samples/dynamic-component-nulled-out/_config.js b/test/runtime/samples/dynamic-component-nulled-out/_config.js new file mode 100644 index 0000000000..17e51546ab --- /dev/null +++ b/test/runtime/samples/dynamic-component-nulled-out/_config.js @@ -0,0 +1,21 @@ +export default { + html: ` +

Foo

+ `, + + nestedTransitions: true, + + test(assert, component, target) { + const state = component.get(); + + component.set({ Foo: null }); + + assert.htmlEqual(target.innerHTML, ``); + + component.set({ Foo: state.Foo }); + + assert.htmlEqual(target.innerHTML, ` +

Foo

+ `); + } +}; \ No newline at end of file diff --git a/test/runtime/samples/dynamic-component-nulled-out/main.html b/test/runtime/samples/dynamic-component-nulled-out/main.html new file mode 100644 index 0000000000..6a1a348557 --- /dev/null +++ b/test/runtime/samples/dynamic-component-nulled-out/main.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file