Calendar dropdown section is always displayed in 5.0.0

[OndrejUzovic]

After updating to 5.0.0 the calendar dropdown section is always displayed together with the input element.

Here is a simple code to reproduce it:

• Blazor server site
• .NET 8

@page "/"

@using BlazorDateRangePicker

<DateRangePicker />

@code {
}

And this is the way how it is rendered:

Any idea what could be wrong or how to overcome it?

[jdtcn]

Hello,

Please make sure you have css link added to your _Host.cshtml for auto-generated inline styles, it should automatically add @import '_content/BlazorDateRangePicker/BlazorDateRangePicker.bundle.scp.css'; to the auto-generated style

[OndrejUzovic]

Hello,

Please make sure you have css link added to your _Host.cshtml for auto-generated inline styles, it should automatically add @import '_content/BlazorDateRangePicker/BlazorDateRangePicker.bundle.scp.css'; to the auto-generated style

Same as in 4.5.0, I have the following line in my _Host.cshtml file, in the head section: <link rel="stylesheet" href="_content/BlazorDateRangePicker/daterangepicker.min.css" />

[jdtcn]

In version 5 I changed this to css isolation, you can read more here - https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation Please change the link as it says in these instructions, the old style link as in version 4 will not work

[OndrejUzovic]

In version 5 I changed this to css isolation, you can read more here - https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation Please change the link as it says in these instructions, the old style link as in version 4 will not work

I am a bit confused here. I am really not sure if I need to setup something. The section 'Razor class library (RCL) support' in the following link: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#razor-class-library-rcl-support

says that isolated styles are automatically bundled.

When I removed all settings of BlazorDateRangePicker 4.5.0 from _Host.cshtml file it still did not work.

I think I miss something. Could you please provide me more detailed guidelines how to setup BlazorDateRangePicker 5.0.0?

[jdtcn]

Please check that styles bundle added to _Hosts.cshtml - <link href="{YOUR APP ASSEMBLY NAME}.styles.css" rel="stylesheet">, you can see the demo app for an example. If it doesn't help, please check what css are loaded in browser console and please upload a test project with reproduction of the problem.

[OndrejUzovic]

Thank you very much for your support. Using {APP ASSEMBLY NAME} really helped. The drop-down section is not displayed anymore.

In the browser console I also can see the following line in the css fille: @import '_content/BlazorDateRangePicker/BlazorDateRangePicker.bundle.scp.css';

However when I click into the the input element I still get the following exception: (I am using 5.1.0)

Error: Microsoft.JSInterop.JSException: Could not find 'addClickOutsideEvent' ('addClickOutsideEvent' was undefined).
Error: Could not find 'addClickOutsideEvent' ('addClickOutsideEvent' was undefined).
    at https://localhost:44395/_framework/blazor.server.js:1:734
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:44395/_framework/blazor.server.js:1:702)
    at _ (https://localhost:44395/_framework/blazor.server.js:1:5445)
    at https://localhost:44395/_framework/blazor.server.js:1:3238
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:44395/_framework/blazor.server.js:1:3201)
    at Yt._invokeClientMethod (https://localhost:44395/_framework/blazor.server.js:1:60713)
    at Yt._processIncomingData (https://localhost:44395/_framework/blazor.server.js:1:58188)
    at Yt.connection.onreceive (https://localhost:44395/_framework/blazor.server.js:1:51829)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at BlazorDateRangePicker.DateRangePicker.Open()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I have tried it with and without the following line in my _Host.cshtml file:

I get that exception in both cases. Do you have any idea what could be the problem?

[jdtcn]

Maybe the problem is that this clickAndPositionHandler.js was cached? Please try clean build, try to reset cache in browser, please see what content clickAndPositionHandler.js has, I fixed line 26 there, please see what is in it, please see what errors there are in the browser console

[OndrejUzovic]

Thanks for your help. The problem was the cache in browser. Interestingly it always used the old clickAndPositionHandler.js. Everything works fine now.