Picker causes infinite scroll on touch screen in .NET MAUI

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.

https://dot.net/maui

MIT License

22.28k stars 1.76k forks source link

Picker causes infinite scroll on touch screen in .NET MAUI #24718

Open VictoriaRamirezCharles opened 2 months ago

VictoriaRamirezCharles commented 2 months ago

Description

When interacting with a Picker on a touch screen device, the list of items becomes infinitely scrollable.

Steps to Reproduce

Create a new .NET MAUI project.
Add a Picker with a list of items using bindings.
Run the application on an device with a touch screen.
Tap on the Picker to select an item.

Expected Behavior: The Picker should open and display a list of items that can be scrolled and selected normally.

Actual Behavior: The Picker becomes infinitely scrollable.

Additional Info: The issue seems to only happen on devices with touch screens.

https://github.com/user-attachments/assets/23bfebec-1be1-4234-a0dd-eedcf5bd6d5e

Link to public reproduction project repository

MAUI https://github.com/VictoriaRamirezCharles/PickerTestMAUI.git

WINUI 3 https://github.com/VictoriaRamirezCharles/PickerTestWinUI3.git

Version with bug

Unknown/Other

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

github-actions[bot] commented 2 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Picking an item in a element causes the element to vanish. (#13493), similarity score: 0.78
Picker's SelectedIndexChanged event run infinitely when changing ControlTemplate (#8874), similarity score: 0.77
Picker in ListView works on Windows but not on Android (#13558), similarity score: 0.77

Closed similar issues:

Picker on Windows is endlessly Scrolling (#16555), similarity score: 0.79
Picker regression in 8.0.60 (#23367), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

mattleibow commented 2 months ago

What do you mean by infinitely scrollable?

the list just goes on forever even though you only have 5 items? What are the other items?
the list loops around so there is no start/end but just a loop of the same items? (this may be a platform/OS design choice)

Maybe add a screen recording of what you mean if I got it wrong so we can have a look.

VictoriaRamirezCharles commented 2 months ago

What do you mean by infinitely scrollable?

the list just goes on forever even though you only have 5 items? What are the other items?

the list loops around so there is no start/end but just a loop of the same items? (this may be a platform/OS design choice)

Maybe add a screen recording of what you mean if I got it wrong so we can have a look.

Hello, I made an update to my report and uploaded a video. I realized that this happens when I have more than seven elements.

mattleibow commented 2 months ago

This is the source from the WinUI 3 code: https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.6.0/src/controls/dev/ComboBox/ComboBox_themeresources.xaml#L589-L595

        <Popup x:Name="Popup">
          <Border x:Name="PopupBorder" Background="{ThemeResource ComboBoxDropDownBackground}" BackgroundSizing="InnerBorderEdge" BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}" BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}" Margin="0,-0.5,0,-1" Padding="{ThemeResource ComboBoxDropdownBorderPadding}" HorizontalAlignment="Stretch" CornerRadius="{ThemeResource OverlayCornerRadius}">
            <ScrollViewer x:Name="ScrollViewer" Foreground="{ThemeResource ComboBoxDropDownForeground}" MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}" VerticalSnapPointsType="OptionalSingle" VerticalSnapPointsAlignment="Near" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
              <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
            </ScrollViewer>
          </Border>
        </Popup>

Not sure what makes it loop. Does this happen in a plain WinUI 3 app? I think this is an OS choice.

VictoriaRamirezCharles commented 2 months ago

This is the source from the WinUI 3 code: https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.6.0/src/controls/dev/ComboBox/ComboBox_themeresources.xaml#L589-L595

        <Popup x:Name="Popup">
          <Border x:Name="PopupBorder" Background="{ThemeResource ComboBoxDropDownBackground}" BackgroundSizing="InnerBorderEdge" BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}" BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}" Margin="0,-0.5,0,-1" Padding="{ThemeResource ComboBoxDropdownBorderPadding}" HorizontalAlignment="Stretch" CornerRadius="{ThemeResource OverlayCornerRadius}">
            <ScrollViewer x:Name="ScrollViewer" Foreground="{ThemeResource ComboBoxDropDownForeground}" MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}" VerticalSnapPointsType="OptionalSingle" VerticalSnapPointsAlignment="Near" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" ZoomMode="Disabled" AutomationProperties.AccessibilityView="Raw">
              <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
            </ScrollViewer>
          </Border>
        </Popup>

Not sure what makes it loop. Does this happen in a plain WinUI 3 app? I think this is an OS choice.

Yes, it also happens in WinUI 3. I uploaded 2 repositories with both scenarios and I updated my question to include them, I also added videos.

mattleibow commented 2 months ago

This more feels like an OS decision, so maybe they have a way to disable it. Are you able to open an issue in that repo or ask on SO/discord?