Flex: when object has focus highlight parent instead?

Question

I have a TextInput and a Canvas object both inside an HBox object. When the input text field has focus it highlights, I would like to change this to be the containing HBox that highlights when the Input Text has focus.

Does anyone have any ideas on how I can do that?

Here is my code:

<mx:HBox 
     keyDown="checkKey(event)" 
     horizontalGap="0">
     <mx:TextInput 
      id="searchBox" 
      width="500" 
      fontSize="25" 
      backgroundColor="#F0F0F0" 
      borderThickness="2" 
      borderColor="#666666" 
      borderStyle="solid"/>
     <mx:Canvas 
      borderThickness="2" 
      borderColor="#666666" 
      borderStyle="solid" 
      backgroundColor="#666666">
      <mx:Button 
       label="Search" 
       click="searchInputText()" 
       fontSize="21" 
       styleName="primaryButton"/>
     </mx:Canvas>
    </mx:HBox>

Thanks!

Answer 1

I don't think HBoxes have highlighting enabled by default. But you could make the HBox respond to the focusIn event: Setting the filter's alpha to 0 makes it completely transparent.

<mx:HBox 
    name="parentHBox"
    keyDown="checkKey(event)" 
    horizontalGap="0">
    <mx:filters>
        <mx:GlowFilter alpha=0.0>
    </mx:filters>
    <mx:TextInput 
            id="searchBox" 
            ...
            focusIn="{HBoxGlowFilter.alpha = 1.0}"
            focusOut="{HBoxGlowFilter.alpha = 0.0}"/>
    <mx:Canvas 
            ...>
            <mx:Button 
                    label="Search" 
                    click="searchInputText()" 
                    fontSize="21" 
                    styleName="primaryButton"/>
    </mx:Canvas>
</mx:HBox>

Hope this helps.