[regression/7.0.92] DatePicker Initial Binding/Rendering Not Working

[adamjhilton]

Description

This just started when I updated my NuGet references. So, I think something has recently broken.

The DatePicker no longer draws itself properly. See video...

https://github.com/dotnet/maui/assets/31253633/d28d9a01-c48a-4b2c-9956-e5a90a6fc166

Steps to Reproduce

1. Add a data bound DatePicker control.
2. Set the underlying property to DateTime.Now.
3. The control will not draw properly until the date is changed.

Link to public reproduction project repository

No response

Version with bug

7.0.92

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11.0 - API 30

Did you find any workaround?

I do have a kludge workaround:

  public override void OnAppearing()
  {
   base.OnAppearing();

   // TODO: Kludge...
   Task.Run(() =>
   {
    SelectedStartDate = App.Now.AddDays(1);
    SelectedEndDate = App.Now.AddDays(1);
    Thread.Sleep(100);
    SelectedStartDate = App.Now;
    SelectedEndDate = App.Now;
   });
  }

Relevant log output

No response

[jfversluis]

You mention you upgraded NuGet packages. Which ones? Does it work properly again if you downgrade those? Is this only happening on Android or also iOS, Windows?

[ghost]

Hi @adamjhilton. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. 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 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.

[ghost]

Hi @adamjhilton. 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.

[jsuarezruiz]

Could you attach a sample where reproduce the issue?

[adamjhilton]

Okay, reproducing this is in my MauiBugs project is fraking annoying... I have figured out that it's a rendering issue, not a binding issue. If I set HeightRequest="35", I can see half the desired text and I know binding is working.

I have traced the issue down to the "Grid.ColumnSpan="5" VerticalOptions="StartAndExpand"" on my page's ScrollView. If I remove either or both of those fields, the DatePickers render properly. They're there because the ScrollView is normally inside a grid so I can have controls above and below the scrolling portion of the page. But for whatever reason, there's something different between my MauiBugs project and my production project and I can't reproduce it.

<views:BasePage
 x:Class="TcsMobile.Views.TransactionHistoryCriteriaPage"
 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:views="clr-namespace:Project.Views">

 <ScrollView Grid.ColumnSpan="5" VerticalOptions="StartAndExpand">

  <StackLayout
   HorizontalOptions="FillAndExpand"
   Orientation="Horizontal"
   VerticalOptions="CenterAndExpand">
   <Label
    IsEnabled="{Binding FilterByDate}"
    Text="From:"
    VerticalOptions="CenterAndExpand" />
   <DatePicker
    Margin="0,0,10,0"
    Date="{Binding SelectedStartDate}"
    HorizontalOptions="FillAndExpand"
    IsEnabled="{Binding FilterByDate}"
    MinimumDate="01/01/1970" />

   <Label
    IsEnabled="{Binding FilterByDate}"
    Text="To:"
    VerticalOptions="CenterAndExpand" />
   <DatePicker
    Date="{Binding SelectedEndDate}"
    HorizontalOptions="FillAndExpand"
    IsEnabled="{Binding FilterByDate}"
    MinimumDate="01/01/1970" />
  </StackLayout>

 </ScrollView>
</views:BasePage>

But I did find the solution, and it may be what actually changed in MAUI. If I add "VerticalOptions="CenterAndExpand"" to each DatePicker, all is well with the world!

Here's my current workload list:

Installed Workload Id      Manifest Version       Installation Source           
--------------------------------------------------------------------------------
maui-android               7.0.92/7.0.100         SDK 7.0.300, VS 17.6.33829.357
maui-ios                   7.0.92/7.0.100         SDK 7.0.300, VS 17.6.33829.357
maui-maccatalyst           7.0.92/7.0.100         SDK 7.0.300, VS 17.6.33829.357
maui-tizen                 7.0.92/7.0.100         SDK 7.0.300                   
maui-windows               7.0.92/7.0.100         VS 17.6.33829.357             
maccatalyst                16.4.7090/7.0.100      VS 17.6.33829.357             
ios                        16.4.7090/7.0.100      VS 17.6.33829.357             
android                    33.0.68/7.0.100        VS 17.6.33829.357     

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Android 13.0-API33 and iOS 16.4 .NET 8, not repro on Windows 11 with below Project: 16664.zip