diff --git a/doc/reference/component.md b/doc/reference/component.md index c8adb8f5..3e9a1933 100644 --- a/doc/reference/component.md +++ b/doc/reference/component.md @@ -237,16 +237,15 @@ component. We explain here all the public methods of the `Component` class. -- **`mount(target, renderBeforeRemount=false)`** (async): this is the main way a +- **`mount(target)`** (async): this is the main way a component is added to the DOM: the root component is mounted to a target HTMLElement. Obviously, this is asynchronous, since each children need to be created as well. Most applications will need to call `mount` exactly once, on the root component. - The `renderBeforeRemount` argument is useful when a component is unmounted and remounted. - In that case, we may want to rerender the component _before_ it is remounted, if - we know that its state (or something in the environment, or ...) has changed. - In that case, it should simply set to `true`. + Note that if a component is mounted, unmounted and remounted, it will be + automatically re-rendered to ensure that changes in its state (or something + in the environment, or in the store, or ...) will be taken into account. - **`unmount()`**: in case a component needs to be detached/removed from the DOM, this method can be used. Most applications should not call `unmount`, this is more diff --git a/src/component/component.ts b/src/component/component.ts index d6d5120a..087f2ee6 100644 --- a/src/component/component.ts +++ b/src/component/component.ts @@ -276,18 +276,11 @@ export class Component { * * Note that a component can be mounted an unmounted several times */ - async mount(target: HTMLElement, renderBeforeRemount: boolean = false): Promise { + async mount(target: HTMLElement): Promise { const __owl__ = this.__owl__; if (__owl__.isMounted) { return Promise.resolve(); } - if (__owl__.vnode && !renderBeforeRemount) { - target.appendChild(this.el!); - if (document.body.contains(target)) { - this.__callMounted(); - } - return; - } if (!(target instanceof HTMLElement)) { let message = `Component '${ this.constructor.name diff --git a/tests/component/component.test.ts b/tests/component/component.test.ts index 416ede23..d3b67687 100644 --- a/tests/component/component.test.ts +++ b/tests/component/component.test.ts @@ -4911,10 +4911,8 @@ describe("unmounting and remounting", () => { expect(fixture.innerHTML).toBe("
1
"); widget.unmount(); expect(fixture.innerHTML).toBe(""); + await nextTick(); // wait for changes to be detected before remounting await widget.mount(fixture); - expect(fixture.innerHTML).toBe("
1
"); - widget.unmount(); - await widget.mount(fixture, true); expect(fixture.innerHTML).toBe("
3
"); }); });