Trouble with Keyboard and Button Click

How-to Discussions
1

UX:

<StackPanel Alignment="Center" ItemSpacing="20">
  <TextField ux:Name="username" Value="{username}" ActionStyle="Next" PlaceholderText="Username" PlaceholderColor="#5D5E5E" Background="#D8D8D8" InputHint="Email">
    <TextInputActionTriggered>
      <ReleaseFocus />
    </TextInputActionTriggered>
  </TextField>

  <TextField ux:Name="password" Value="{password}" ActionStyle="Go" IsPassword="true" PlaceholderText="Password" PlaceholderColor="#5D5E5E" Background="#D8D8D8">
    <TextInputActionTriggered>
      <Callback Handler="{loginClicked}" />
      <ReleaseFocus />
    </TextInputActionTriggered>
  </TextField>

  <Button Text="Sign In" Color="#EA399E" HitTestMode="LocalBoundsAndChildren">
    <Clicked>
      <ReleaseFocus TargetNode="username" />
      <ReleaseFocus TargetNode="password" />
      <GiveFocus />
      <Callback Handler="{loginClicked}" />
    </Clicked>
  </Button>

</StackPanel>

Problem:

When attempting to click the “Sign In” button, and when the keyboard is up, it does not always fire the loginClicked method. It only dismisses the keyboard, forcing me to tap the button twice in order to login. As you can see, I’ve tried variations of modifying focus, but ultimately (at least on iOS) most of the time, tapping the button only registers an event to dismiss the keyboard and does not allow the callback to happen.

Using “Go” on the keyboard obviously works fine, but that was only a minor enhancement to this as most of my users are expecting to single tap the “Sign On” button.

Thoughts?