fix: Not possible to select month and year in FluentDatePicker

[dionistakac88]

We would like to have FluentDatePicker and possibility to select day, month and year as it was the case in earlier version (for example 4.9.1).

Currently in version 4.10.0, there is no possibility to open month or year view in the same component. When we click on month/year, picker is closed.
It is possible to choose only month or only year view by defining 'View' property in separate components, but we need possibility to do that in the same component as it was the case before.

Steps to reproduce:

1. Open FluentDatePicker with View property set to 'Day'
2. Try to click on year/month

Expected:
Monthly and yearly picker is opened

Actual:
FluentDatePicker is closed.

Could you help with this? We got this issue after upgrading fluentui library from 4.9.1 to 4.10.0 version.

Thank you.

[pradm777]

please provide above solution.

[dvoituron-msft]

Weird. Are you using Blazor Server or Blazor WebAssembly ?

[dionistakac88]

Weird. Are you using Blazor Server or Blazor WebAssembly ?

We use Blazor WebAssembly. Even if you check official doc and component "FluentDatePicker", you can reproduce the issue - https://www.fluentui-blazor.net/DateTime

[dvoituron]

Yes, I tested locally using WASM and the Server: Blazor Server works but not with Blazor WebAssembly.
I don't know why.
We will try to fix this as soon as possible.

[dvoituron]

This problem seems to be due to the current way of detecting when a user clicks in a FluentOverlay exclusion zone:

• Currently, when the user clicks on an element, we calculate the isExcludeElement variable based on event.target.
  const isExcludeElement = excludeElement && excludeElement.contains(event.target);
  However, Blazor WASM refreshes HTML DOM faster than Blazor Server, making target invalid in this test.

• We correct this problem by calculating isInsideExcludedElement using the coordinates of the mouse click.
  const isInsideExcludedElement = !!document.getElementById(id) && isClickInsideContainer(event, document.getElementById(id));

See #2755