Throwing null object reference , when focus into the spark textarea ,if it is in the popup

Question

I added a textarea to vrgoup container and added that vgroup as popup to the application. while i am trying to focus into the textarea , it always throwing me null object reference. to see that you need to have debugger version of flash player installed. please help me if anybody knows the solution.
here is my code.
code
protected function btn_clickHandler(event:MouseEvent):void
var vgroup:VGroup = new VGroup();
var ta:TextArea = new TextArea();
vgroup.percentWidth = 100;
vgroup.addElement(ta);
PopUpManager.addPopUp(vgroup, this);
Following is the error thrown
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at spark.components::Scroller/focusInHandler()[E:\dev\hero_private\frameworks\projects\spark \src\spark\components\Scroller.as:1258]
at flash.display::Stage/set focus()
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::setFocus()[C:\Vellum\branches\v2\2.0\dev\out put\openSource\textLayout\src\flashx\textLayout\container\ContainerController.as:2265]
at flashx.textLayout.container::ContainerController/mouseDownHandler()[C:\Vellum\branches\v2 \2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerController. as:2067]
at flashx.textLayout.container::TextContainerManager/mouseDownHandler()[C:\Vellum\branches\v 2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\TextContainerManage r.as:1939]
at spark.components.supportClasses::RichEditableTextContainerManager/mouseDownHandler()[E:\d ev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\RichEditable TextContainerManager.as:665]
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::requiredMouseDownHandler()[C:\Vellum\branche s\v2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerControl ler.as:2088]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private\frameworks\projects\framework\sr c\mx\core\UIComponent.as:13128]
at mx.managers::SystemManager/mouseEventHandler()[E:\dev\hero_private\frameworks\projects\fr amework\src\mx\managers\SystemManager.as:2924]

Answer 1

The simplest example I could come up with consists of 3 files:
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  applicationComplete="open()">
     <fx:Script>
          <![CDATA[
               import mx.managers.PopUpManager;
               public function open():void {
                    var popUp:CustomComponent = PopUpManager.createPopUp(
                         this, //parent
                         CustomComponent, //class name
                         true //modal
                    ) as CustomComponent;
                    PopUpManager.centerPopUp(popUp);
          ]]>
     </fx:Script>
</s:Application>
CustomComponent.as
package {
     import spark.components.supportClasses.SkinnableComponent;
     public class CustomComponent extends SkinnableComponent {
          public function CustomComponent() {
               super();
               setStyle('skinClass', CustomComponentSkin);
CustomComponentSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx">
     <fx:Metadata>
          [HostComponent("CustomComponent")]
     </fx:Metadata>
     <s:Panel>
          <s:TextArea/>
     </s:Panel>
</s:Skin>