Lifecycle `rendered` with Portals

[matuzalemsteles]

When there is an implementation of Portals in the component is used the lifecycle rendered is called before the rendering actually takes place in the DOM.

See ClayDropdown as an example.

Expected behavior

When a render or change occurs in the DOM, the lifecycle rendered is expected to be called later.

Current behavior

When a change or a render with Portal happens the lifecycle rendered is called before the change actually takes place in the DOM.

[robframpton]

Hey @matuzalemsteles

This one is a bit tricky, because for the case of ClayDropdownBase, the ClayPortal component isn't actually providing the markup, rather the markup is being passed from ClayDropdownBase via the content parameter.

If you add the rendered lifecycle method to ClayDropdownBase, you should see that it is fired after the menu markup has updated.

rendered() {
	console.log(this.refs.portal.element);
}

[matuzalemsteles]

Hey @Robert-Frampton, thanks for clarifying.

I think the case was to know when it was actually the changes being seen in the DOM. How to use ClayPortal and is another component and I can not tell when it was rendered its content. It happened that when I updated something in STATE and the content that went to ClayPortal used this data the rendered of ClayDropdownBase gave the impression that those changes were already seen in the DOM, and have not yet been.

To solve the problem I had to add the lifecycle rendered in ClayPortal by issuing an event so I can listen inside ClayDropdownBase or simply listen to the rendered event of ClayPortal.

this.refs.portal.on('rendered', this.handleRenderedPortal_.bind(this));