fix: Null reference exception when pressing clear button in FluentAutocomplete

[yspanj]

🐛 Bug Report

Pressing the clear button of the Fluent autocomplete results in a null reference exception.

💻 Repro or Code Sample

• Using the example on the documentation page for the fluent autocomplete
• Running it using FluentUi 4.7.2
• Select an item from the list
• Press the clear button

🤔 Expected Behavior

Selection should be cleared.

😯 Current Behavior

Null reference exception with the following stack trace.

blazor.web.js:1  [2024-05-07T14:56:29.400Z] Error: Microsoft.JSInterop.JSException: Could not find 'focusOn' ('focusOn' was undefined).
Error: Could not find 'focusOn' ('focusOn' was undefined).
    at https://localhost:7060/_framework/blazor.web.js:1:734
    at Array.forEach (<anonymous>)
    at l.findFunction (https://localhost:7060/_framework/blazor.web.js:1:702)
    at b (https://localhost:7060/_framework/blazor.web.js:1:5445)
    at https://localhost:7060/_framework/blazor.web.js:1:3238
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7060/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (https://localhost:7060/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (https://localhost:7060/_framework/blazor.web.js:1:60316)
    at connection.onreceive (https://localhost:7060/_framework/blazor.web.js:1:53957)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.OnClearAsync() in /_/src/Core/Components/List/FluentAutocomplete.razor.cs:line 473
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

🔦 Context

This only seems to happen on a debug build.

20240507_fluent_autocomplete_bug.mp4

🌍 Your Environment

• Windows 11
• Microsoft Edge, Google Chrome, and Mozilla FireFox
• .NET 8 Fluent Ui 4.7.2

[Denis Voituron]

Without seeing an example of reproducible code or a repo, we don't know how to do anything.

focusOn is a javascript method included in the FluentAutocomplete.razor.js file.
Can you reload the page via Ctrl+F5 (to clear the cache) or have you checked that you are developing using the "Interactive" RenderMode?

[Vincent Baaij]

Closing due to inactivity.