Button's size doesn't include selection indicator

[justinmclean]

Selecting the middle button in this example code:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic">
    
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>
        <js:View>
            <js:style>
                <js:SimpleCSSStyles padding="20" />
            </js:style>
            <js:Container width="100%">
                <js:beads>
                    <js:HorizontalLayoutWithPaddingAndGap gap="20" />
                </js:beads>
                <js:TextButton text="Button 1" />
                <js:TextButton text="Button 2" />
                <js:TextButton text="Button 3" />
             </js:Container>
        </js:View>
    </js:initialView>

</js:Application>

Cuts off the selection indicator on the top and bottom of the button.

On buttons 1 and 3 it only shows on one vertical edge.

One way of getting around this issue is adding padding to the buttons container like so:

<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:js="library://ns.apache.org/royale/basic">
    
    <js:valuesImpl>
        <js:SimpleCSSValuesImpl/>
    </js:valuesImpl>

    <js:initialView>
        <js:View>
            <js:style>
                <js:SimpleCSSStyles padding="20" />
            </js:style>
            <js:Container width="100%">
                <js:beads>
                    <js:HorizontalLayoutWithPaddingAndGap paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" gap="20" />
                </js:beads>
                <js:TextButton text="Button 1" />
                <js:TextButton text="Button 2" />
                <js:TextButton text="Button 3" />
             </js:Container>
        </js:View>
    </js:initialView>

</js:Application>

[Harbs]

I believe this is as designed.

One way to enable visibility of the selection rect is as you say. Another is by not using a clipping viewport for the container.