Microsoft-ui-xaml: ScrollViewer Jumps to Top-most TextBox (UWP app)

[myokeeh]

Describe the bug
The ScrollViewer control seems "jumpy." I have several controls arranged top to bottom. One of the top-most controls is a TextBox and several controls down is a ToggleSwitch. When I scroll down, and click on empty space just to the right, nothing happens (expected behavior). When I toggle the switch on/off, and click on empty space again, the ScrollViewer jumps to the top-most TextBox waiting for text entry(?) (unwanted behavior)--caret is blinking in the text box. Hitting empty space is basically the inevitability that users can miss hitting controls (tapping with a finger) or purposefully trying to remove focus on some control.

Steps to reproduce the bug
Setup a page with several controls (TextBox, ToggleSwitch) in a <StackPanel Orientation="Horizontal"> enough to require scrolling down to the ToggleSwitch

1. Debug the app.
2. Scroll to the toggle switch.
3. Toggle the switch on/off.
4. Click on empty area (not the control or toggle switch text).

Expected behavior
The ScrollViewer should NOT scroll to the top--should stay put.

Actual behavior
The ScrollViewer scrolls to the top-most TextBox with the text cursor blinking.

Version Info
Windows 10 19H1 (all versions I can remember), All form factors

NuGet package version:
2.1.190405004.1

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (18362) | Yes |
| October 2018 Update (17763) | Yes |
| April 2018 Update (17134) | Yes |
| Fall Creators Update (16299) | Yes |
| Creators Update (15063) | Yes |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context
I've used the same XAML on the Template 10 version, and even (Windows Template Studio/Prism) and the unwanted behavior has always been there.

I thought BringIntoViewOnFocusChange = "false" would do the trick, but it doesn't.

[jevansaks]

Thanks for reporting! I see this too in the Xaml Controls Gallery app on the RichEditBox page. If I scroll down and then click on the right gutter it scrolls to the top.

Something is setting focus to the ScrollViewer or the page and that's causing focus to go to the first focusable thing in the ScrollViewer which causes the view to jump.

[myokeeh]

I don't know how everything works... I see this got put into Approved in Controls Triage, but I don't understand what that means as far as when it might show up in a release. Can anyone fill me in?

[mrlacey]

I see this got put into Approved in Controls Triage, but I don't understand what that means as far as when it might show up in a release. Can anyone fill me in?

Full descriptions of all projects, and the boards within them, would help share understanding and promote transparency.

[DuncWatts]

Is there a workaround for this issue? I'm seeing this from a Xamarin.Forms UWP application but can also replicate it on a standard UWP app. Is there a way to make the ScrollViewer accept focus itself so it doesn't auto-focus the first focusable control within its children?

[jevansaks]

I know that I talked to @Rbrid about this but I can't remember where we landed. We recognize it's a problem but I don't know if there's a good workaround. You could try putting a panel behind your whole ScrollViewer content that handles the mouse clicks so ScrollViewer doesn't get a chance to see them and try to set focus to itself.

[DuncWatts]

On a simple UWP repro app - ScrollViewer containing a StackPanel containing multiple TextBox control - I can workaround this by setting IsTabStop="True" on the ScrollViewer.

This doesn't work on the Xamarin.Forms application as it isn't the same issue but I've got a workaround there as well.

[myokeeh]

@DuncWatts thanks! I think that works for me.

Edit1: I spoke too soon. I still experience the jump, but maybe not all the time.
Edit2: I take it back. It does work.

[JKennedy24]

@duncWatts

Experiencing this in Xamarin.Forms UWP application. Whats the workaround you mention?

[DuncWatts]

@DuncWatts

Experiencing this in Xamarin.Forms UWP application. Whats the workaround you mention?

I duplicated the ScrollViewRenderer and stripped off the IDontGetFocus interface. See the linked Xamarin.Forms issue above and related commits. Once that issue has been fixed in a released build I can just remove my custom renderer.

[JKennedy24]

Might be a bit cheeky but any chance you can share the renderer? I duplicated the renderer and stripped off the interface but I'm still getting the behavior

[DuncWatts]

This is the code I'm using in my UWP project.

https://gist.github.com/DuncWatts/2c9dd44e13d29a0e6fdc72c659532bb6

[JKennedy24]

@DuncWatts brilliant thanks!

I'll also mention that you also need to have IsTabStop="true" as well as the renderer, I was setting it to false which is why I still saw the behavior

[premiaware]

I have the same issue, has anyone found a solution?

[jevansaks]

@premiaware someone recommended a workaround above, can you try this:

I can workaround this by setting IsTabStop="True" on the ScrollViewer.

[premiaware]

Thank's for answer, in my sample UWP IsTabStop=True not working. if you have time to try my sample i have attached it.
click in the first textBox, scroll the view to the botton, click in the checkbox in left botton corner.
result, the view autoscroll to the top :-(
Ricorsivo.zip

[DuncWatts]

Thank's for answer, in my sample UWP IsTabStop=True not working. if you have time to try my sample i have attached it.
click in the first textBox, scroll the view to the botton, click in the checkbox in left botton corner.
result, the view autoscroll to the top :-(
Ricorsivo.zip

I can't replicate this with your code, however I notice you don't have "Build" or "Deploy" checked against the AnyCPU in the Configuration Manager, so you may not have been testing the change.

[premiaware]

sorry, maybe it was removed by deleting the configuration files before running the zip. but were you able to compile and start the app? following the procedure described, in your pc work? from me in 3 different PCs does not work

[premiaware]

After 1 day of investigation i have found the problem, if the UWP App have Light theme all working OK using IsTabStop = true, if the App have Dark Theme the Scrollviewer not working also if i set IsTabStop = true, the sample is attached.
It is an absurd situation, If you open the App.xaml and remove RequestedTheme="Dark" the app working.

Ricorsivo2.zip

[jevansaks]

Light theme all working OK using IsTabStop = true, if the App have Dark Theme the Scrollviewer not working

It's possible that in dark theme the background is Null, which will cause the mouse clicks to not "hit" the ScrollViewer background. Try setting the ScrollViewer's background to Transparent and see if that helps make it hit-testable.

[premiaware]

i have set:
Background="Transparent"

in the scrollviewer but the problem is the same.

[jevansaks]

Did you set the background on the ScrollViewer? Either way I tried your project on latest Windows 10 (1903) and it worked fine. Here was I did to try to repro:
1) Scroll down
2) Put focus in a TextBox
3) Click on blank space to the right side of the TextBoxes

Result: TextBox loses focus but ScrollViewer scroll position doesn't change.

Are your repro steps different? Or are you seeing different behavior with these steps?

[premiaware]

you must build and run my new sample "ricorsivo2.zip" start the APP. (I have 1903)

• SET THE FOCUS in the FIRST TEXTBOX
• SCROLL DOWN to the botton
• Click on blank space or click the checkbox in the left, botton corner.

result: the scroll auto return to the top.

[premiaware]

the problem is the TextBox Theme, if in the textBox i set the Light theme

TextBox Width="200" RequestedTheme="Light"

All working ok!
This is not solution because my app use Dark theme.

[premiaware]

Finally i have fix the problem, changing Template now working ok!. Thank's for support.

[Balasubramanian93]

@premiaware Can you please let me know how you have resolved this issue?

[premiaware]

naturally,
you have to edit the TextBox template, you can take it from generic.xaml or use blend, and create a custom textBox template.
then you need to replace the theme line:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />

replace
with

DiscreteObjectKeyFrame KeyTime="0" Value="Dark"

Now set the new template to All textBox and for me work.

[myokeeh]

Like @premiaware I'm also discovering the workaround doesn't work for an app that can switch theme (Light, Dark). I hope this gets fixed soon.

@premiaware, can you share more of the XAML code for your workaround. I'm not sure I follow. Does yours work for both Light and Dark if changed by the user?

[premiaware]

My App working with Fixed Dark Theme.
you could try to do this but it's a bit complex to do it in all TextBox
TextBox RequestedTheme="{Binding currentTheme"}

I don't know if it works

[JonasMuliolis]

Thanks for all of the above. I found a solution that worked for me without having to set the entire App Theme to Light - just set RequestedTheme of the ScrollView to Light. In conjunction with the new ScrollViewRenderer above this fixed the problem in my app. I had to tweak a few styles of the controls in the ScrollView, but all seems to work now.
HTH.

[myokeeh]

Is it possible to get this prioritized higher?

[jevansaks]

Unfortunately this isn't something we can fix any sooner. It is tagged with "needs-winui-3" which means we'll review it as soon as we're able to start thinking about bug fixes on top of Winui 3.

[Rothanan]

Any news on this?