search

Material-Blazor / Material.Blazor

Lightweight Material Theme components for Blazor
Other
244 stars 32 forks source link

MBSelect throws javascript TypeError #946

Closed BasJ93 closed 1 year ago

BasJ93 commented 1 year ago

Describe the bug When applying a label to the MBSelect, the javascript fails on an uncaught TypeError.

To Reproduce Steps to reproduce the behavior:

  1. See Example implementation in my repo
  2. When runnig, click on the select and select an item.
  3. See error
material.blazor.min.js:157 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at e.layout (material.blazor.min.js:157:4271)
    at e.handleChange (material.blazor.min.js:157:5035)
    at e.setSelectedIndex (material.blazor.min.js:157:3141)
    at e.handleMenuItemAction (material.blazor.min.js:157:5231)
    at HTMLDivElement.handleMenuItemAction (material.blazor.min.js:160:2511)
    at t.emit (material.blazor.min.js:25:1014)
    at Object.notifySelected (material.blazor.min.js:135:4263)
    at e.handleItemAction (material.blazor.min.js:134:1480)
    at HTMLDivElement.handleItemAction (material.blazor.min.js:135:643)
    at t.emit (material.blazor.min.js:25:1014)

material.blazor.min.js:157 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at e.layout (material.blazor.min.js:157:4271)
    at e.blur (material.blazor.min.js:157:7994)
    at e.handleMenuClosed (material.blazor.min.js:157:4986)
    at HTMLDivElement.handleMenuClosed (material.blazor.min.js:160:2661)
    at t.emit (material.blazor.min.js:25:1014)
    at Object.notifyClose (material.blazor.min.js:132:2295)
    at material.blazor.min.js:130:4321

Expected behavior No thrown javascript exceptions and the setting of the value in the dto backing the EditForm.

Environment

MarkStega commented 1 year ago

@BasJ93

I just checked out the M.B 3.3.1 code and ran the demo website. The MBSelect demo page is properly handling labels.

I've cloned your repository and tried to build the 'features/overview' branch and get 35 errors and 26 warnings:

Severity    Code    Description Project File    Line    Suppression State
Error   CS0006  Metadata file 'Severity Code    Description Project File    Line    Suppression State
Error   CS0006  Metadata file 'C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web.API.Client\obj\Debug\net6.0\ref\MyFoodLog.Web.API.Client.dll' could not be found MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\CSC 1   Active
Error   CS0518  Predefined type 'System.Void' is not defined or imported    MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    35  Active
Error   CS0400  The type or namespace name 'System' could not be found in the global namespace (are you missing an assembly reference?) MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    47  Active
Error   CS0400  The type or namespace name 'System' could not be found in the global namespace (are you missing an assembly reference?) MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    54  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    54  Active
Error   CS0155  The type caught or thrown must be derived from System.Exception MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    58  Active
Error   CS0400  The type or namespace name 'System' could not be found in the global namespace (are you missing an assembly reference?) MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    58  Active
Error   CS0518  Predefined type 'System.Object' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    67  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    69  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    69  Active
Error   CS0518  Predefined type 'System.Decimal' is not defined or imported MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    70  Active
Error   CS0518  Predefined type 'System.Decimal' is not defined or imported MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    70  Active
Error   CS0518  Predefined type 'System.Object' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    77  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    78  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    81  Active
Error   CS0518  Predefined type 'System.String' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    81  Active
Error   CS0518  Predefined type 'System.Nullable`1' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    87  Active
Error   CS0246  The type or namespace name 'IDisposable' could not be found (are you missing a using directive or an assembly reference?)   MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Program.cs  16  Active
Error   CS0246  The type or namespace name 'HttpClient' could not be found (are you missing a using directive or an assembly reference?)    MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Program.cs  16  Active
Error   CS0246  The type or namespace name 'IDisposable' could not be found (are you missing a using directive or an assembly reference?)   MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Program.cs  16  Active
Error   CS0518  Predefined type 'System.Object' is not defined or imported  MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Program.cs  18  Active
Error (active)  CS1662  Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type     C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   3   
Error (active)  CS0518  Predefined type 'System.String' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   6   
Error (active)  CS0518  Predefined type 'System.String' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   6   
Error (active)  CS0518  Predefined type 'System.String' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   6   
Error (active)  CS0518  Predefined type 'System.String' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   6   
Error (active)  CS0518  Predefined type 'System.Decimal' is not defined or imported     C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   14  
Error (active)  CS0518  Predefined type 'System.Decimal' is not defined or imported     C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   14  
Error (active)  CS0518  Predefined type 'System.Decimal' is not defined or imported     C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   14  
Error (active)  CS0518  Predefined type 'System.Decimal' is not defined or imported     C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   14  
Error (active)  CS0518  Predefined type 'System.Nullable`1' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   31  
Error (active)  CS0518  Predefined type 'System.Nullable`1' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   31  
Error (active)  CS0518  Predefined type 'System.Nullable`1' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   31  
Error (active)  CS0518  Predefined type 'System.Nullable`1' is not defined or imported      C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor   31  
Warning CS0108  'FoodConsumptionDto.Id' hides inherited member 'FoodItemDto.Id'. Use the new keyword if hiding was intended.    MyFoodLog.Models    C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Models\FoodConsumption\FoodConsumptionDto.cs    7   Active
Warning CS1998  This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.    MyFoodLog.ClientApis    C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.ClientApis\BaseClients\APIKeyBaseClient.cs  5   Active
Warning CS8618  Non-nullable property 'VerboseStatus' must contain a non-null value when exiting constructor. Consider declaring the property as nullable.  MyFoodLog.ClientApis    C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.ClientApis\Models\OpenFoodFacts\BarcodeResponse.cs  14  Active
Warning CS1998  This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.    MyFoodLog.Database  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Database\Repositories\GenericCrudRepository.cs  65  Active
Warning CS1998  This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.    MyFoodLog.Database  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Database\Repositories\GenericCrudRepository.cs  115 Active
Warning CS8629  Nullable value type may be null.    MyFoodLog.Database  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Database\Repositories\MealTypeRepository.cs 19  Active
Warning CS8629  Nullable value type may be null.    MyFoodLog.Database  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Database\Repositories\MealTypeRepository.cs 20  Active
Warning CS8618  Non-nullable property 'Name' must contain a non-null value when exiting constructor. Consider declaring the property as nullable.   MyFoodLog.Models    C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Models\MealTypes\CreateMealTypeDto.cs   8   Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 19  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 21  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 22  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 23  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 24  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 25  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\AutoMapper\Profiles.cs 26  Active
Warning CS1998  This async method lacks 'await' operators and will run synchronously. Consider using the 'await' operator to await non-blocking API calls, or 'await Task.Run(...)' to do CPU-bound work on a background thread.    MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\Services\FoodItemService.cs    63  Active
Warning CS8604  Possible null reference argument for parameter 'source' in 'decimal Enumerable.Sum<FoodConsumptionDto>(IEnumerable<FoodConsumptionDto> source, Func<FoodConsumptionDto, decimal> selector)'.    MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\Services\MealService.cs    59  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\Services\MealService.cs    67  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\Services\MealService.cs    68  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Core  C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Core\Services\MealService.cs    69  Active
Warning CS1591  Missing XML comment for publicly visible type or member 'BarcodeController' MyFoodLog.API   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.API\Controllers\BarcodeController.cs    11  Active
Warning CS1591  Missing XML comment for publicly visible type or member 'BarcodeController.SearchForBarcode(string, CancellationToken)' MyFoodLog.API   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.API\Controllers\BarcodeController.cs    27  Active
Warning CS1591  Missing XML comment for publicly visible type or member 'MealController.Delete(Guid, CancellationToken)'    MyFoodLog.API   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.API\Controllers\MealController.cs   43  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    81  Active
Warning CS8602  Dereference of a possibly null reference.   MyFoodLog.Web   C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web\Components\FoodConsumptionComponent.razor.cs    81  Active
Error   MSB3073 The command "dotnet "C:\Users\ms\.nuget\packages\nswag.msbuild\13.19.0\buildTransitive\../tools/Net60/dotnet-nswag.dll" openapi2csclient /input:http://localhost:5081/swagger/v1/swagger.json /classname:MyFoodLogApi /namespace:MyFoodLog.Web.API.Client /GenerateClientInterfaces:true /InjectHttpClient:true /UseHttpClientCreationMethod:false /GenerateClientClasses:true /output:MyFoodLogClient.g.cs /contractsoutput:Interfaces/IMyFoodLogClient.g.cs /GenerateContractsOutput:true /ContractsNamespace:MyFoodLog.Web.API.Client.Interfaces /excludedTypeNames:ExposedEntity_IncludingUserEntities_NotIncludingNotEditable /OperationGenerationMode:SingleClientFromOperationId /HttpClientType:MyFoodLog.Web.API.Client.Interfaces.ICustomHttpClient" exited with code -1. MyFoodLog.Web.API.Client    C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web.API.Client\MyFoodLog.Web.API.Client.csproj  20  
Warning RAZORSDK1007    Reference assembly C:\Solutions\TemporarySolutions\MyFoodLog\MyFoodLog.Web.API.Client\bin\Debug\net6.0\MyFoodLog.Web.API.Client.dll could not be found. This is typically caused by build errors in referenced projects.    MyFoodLog.Web   C:\Program Files\dotnet\sdk\8.0.100-preview.4.23260.5\Sdks\Microsoft.NET.Sdk.Razor\targets\Microsoft.NET.Sdk.Razor.MvcApplicationPartsDiscovery.targets 54

Guidance requested!

MarkStega commented 1 year ago

@BasJ93

I think you need to create a new branch & greatly chop down on the project that focuses on demonstrating the problem.

I did notice one oddity in that the 'MyFoodLog.Web.API.Client' project includes a source file MyFoodLogClient.g.cs which is a generated file. That's a very odd practice. I'd like to understand what you are trying to do there.

BasJ93 commented 1 year ago

@MarkStega, sorry I couldn't get to responding to this yet. The idea behind including the generated code (which is generated by NSwag for an OpenAPI spec of the backend api) is that it does not need to be generated during build. The branch was not intended as a pure example, though I will try to produce that, as it was a bug I ran in to during development and just kept the branch at the state where the bug showed up.

I should also fix up some of the errors you have shown in the other reply, as the main failure there is the fact that NSwag could not generate the client code (MyFoodLogClient.g.cs) due to the fact that it was expecting a running API.

I will update this issue when I've had time to clean it up for you.

MarkStega commented 1 year ago

@BasJ93

I was talking to Simon Z today and I brought up another possibility for the error. Material.Blazor depends upon components not modifying the DOM. We allow Blazor to initialize a component and then 'step out of the way' and all animations, etc. that you see are being controlled by Material Design javascript. If ChartJS is modifying the DOM it likely won't work with Material.Blazor.

Simon uses something called AMChart in his product. It has access to an empty div and only modifies that div. Blazor & Material Design have no idea that the div is getting modified and nothing else in the dom changes so both are happy.

One thing to try (after that longwinded windup would be to create another branch an comment all of the ChartJS/BlazorChartJS out of the code.

BasJ93 commented 1 year ago

@MarkStega I'm not opposed to trying that, but to me that feels off as the part of the app where I observed the behavior is no where near the ChartJS stuff.

The only thing modifying the DOM anywhere near the dropdown is the API call loading the options in to the dropdown, which only modifies the collection backing the MBSelect.

I'll work on condensing my example, to see if I can still reproduce the bug.

BasJ93 commented 1 year ago

@MarkStega Very weird, but I can no longer reproduce the behavior. Therefore I'm going to close this issue, and assume it was a mistake I made somewhere that I accidentally fixed.