MudListExtended - TypeError: Cannot read properties of null (reading 'offsetTop') at MudScrollManagerExtended.scrollToMiddle
MartinSoka opened this issue · comments
I'm using a custom search field because of an existing issue in the library with Searchbox and RenderFragment #257. Reproduction code below, tested in https://trymudextensions.pages.dev. The error is pretty random but when i filter elements and there is only 1 left which is displayed i get the following error (try to type e.g. Be in the example):
Unhandled exception rendering component: Cannot read properties of null (reading 'offsetTop')
TypeError: Cannot read properties of null (reading 'offsetTop')
at MudScrollManagerExtended.scrollToMiddle (http://localhost:5010/_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js:1:208)
at http://localhost:5010/_framework/blazor.webassembly.js:1:3337
at new Promise (<anonymous>)
at Object.beginInvokeJSFromDotNet (http://localhost:5010/_framework/blazor.webassembly.js:1:3311)
at Object.Gt [as invokeJSFromDotNet] (http://localhost:5010/_framework/blazor.webassembly.js:1:62537)
at Object.Ii (http://localhost:5010/_framework/dotnet.7.0.12.vzza166i95.js:5:71974)
at _mono_wasm_invoke_js_blazor (http://localhost:5010/_framework/dotnet.7.0.12.vzza166i95.js:14:103886)
at wasm://wasm/00993936:wasm-function[313]:0x1d6b8
at wasm://wasm/00993936:wasm-function[283]:0x1cae6
at wasm://wasm/00993936:wasm-function[221]:0xe1d6
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'offsetTop')
TypeError: Cannot read properties of null (reading 'offsetTop')
at MudScrollManagerExtended.scrollToMiddle (http://localhost:5010/_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js:1:208)
My code:
<MudListExtended T="MyObj"
Clickable=true
MultiSelection=true
MaxItems="10">
<MudTextField Class="my-4 mx-2 pa-3" @bind-Value="@_searchValue" TextChanged="@((string value) => _searchValue = value)" Variant=Variant.Outlined Adornment="Adornment.End" Immediate=true AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="MudBlazor.Color.Dark" IconSize="Size.Medium"></MudTextField>
@foreach (var o in Contacts.Where(obj => Displayfilter(obj, _searchValue)))
{
<MudListItemExtended Value="o" Text="@o.Title" />
}
</MudListExtended>
@code {
public string _searchValue = String.Empty;
public List<MyObj> Contacts {get; set;}
public class MyObj{
public string Title {get; set;}
public string Identifier {get; set;}
}
protected override void OnInitialized(){
Contacts = new List<MyObj> {new MyObj {Title="Alpha", Identifier="anna@dsa.ds"}, new MyObj {Title="Beta", Identifier="bb@dxyz.sc"}};
}
private bool Displayfilter(MyObj contact, string searchString)
{
if (searchString == String.Empty || (contact.Title != null && contact.Title.Contains(searchString, StringComparison.CurrentCultureIgnoreCase)))
{
return true;
}
return false;
}
}
as the exception doesn't have any visible side effects we suppress it for now in js like this:
if (window.mudScrollManagerExtended) {
let scrollToMiddleOriginal = window.mudScrollManagerExtended.scrollToMiddle;
window.mudScrollManagerExtended.scrollToMiddle = (parentId, childId) => {
try {
scrollToMiddleOriginal(parentId, childId);
} catch { }
}
}
You can prepare a PR to use try catch if you have a time 🙂