Make tab/next button work out of the box

Hello, I was trying to make the tab button on computer, and thus the next button on mobile, switch to the next TextInput on screen without setting any flags. Each of my TextInputs were nested in panels with other un-focusable children, so they always had unfocusable items between them. This turned out to cause quite a bit of problems.

To by default make the tab button give focus to the next TextInput I had to avoid the following for all elements between the TextInputs:

  • All other transformations than <Change> and <Set>
  • Transformations inside their bodies

In other words, neither of the following two codes would work:

<WhileString Value="{txt}" Test="IsEmpty">
	<Move Target="text" Y="10"/>
</WhileString>
	
<TextInput ux:Name="textInput" Value="{txt}"/>
<Text ux:Name="text" Value="{txt}"/>
<TextInput/>
<TextInput ux:Name="textInput" Value="{txt}"/>
<Text ux:Name="text" Value="{txt}">
	<WhileString Value="{txt}" Test="IsEmpty">
		<Change text.Offset="0,10"/>
	</WhileString>
</Text>
<TextInput/>

The only alternative would in that case be:

<WhileString Value="{txt}" Test="IsEmpty">
	<Change text.Offset="0,10"/>
</WhileString>
	
<TextInput ux:Name="textInput" Value="{txt}"/>
<Text ux:Name="text" Value="{txt}"/>
<TextInput/>

By rewriting the components holding these TextInputs I was able to make the tab/next button work out of the box again. Still, some transformations and functionality had to be abandoned, as using <Change> looked too jumpy.

My question is, how can I make the tab/next button work out of the box while still having access to all transformations? What are the guidelines when attempting to make this work?

Hi Jacob.

I don’t think there’s an easy way to achieve this on desktop using the “Tab” key, but it’s definitely not a problem with “Enter” on desktop, and “Next” on mobile targets.

All you need to use is a combination of TextInputActionTriggered and GiveFocus. Neither of these conflict with any animators as far as we know.

Hope this helps!