[Bug][UWP] Picker control captures mouse scroll wheel, users can unknowingly change picked value

[MitchBomcanhao]

Description

I've got a vertically scrollable page with picker controls. On UWP (haven't tried other operating systems' mouse support), the picker control will capture the mouse scroll wheel command, allowing the user to change the selected value without opening the picker dialog. This means that people are very likely to unknowingly change the selected value on pickers, when (for example) attempting to scroll down the page using the mouse wheel.

specific scenarios:

• mouse wheel actioned on top of the unopened picker control:
  • the selected value will change as you rotate the mouse wheel.
• mouse wheel is being used to scroll the page:
  • if a picker control passes under the mouse cursor, it will change the selected value in the picker.
  • sometimes the page scrolling action will be stopped if you are not going fast enough to skip over the picker control.

Steps to Reproduce

1. Create a basic single page UWP project with the page content shown below
2. Start the app, follow the onscreen instructions.

Expected Behavior

The picker shouldn't change its value without the user specifically interacting with it.

Actual Behavior

The picker value can be changed without the user's knowledge. The picker will capture the mouse input and can stop page scrolling.

Basic Information

• Version with issue: 5.0.0.2196 (also affects other versions, not really relevant)
• Last known good version: n/a
• Platform Target Frameworks:
  • UWP: 19041

Screenshots

Note: the screen capture doesn't show the picker popup when I initially select a value - just an issue with the recording.

Reproduction Link

Use this as your page content.

    <ScrollView>
        <StackLayout Margin="30" Spacing="30">
            <Label FontSize="Large" Text="This page should be capable of scrolling vertically" />
            <Label FontSize="Medium" Text="Pick an item from the below picker." />
            <Label FontSize="Medium" Text="After picking a value, place the mouse cursor on the green area and scroll up and down, in a way that the picker passes under the cursor." />
            <Label FontSize="Medium" Text="OBSERVE: the picker value will change when the picker passes under the mouse cursor." />
            <Label
                Margin="0,-15,0,0"
                FontSize="Medium"
                Text="OBSERVE: the picker value will also change if you place the cursor directly over the picker and use the mouse wheel, but the page will not scroll." />
            <BoxView
                HeightRequest="300"
                WidthRequest="30"
                Color="Green" />
            <Picker Title="Pick something" FontSize="Medium">
                <Picker.Items>
                    <x:String>one</x:String>
                    <x:String>two</x:String>
                    <x:String>three</x:String>
                    <x:String>four</x:String>
                    <x:String>five</x:String>
                </Picker.Items>
            </Picker>
            <BoxView
                HeightRequest="300"
                WidthRequest="30"
                Color="purple" />
            <BoxView
                HeightRequest="1000"
                WidthRequest="30"
                Color="Orange" />
            <BoxView
                HeightRequest="200"
                WidthRequest="30"
                Color="Red" />
        </StackLayout>
    </ScrollView>

Workaround

None found so far.

[MitchBomcanhao]

Additional information - this only appears to be an issue when you've focused the picker before (by picking something). Pickers that haven't been interacted with do not get changed when using the mouse wheel. If you pick something and then click away from the picker, the issue is not reproducible.

[negberts]

We have the same issue and would appreciate a solution :-)

[ocitiya]

I have same problem here in .NET MAUI windows platform, and i fixed it with this code below. Maybe you can try this too

in xaml.cs:

public async void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
    var picker = (Picker)sender;

   // add this code
    await picker.CaptureAsync();
    picker.Unfocus();
    // -----
}

in xaml:

<Picker ItemsSource="{Binding PrintFileType}"
        ItemDisplayBinding="{Binding Name}"
        SelectedIndexChanged="OnPickerSelectedIndexChanged" />