Flex: Method doesn't work when being called on parentDocument - apache-flex

Question

I wonder is anyone can look at this code and tell me why calling the removeSelectedChild works when called from the same document, but returns the following error when called from the child document/component.
"ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller."
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Accordion id="myAccordion"
width="100%" height="100%"
selectedIndex="0">
<mx:Script>
<![CDATA[
public function removeSelectedChild():void {
trace("before");
try {
myAccordion.selectedChild.parent.removeChild(myAccordion.selectedChild)
} catch(err:ReferenceError) {
trace("catch")
}
trace("after");
}
]]>
</mx:Script>
<mx:headerRenderer>
<mx:Component>
<mx:Button click="{ parentDocument.removeSelectedChild() }" />
</mx:Component>
</mx:headerRenderer>
<mx:HBox>
<mx:Button click="{ removeSelectedChild() }" />
</mx:HBox>
</mx:Accordion>
</mx:Application>
Clicking on the button in the child produces the expected result, whilst clicking on the header removes the child as expected but also throws an error despite the fact they both call exactly the same method.
Sorry that the example is a little contrived, this problem arose in a quite complicated view, which was using all kinds of custom components. This was the only way I could display it in a way that will be quick for you to compile and easy to focus on the real issue without background noise.
I'm pulling my hair out on this one and would really appreciate it if anyone could help.
UPDATE: I have now discovered that the exception is fired after the method has finished executing. See the trace statements above. "after" is traced before the exception is thrown.
Cheers,
Chris

Answer 1

As you noted, the error is not being thrown by your function. The default action when clicking on the header of an accordion is to expand or contract that element. Since you're removing the element, when Flex tries to expand or contract it, you get an error.
You can fix it by stopping the event from doing its default action:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Accordion id="myAccordion"
width="100%" height="100%"
selectedIndex="0">
<mx:Script>
<![CDATA[
public function removeSelectedChild(event:MouseEvent):void {
myAccordion.removeChild(myAccordion.selectedChild);
event.stopImmediatePropagation();
}
]]>
</mx:Script>
<mx:headerRenderer>
<mx:Component>
<mx:Button click="{ parentDocument.removeSelectedChild(event) }" />
</mx:Component>
</mx:headerRenderer>
<mx:HBox>
<mx:Button click="{ removeSelectedChild(event) }" />
</mx:HBox>
</mx:Accordion>
</mx:Application>

Answer 2

Not a solution, but perhaps a workaround: could you try rewriting the method like this:
myAccordion.selectedChild.parent.removeChild(myAccordion.selectedChild)
if that doesn't work there must be a bug somewhere in Flex.

Answer 3

Use "outerDocument" instead of "parentDocument". defines a new mini-scope.