How to use Focus.Delegate properly

How-to Discussions
1

Hi Folks, I’m trying to use not yet documented feature Focus.Delegate

link here: https://www.fusetools.com/docs/fuse/input/focus/setfocusdelegate_b1e2e2b8

I tried to use an ux:Name or this as value on Focus.Delegate with no success as well.

Can someone help me to figure out this scenario?

<App Background="#000">
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var input = Observable('hi im the input value');

        module.exports = {
            input: input
        }
    </JavaScript>
    <StackPanel ux:Class="myCustomInput" Alignment="Center" ItemSpacing="30">
        <Button Text="Click Me to raise focus to StackPanel">
            <Clicked>
                <GiveFocus Target="myStack"/>
            </Clicked>
        </Button>
        <Button Text="Click Me to raise focus directly to TextInput">
            <Clicked>
                <GiveFocus Target="myInput"/>
            </Clicked>
        </Button>
        <StackPanel ux:Name="myStack" Alignment="Center">
            <Text Value="{input}" FontSize="24" Color="#000"/>
            <TextInput ux:Name="myInput" Value="{input}" Visibility="Hidden" Focus.Delegate="myStack"/>
        </StackPanel>
    </StackPanel>
    <Panel Color="#FFF" Padding="20">
        <myCustomInput ux:Name="mycomponent"/>
        <WhileKeyboardVisible>
            <Move Target="mycomponent" Y="-1" RelativeTo="Keyboard" Duration=".3" />
        </WhileKeyboardVisible>
    </Panel>

</App>

Tks,

Fuse version 0.36.1 (build 12010)
OSX Sierra 10.12.4
2

Hello

Focus.Delegate is supposed to be used to delegate the “focus responsibility” to a parent element, such that clicking said parent element will not remove focus from the element you are using Focus.Delegate on.

There are some new docs on this arriving shortly, but here is an example in the meanwhile:

<DockPanel ux:Name="dockpanel" IsFocusable="true" Color="#fff">
	<TextInput Focus.Delegate="dockpanel" />
	<Panel Dock="Right">
		<Text Value="SEND" Alignment="Center" Margin="4,0" Color="#fff" />
		<Rectangle CornerRadius="4" Color="#000" />
	</Panel>
</DockPanel>
3

Liam you indirectly give me the solution :slight_smile:

Using WhileFocused works, but we need to put IsFocusable="true" on the panel (that part I got from your sample =])

If someone else is in the same need…

I end up with this solution:

<App Background="#000">
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var input = Observable('hi im the input value');

        module.exports = {
            input: input
        }
    </JavaScript>
    <StackPanel ux:Class="myCustomInput" Alignment="Center" ItemSpacing="30">
        <Button Text="Click Me to raise focus to StackPanel">
            <Clicked>
                <GiveFocus Target="myStack"/>
            </Clicked>
        </Button>
        <Button Text="Click Me to raise focus directly to TextInput">
            <Clicked>
                <GiveFocus Target="myInput"/>
            </Clicked>
        </Button>
        <StackPanel ux:Name="myStack" Alignment="Center" IsFocusable="true">
            <WhileFocused>
                <GiveFocus Target="myInput" />
            </WhileFocused>
            <Text Value="{input}" FontSize="24" Color="#000"/>
            <TextInput ux:Name="myInput" Value="{input}" Visibility="Hidden" Focus.Delegate="this"/>
        </StackPanel>
    </StackPanel>
    <Panel Color="#FFF" Padding="20">
        <myCustomInput ux:Name="mycomponent"/>
        <WhileKeyboardVisible>
            <Move Target="mycomponent" Y="-1" RelativeTo="Keyboard" Duration=".3" />
        </WhileKeyboardVisible>
    </Panel>

</App>