Text fields unfocusing after validation error shows

[YBTopaz8]

I'm using textfields I wanted users to only input numeric values, so i set a validation for such but

• whenever the validation message opens, the text field looses focus
• when the user erases ONE or ALL or even adds a character immediately AFTER the error shows, the field looses focus as well

textfield.misbehaving.mp4

I wanted to implement a custom validation that would ensure that the textfield would simply NOT accept non-numeric characters, but it's still the same issue
As shown on the video below

textfield.misbehaving.w.custom.validation.mp4

[enisn]

It's strange WinUI 3 problem,

I realized the same problem in WinUI 3 Gallery application. It automatically focuses a different element in the context when something changed in layout.

I can implement the following workaround for inputfields:
https://stackoverflow.com/a/61765007/7200126

[YBTopaz8]

Ah, i see!
thanks for the insight!

[ertan2002]

I have the same issue for windows app

        <ur:TextField x:Name="EmailEntry"
                      Title="Email Address"
                      ClearButtonVisibility="WhileEditing"
                      AllowClear="True"
                      Keyboard="Email"
                      Icon="{FontImageSource FontFamily=FontAwesome, Glyph={x:Static models:FontAwesomeIcons.Envelope}, Color=#F1A516}"
                      TextColor="Black"
                      InputBackgroundColor="Blue"
                      TitleColor="Grey"
                      Background="Transparent"
                      BorderColor="#F1A516">                            
            <validation:RegexValidation Pattern="{x:Static input:AdvancedEntry.REGEX_EMAIL}"
                                        Message="Invalid email address" />
        </ur:TextField>

I just type one letter then I see directly a warning and the control loses focus!

What it should suppose to be:
I type and when I unfocus from the control, then I can see the error message.

I hope it will be fixing ASAP. Thank you

[enisn]

After some research, I've discovered that Panels are focusable on windows and when a panel is focused it automatically delivers the focus event to its children recursively.

If there is another textbox inside the same layout, it automatically focuses it because of this behavior.

The same problem that dotnet/maui is dealing 👉 microsoft/microsoft-ui-xaml#3825 (comment)

[enisn]

When you disable focusing for the parent element

 stackLayout.HandlerChanged+= (s,e)=>
 {
     if (stackLayout.Handler.PlatformView is Microsoft.Maui.Platform.LayoutPanel panel)
     {
         panel.AllowFocusOnInteraction = false;
         panel.GettingFocus += (s, e) =>
         {
             e.Cancel = true;
         };
     }
 };

Then none of the entries are focusable. WinUI is a little bit different from other platforms. We'll follow the dotnet/maui approach here when it's solved here dotnet/maui#11472

There is no 1 single best solution now

[enisn]

@ertan2002

At least you can try this custom TextField in your project to achieve showing validations when unfocused:

public class MyTextField : TextField
{
#if WINDOWS
    protected override void RegisterForEvents()
    {
        base.RegisterForEvents();

        this.Unfocused += OnUnfocused;
    }

    protected override void ReleaseEvents()
    {
        base.ReleaseEvents();
        this.Unfocused -= OnUnfocused;
    }

    protected override void CheckAndShowValidations()
    {
        // Leave empty
    }

    private void OnUnfocused(object sender, FocusEventArgs e)
    {
        base.CheckAndShowValidations();
    }
#endif
}

[enisn]

Not the best solution but a workaround has been released in v2.8.0-pre.5

[ertan2002]

@ertan2002

At least you can try this custom TextField in your project to achieve showing validations when unfocused:

public class MyTextField : TextField
{
#if WINDOWS
    protected override void RegisterForEvents()
    {
        base.RegisterForEvents();

        this.Unfocused += OnUnfocused;
    }

    protected override void ReleaseEvents()
    {
        base.ReleaseEvents();
        this.Unfocused -= OnUnfocused;
    }

    protected override void CheckAndShowValidations()
    {
        // Leave empty
    }

    private void OnUnfocused(object sender, FocusEventArgs e)
    {
        base.CheckAndShowValidations();
    }
#endif
}

thank you for your solution. I'll try it.

[enisn]

You don't have to override in the latest version (v2.8.0-pre.5). A workaround was already released in that version. If you update your packages, you'll get the solution from this PR: #588

[ertan2002]

You don't have to override in the latest version (v2.8.0-pre.5). A workaround was already released in that version. If you update your packages, you'll get the solution from this PR: #588

Normally I don't like to use beta versions, but it seems to be ok :) I'll try that first. Thank you again

[enisn]

You can wait for tte stable version, It'll be released at the end of this week. I'm working on still

[YBTopaz8]

THanks for the update!