[0.20] <GiveFocus/> not working anymore

Bug Reports
1

I can’t get the <GiveFocus Target="ATextView" /> behaviour to give focus to a TextView. Whether I’m using it with a Delay or not, I can’t seem to give focus to an element programatically.

(I tested in Preview, locally and on device, same results).

2

Can you provide a simple test case (or whatever code you have)? We’d like to ensure we find the error you’re getting.

3

Yes: see below. There are two GiveFocus, none of them work. Sorry if the example is a bit convoluted, but it’s close to my real-life example app.

<App>
<JavaScript>
    var Observable = require('FuseJS/Observable');
    var showMessenger = Observable(true);

    module.exports = {
        toggleMessenger: function () { showMessenger.value = !showMessenger.value; },
        showMessenger: showMessenger
    };
</JavaScript>
<DockPanel ux:Name="DockPanel">
    <Panel Margin="0,0,0,0" ux:Name="Messager" Visibility="Collapsed" Background="#fafafa">
        <Scaling ux:Name="MessagerScaling" X="0.05" Y="0.05" />
        <Translation ux:Name="MessagerTranslation" Y="5000" />
        <Rectangle ux:Name="MessagerOverlay" Layer="Overlay" Fill="#ffffff" Width="100%" Height="100%" HitTestMode="None"/>

        <WhileTrue Value="{showMessenger}">
            <Change Messager.Visibility="Visible" />
            <GiveFocus Target="MessageInput" Delay="0.1" />
            <Change MessagerOverlay.Opacity="0" Delay="0.4" Duration="0.3" />

            <Change MessagerTranslation.Y="0" Duration="0.3" Easing="ExponentialInOut" />
            <Change MessagerScaling.Factor="1" Duration="0.5" Easing="ExponentialInOut" />
        </WhileTrue>

        <Panel Alignment="TopRight" Background="#fafafa00" Padding="20,20,20,20">
            <Text>Close</Text>
            <Clicked>
                <Callback Handler="{toggleMessenger}" />
            </Clicked>
        </Panel>

        <Grid Rows="1,auto,auto">
                <Panel Row="1">
                    <Rectangle Layer="Background" Fill="#ffffff" Width="100%" Height="100%" />
                    <Rectangle Fill="#eeeeee" Height="1" Width="100%" Alignment="Top" />
                    <Rectangle Fill="#eeeeee" Height="1" Width="100%" Alignment="Bottom" />
                    <Text Margin="0,10,0,10" Alignment="Center" TextColor="#9a9a9a" Value="SEND MESSAGE FROM ANOTHER APP" />
                </Panel>

                <Panel Row="2" Height="60">
                    <Rectangle Layer="Background" Width="100%" Height="100%" Fill="#ffffff"/>
                    <Grid Columns="1,auto">
                        <Panel Column="1" Height="100%" Padding="0,0,20,0" Background="#ffffff">
                            <Text Value="SEND" TextColor="#0084FF" Alignment="Center" />
                            <Tapped>
                                <DebugAction Message="Clicked to give focus" />
                                <GiveFocus Target="MessageInput" />
                            </Tapped>
                        </Panel>
                        <Panel Column="0" Width="290">
                            <TextView ux:Name="MessageInput" TextWrapping="Wrap" Padding="10,10,0,10" Value="message…" />
                        </Panel>
                    </Grid>
                </Panel>

                <ScrollView Row="0">
                    <StackPanel>
                        <StackPanel Padding="0,20,0,20" Orientation="Horizontal" Alignment="Center">
                            <Circle Width="96" Height="96" Color="#FF6B6B">
                                <Stroke Width="6" Brush="#fafafa" />
                            </Circle>

                            <Text FontSize="22" TextColor="#4a4a4a" Alignment="Center" Value="John Doe" Margin="15,0,0,0" />
                        </StackPanel>
                    </StackPanel>
                </ScrollView>

        </Grid>
    </Panel>
    <Panel Background="Red">
        <Text>Toggle</Text>
        <Clicked>
            <Callback Handler="{toggleMessenger}" />
        </Clicked>
    </Panel>
    <BottomBarBackground DockPanel.Dock="Bottom" />
</DockPanel>
</App>

Edit: again, this works in 0.12

4

Hi!

The ability to GiveFocus to a TextInput is fixed in the latest pre-release. But I see what you are trying to do, you want to retain the focus in the TextInput when you press send.

Ill look into that issue