Unexpected Focus Behavior in ScrollViewer with TextBoxes

[WenHong-Lau]

I'm encountering an issue with a ScrollViewer that contains multiple TextBoxes in a StackPanel. When I focus on one of the TextBoxes and then click on an empty area within the ScrollViewer, the focus unexpectedly shifts back to the first TextBox in the ScrollViewer.

I’ve been unable to determine the cause of this behavior and would appreciate any insights.

There are two ScrollViewers and two StackPanels in my layout, which are similar in structure. However, this unwanted scrolling behavior only occurs in FormStackPanel or FormSV.

Structure of ScrollViewer

ScrollViewer (PageSV)
  └─ Grid
      └─ ScrollViewer (FormSV)
          └─ Grid
              └─ StackPanel (FormStackPanel)
      └─ StackPanel (PageStackPanel)

UnoApp5 (2).zip

Screen.Recording.2024-09-26.120515.mp4

[MartinZikmund]

Is this behavior also happening on WinUI, or just Uno targets?

[WenHong-Lau]

I've only tested on Uno targets

[mcNets]

There is no 'net8.0-desktop' in your project.

<Project Sdk="Uno.Sdk">
  <PropertyGroup>
    <TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst;net8.0-windows10.0.19041</TargetFrameworks>

[mcNets]

Focus goes to the NavigationBar.

The first group of textboxes are included inside a ScrollViewer -> ScrollViewer -> StackPanel -> TextBoxes, so when you click outside the TextBox but inside the second ScrollViewer, focus goes to the first focusable element inside the ScrollViewer.

The second group lies inside the first ScrollViewer -> StackPanel, when you click outside the TextBox focus goes to the NavigationBar that is the first focusable element of the first ScrollViewer.

focus.mp4

[AndrewKeepCoding]

Setting the ScrollViewer's IsTabStop to True should make the ScrollViewer receive the focus instead of passing it to the first element.

[mcNets]

@AndrewKeepCoding I don't know what is the expected behavior.

[AndrewKeepCoding]

@mcNets Me neither.😅

[WenHong-Lau]

This is exactly what I needed! Setting the ScrollViewer's IsTabStop to True stopped it from automatically focusing on the first element and scrolling to the top. Thanks!

[MartinZikmund]

Is this behavior in Uno Platform not consistent with WinUI? I think it was ported from the latest sources, so technically it should be in line with what WinUI does - but if not, we can investigate

[AndrewKeepCoding]

@MartinZikmund WinUI behaves the same way including the IsTabStop workaround. Here's the minimal block of code to reproduce it:

    <!--  When clicked outside the TextBox...  -->
    <Grid RowSpacing="16">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!--  ... the first TextBox gets the focus.  -->
        <ScrollViewer
            Grid.Row="0"
            BorderBrush="HotPink"
            BorderThickness="1"
            IsTabStop="True">
            <StackPanel
                Grid.Row="1"
                BorderBrush="LightPink"
                BorderThickness="1"
                Spacing="16">
                <TextBox />
                <TextBox />
                <TextBox />
            </StackPanel>
        </ScrollViewer>

        <!--  ... none of the TextBoxes gets the focus.  -->
        <StackPanel
            Grid.Row="1"
            BorderBrush="SkyBlue"
            BorderThickness="1"
            Spacing="16">
            <TextBox />
            <TextBox />
            <TextBox />
        </StackPanel>

    </Grid>

[MartinZikmund]

As this behavior matches WinUI, I'm closing for now, unless a discrepancy is found.