Custom controls pushing 'buttons' out of view results in loss of event clicked processing

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It bothers me. A fix would be nice] Create a custom control that is consuming some space on the page. Add a few buttons with the Clicked event. Check if the buttons are working. Now add the custom control a few times until the buttons are no longer visible. Now the buttons that moved out of sight no longer accept gestures / events. When the screen is rotated and back the buttons accept gestures / clicked events again.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="McMMaui.MainPage"
            xmlns:multilanguage="clr-namespace:banditoth. MAUI. Multilanguage;assembly=banditoth. MAUI. Multilanguage"
             xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             xmlns:local="clr-namespace:McMMaui.ViewModels"
             xmlns:controls="clr-namespace:McMMaui.Controls"
             Title="{Binding Title}"
             Shell.NavBarIsVisible="False"
             Shell.TabBarIsVisible="False"
             NavigationPage.HasNavigationBar="True"
             NavigationPage.TitleView="{Binding HeaderView}"
             Visual="Default"
             Style="{StaticResource mcm_ContentPage}"
             x:DataType="local:MainPageViewModel">
    <ContentPage.BindingContext>
        <local:MainPageViewModel />
    </ContentPage.BindingContext>
    <ScrollView>
        <StackLayout>
            <Grid ColumnSpacing="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="0" Grid.Column="0"
                        Text="{multilanguage:Translation Key=MainPageScanForChargers}"
                        x:Name="ScanForChargers"
                        Clicked="ScanForChargers_Clicked"
                        HorizontalOptions="Fill"/>

<controls:QrCodeScannerButton Grid.Row="0" Grid.Column="1"
                                              x:Name="qrScanner"/>
            </Grid>
            <Grid ColumnSpacing="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="auto"/>

</Grid.ColumnDefinitions>
                <inputLayout:SfTextInputLayout Grid.Column="0"
                                                Hint="{multilanguage:Translation Key=MainPageHintMcMIP}"
                                                ShowHelperText="True"
                                                HelperText="{multilanguage:Translation Key=MainPageHelperMcMIP}">

<inputLayout:SfTextInputLayout.HelperLabelStyle>
                        <inputLayout:LabelStyle />
                    </inputLayout:SfTextInputLayout.HelperLabelStyle>
                    <Entry x:Name="McMIP"
                       Text="{Binding McM_IP}"
                       Placeholder="McM Ip Address"
                       FontSize="{OnIdiom Phone=Default, Tablet=Default}"
                       Keyboard="Plain"/>
                </inputLayout:SfTextInputLayout>

<Button Grid.Column="1"
                        Text="{multilanguage:Translation Key=MainPageAddCharger}"
                        x:Name="AddCharger"
                        Clicked="AddCharger_Clicked"
                        HorizontalOptions="Fill"/>
            </Grid>

<controls:VirtualChargersGridView x:Name="gridVC"
                                              HorizontalOptions="Fill"
                                              OnCellActionsMenuClicked="gridVC_OnCellActionsMenuClicked"
                                              OnFunctionButtonClicked="gridVC_OnFunctionButtonClicked"/>

<Button Text="{multilanguage:Translation Key=MainPageStartCharging}" x:Name="StartCharging" Clicked="StartCharging_Clicked"/>
            <Button Text="{multilanguage:Translation Key=MainPageStartDischarging}" x:Name="StartDischarging" Clicked="StartDischarging_Clicked"/>
            <Button Text="{multilanguage:Translation Key=MainPageStartCapacityTest}" x:Name="StartCapacityTest" Clicked="StartCapacityTest_Clicked"/>
            <Button Text="{multilanguage:Translation Key=MainPageStopOperation}" x:Name="StopOperation" Clicked="StopOperation_Clicked"/>

<controls:CellSerialDetailsView x:Name="cellSerialDetailsView"/>
            <Button Text="test" x:Name="testButton" Clicked="testButton_Clicked" IsVisible="{Binding DebugControlsVisible}"/>
        </StackLayout>
    </ScrollView>

</ContentPage>

xaml.cs code:

private void Engine_OnChargerAdded(Core.Engine source, Interface.iChargerConnection iCC)
    {
        if (!gridVC.AddMcMCharger(iCC)) return;
    }

        <label>

internal bool AddMcMCharger(McMMaui.Interface.iChargerConnection iCC)
    {
        var virtualCharger = PageViewModel.VirtualChargerList.FirstOrDefault(i => i.Key.ToString().
        CompareTo(iCC.ToString()) == 0). Value;
        if (null != virtualCharger) return false;

MainThread.BeginInvokeOnMainThread(() =>
        {
            virtualCharger = new VirtualChargerView(PageViewModel.Width, iCC);
            virtualCharger.OnCellActionsMenuClicked += VirtualCharger_OnCellActionsMenuClicked;
            virtualCharger.OnFunctionButtonClicked += VirtualCharger_OnFunctionButtonClicked;
            try
            {
                PageViewModel.VirtualChargerList.Add(iCC, virtualCharger);
            }
            catch(Exception ex)
            {
                Console.WriteLine(ex. Message);
                Debug.Assert(false);
            }
            this. RowDefinitions.Add(new() { Height = GridLength.Auto });
            this. Add(virtualCharger, 0, iCC.Charger_id);
        });

return true;
    }

Now add a custom control to the view programmatically the buttons are shifting downward (make sure the custom control gets added above the buttons).

As long as the buttons are visible in the view the event handlers are working. As in the image, you can see that the 'test' button is expanding the view below it.

Add another custom control until the buttons are moving out of the viewable space.

Now scroll the page up and try to click the buttons that were pushed out of view. They are not working.

Captured the same behavior in this video:

https://youtube.com/shorts/6KzktpYoB1Y?feature=share

---

Original Comments

Feedback Bot on 3/26/2023, 08:09 PM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[ghost]

Hi @vsfeedback. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.