Hi community,
I have an app which contains modal page (pushed to the stack using PushModalAsync) that is a TabbedPage. One of the tabs of the tabbed pages is a Master-Detail page. On the Detail page I have a ListView that's displayed to the bottom of the view area of the tabbed page. The items in the ListView at the bottom of the view area can't be selected, as if there's an invisible area overlapping it.
My app is using the latest version of Xamarin.Forms. Since the app is only being used on iOS now I can't say if the same is happening in Android as well.
To demonstrate what is happening I created a demo app in which I test two cases: One is a modally pushed TabbedPage which contains a simple ContentPage with a ListView of items on it spanning the whole view area. The other case is a TabbedPage that contains a simple Master-Detail Page, with the Detail Page being the ContentPage of the former test case. In case you want to reproduce: This demo app uses the default TabbedPage and Master-Detail items in Visual Studio 2019 with only the addition of the ContentPage containing the ListView.
In case of the ContentPage being directly used inside of the TabbedPage the whole thing works as expected. I can select the item that's just right above the tabs, as you can see on the following gif:
In case we use a Master-Detail page, with the ContentPage from above in place of the DetailPage, as the first tab in our TabbedPage the selection problem of the bottom items occurs. I have also tested this scenario with the NavigationBar of the DetailPage set to false, but it has the same problem. You can see this in action in the gif below. Unfortunately you can't see the actual clicks, but I think this still shows what is going on:
Does anyone know what is happening here? I would appreciate it if someone would know a fix to this problem or could lead me to what is going wrong.