[FLEX-35269] [FlexJS] MDL - Dynamic Child Problem

• Type: Bug
• Status: Resolved
• Priority: Critical
• Resolution: Fixed
• Affects Version/s: Apache FlexJS 0.8.0
• Fix Version/s: Apache FlexJS 0.8.0
• Assignee: Piotr Zarzycki
• Reporter: Devsena
• Created: 17/Feb/17 11:42
• Updated: 22/May/17 06:22
• Resolved: 22/May/17 06:22

Description

There is a major problem exists with dynamic or delayed child creation policy in FlexJS MDL implementation.

MDL components are very much popular for their finer looks and many of their trendy animations etc. These animations etc. works good when you declare a child/component statically; that means the child/component was always there. In a real world application we can't declare all the available components at once. But these animations etc. fails badly when you adds a child/component at run-time, by some button click or by any other means.

A statically declared child/component I refer as this:

<mdl:GridCell column="1" percentWidth="100">
	<local:TextFields percentWidth="100"/> <!-- An external component -->
</mdl:GridCell>

A dynamically added child/component I refer as:

protected function onButtonClickEvent(event:MouseEvent):void
{
	var externalComponent:TextFields = new TextFields;
	externalComponent.percentWidth = 100;
	gdCell.addElement(externalComponent);
}
...
<mdl:GridCell id="gdCell" column="1" percentWidth="100"/>

Problem: When you add any component by above dynamic way, the component lost all of it's animation, dynamism etc. Some components even became completely useless, i.e. Toast, Snackbar, expanding search field etc.

I'm attaching herewith one demo project to demonstrate the problem I mentioned, which consists of two parts - 1. Half of the application displayed a form type of component added statically and having many text fields and they supposed to work properly and their animations when ran. 2. The application holds a button named "Click to add External components" upon clicking which adds the Same component from part#1 to fill the rest of the application area but dynamically. This part of the application's fields never works properly or their animations.

Please, check.