MudListExtended - TypeError: Cannot read properties of null (reading 'offsetTop') at MudScrollManagerExtended.scrollToMiddle

[MartinSoka]

I'm using a custom search field because of an existing issue in the library with Searchbox and RenderFragment https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions/issues/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;
        }
}

[MartinSoka]

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 { } } }

[mckaragoz]

You can prepare a PR to use try catch if you have a time 🙂