iOS Keyboard Scrolling with Star-sized grid row

[tj-devel709]

Description

When you have a top level grid that has a row with the size of '*' and we click an entry or editor that requires the screen to scroll with the keyboard, the star sized row will expand and the entry or editor will not come up high enough.

An example of the xaml for this is as follows:

<Grid RowDefinitions="40,*,40,40, 40">
    <Button Grid.Row="0" Background="blue" Text="Print CollectionView Height" Pressed="Button_Pressed"/>

    <Button Grid.Row="2" Background="blue" Text="Print CollectionView Height" Pressed="Button_Pressed"/>

    <Editor x:Name="myEditor" Grid.Row="3" BackgroundColor="MediumSeaGreen" Placeholder="Send Chat" 
        PlaceholderColor="White" TextColor="White"/>

    <Button Grid.Row="4" Text="Fill collection"/>
</Grid>

It appears that the star sized row is absorbing the height of the safe area. If we add IgnoreSafeArea="True" to the top level grid, the star sized row is the expanded size the entire time (before and after scrolling) and the entry or editor will be scrolled to correctly.

GridScrollBoxView.mov

Steps to Reproduce

1. Create a xaml page with a top level grid.
2. Add a row with the star size above an editor or entry towards the bottom of the page.
3. Deploy the app and click the entry or editor at the bottom of the page.
4. Observe that the height of the star-sized row becomes larger and the entry or editor does not come quite high enough.

Link to public reproduction project repository

No response

Version with bug

8.0.0-rc.2.9373

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

Adding IgnoreSafeArea="True" to the top level grid seems to fix the issue for now

Relevant log output

No response

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[TedMobile]

I really really and really hope that the keyboard nightmares we had with .net 7 are behind us, we have an application with lots of input entries and chats where the editor is at bottom and we could not release the app because the fields were covered. We postponed to .net 8 in the hope that this issue among others would be fixed..

Lets hope this one can make it GA.

[AndreKraemer]

Thank you so much for mentioning the workaround to set IgnoreSafeArea on the top most grid to true @tj-devel709! I combined it with a platform specific bottom-padding to make sure that my grid isn't painted into the bottom safe area:

   <Grid   IgnoreSafeArea="True"
           Padding="{x:OnPlatform Default='30,0', iOS='30,0,30,34'}"

the value 34 at the end of the padding represents the typical size of the bottom safe area in portrait mode for most modern iOS devices. However, this is a static value which might not be accurate for all devices or orientations.

To make this solution more robust and adaptable for different devices and orientations, one should consider dynamically obtaining the safe area insets (until this issue gets fixed). This can be achieved with the following code snippet, which fetches the exact bottom safe area size:

var safeArea = On<Microsoft.Maui.Controls.PlatformConfiguration.iOS>().SafeAreaInsets();
BottomSafeAreaSize = safeArea.Bottom;

[imsam67]

I'm having a similar issue in a Popup from CommunityToolkit.Maui if I place an Entry or Picker control in it. It looks like the cause maybe the same as this issue here.

Everything was working fine in .NET 7. I now have this issue with .NET 8. I tried downgrading CommunnityToolkit.Maui but that didn't fix the issue. Targeting .NET 7, instead of .NET 8 however, makes the issue go away. Here's the issue I opened. There's also a video showing you the behavior. CommunityToolkit/Maui#1561

BTW, setting IgnoreSafeArea="True" didn't help in my case. The root causes of these two issues maybe different but there's similarity in behavior.

[tj-devel709]

I'm having a similar issue in a Popup from CommunityToolkit.Maui if I place an Entry or Picker control in it. It looks like the cause maybe the same as this issue here.

Everything was working fine in .NET 7. I now have this issue with .NET 8. I tried downgrading CommunnityToolkit.Maui but that didn't fix the issue. Targeting .NET 7, instead of .NET 8 however, makes the issue go away. Here's the issue I opened. There's also a video showing you the behavior. CommunityToolkit/Maui#1561

BTW, setting IgnoreSafeArea="True" didn't help in my case. The root causes of these two issues maybe different but there's similarity in behavior.

Similar issue was reported here: PureWeen/ShanedlerSamples#13
The linked PR to this issue also addresses this issue!

[andyzukunft]

@AndreKraemer, @tj-devel709
You helped me a lot. It works as you described. I had to rebuild my complete page from scratch to figure out why the workaround was not working for me. This approach does not work with a top most AbsoluteLayout.

<!-- Not working, keyboard overlays editor-->
<AbsoluteLayout>
    <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1" RowDefinitions="*,auto" IgnoreSafeArea="True" Padding="{x:OnPlatform Default='0', iOS='0,0,0,34'}">
        <CollectionView Grid.Row="0" />
        <Editor Grid.Row="1" />
    </Grid>
</AbsoluteLayout>

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[tj-devel709]

@AndreKraemer, @tj-devel709 You helped me a lot. It works as you described. I had to rebuild my complete page from scratch to figure out why the workaround was not working for me. This approach does not work with a top most AbsoluteLayout.

<!-- Not working, keyboard overlays editor-->
<AbsoluteLayout>
    <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1" RowDefinitions="*,auto" IgnoreSafeArea="True" Padding="{x:OnPlatform Default='0', iOS='0,0,0,34'}">
        <CollectionView Grid.Row="0" />
        <Editor Grid.Row="1" />
    </Grid>
</AbsoluteLayout>

@andyzukunft, saw your message right before this issue closed and it seems to be working for me. Feel free to open a new issue if you have other issues though!

[gabsamples6]

@tj-devel709 hi , I cannot work out if this has been merged has I would like to test it in a nightly build. Appreciate if you could let us know thanks