AutoCreateForm not displaying lookups

Service Stack 6.8 - I am trying to use the AutoCreateForm outside the AutoQueryGrid and it seems the lookup dropdown won’t open. Here is a video:

AutoQuery:

<AutoQueryGrid AllowSelection="true"  @ref=@grid Model="EmployeeDependent"
    Apis="Apis.AutoQuery<EmployeeDependentQuery,CreateEmployeeDependent,UpdateEmployeeDependent>()" ConfigureQuery="Configure" 
        >

vs.

Autoform:

<AutoCreateForm Heading="" FormStyle="FormStyle.Card" Done="CloseForm" Save="CloseForm"
                     Model="EmployeeDependent" 
                     ApiType="typeof(CreateEmployeeDependent)">
      </AutoCreateForm>

Are you seeing any output in the web console? Again, appreciate the video to clearly demonstrate the behavior you are seeing, but to try and find the root cause, need to be able to replicate the problem.

Something to double check would be if you have the following JS interop code being loaded. You can find the following lines in the blazor-tailwind which if missing could be causing issues.

<script src="_framework/blazor.webassembly.js"></script>
<script src="/js/servicestack-blazor.js"></script>
<script>JS.init()</script>

Any other information about your setup would be appreciated. All the issues you are having I think might be related to something in your project setup. A minimal Blazor Wasm project demonstrating the issue would mean I could reproduce it and find a solution for your particular setup.

If you do a comparison of your project setup vs the blazor-tailwind project, you might spot something else you are missing or have different that could be causing the problem, if I am able to reproduce it, I’ll let you know.

All the JS interop items are there except I am manually calling Blazor.start.

Have you tried the autocreateform with a lookup input (from the db and not an enum)?

I see these two errors:

blazor.webassembly.js:1  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at ServiceStack.AppMetadataUtils.GetCache(AppMetadata app) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack/src/ServiceStack.Client/MetadataTypes.cs:line 979
   at ServiceStack.AppMetadataUtils.GetType(AppMetadata app, String name) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack/src/ServiceStack.Client/MetadataTypes.cs:line 1020
   at ServiceStack.Blazor.Components.Tailwind.LookupInput.get_Icon() in /home/runner/work/ServiceStack/ServiceStack/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/LookupInput.razor.cs:line 157
   at ServiceStack.Blazor.Components.Tailwind.LookupInput.BuildRenderTree(RenderTreeBuilder __builder) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/LookupInput.razor:line 22
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
window.Module.s.printErr @ blazor.webassembly.js:1
Fe._internal.dotNetCriticalError @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a4c1
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
_mono_wasm_invoke_js_with_args @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a47a
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
_mono_wasm_invoke_js_with_args @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a47a
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
Fe._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a4c1
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
_call_method_with_converted_args @ dotnet.6.0.15.6p7pbx14aw.js:1
call_method @ dotnet.6.0.15.6p7pbx14aw.js:1
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
call_assembly_entry_point @ dotnet.6.0.15.6p7pbx14aw.js:1
callEntryPoint @ blazor.webassembly.js:1
At @ blazor.webassembly.js:1
await in At (async)
(anonymous) @ page:224
Promise.then (async)
(anonymous) @ page:223
BrowserConsoleLogger.js:50  [Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer] Unhandled exception rendering component: Object reference not set to an instance of an object.
log @ BrowserConsoleLogger.js:50
(anonymous) @ blazor.webassembly.js:1
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a4c1
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a4c1
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
_mono_wasm_invoke_js_with_args @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a47a
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
_mono_wasm_invoke_js_with_args @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a47a
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.15.6p7pbx14aw.js:1
_js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
js_to_mono_obj @ dotnet.6.0.15.6p7pbx14aw.js:1
Fe._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.15.6p7pbx14aw.js:1
$func219 @ 00971dfa:0x1a4c1
$func167 @ 00971dfa:0xce8f
$func166 @ 00971dfa:0xbd73
$func2815 @ 00971dfa:0xabef3
$func1619 @ 00971dfa:0x6fcb4
$func1623 @ 00971dfa:0x70321
$mono_wasm_invoke_method @ 00971dfa:0x969f
Module._mono_wasm_invoke_method @ dotnet.6.0.15.6p7pbx14aw.js:1
_call_method_with_converted_args @ dotnet.6.0.15.6p7pbx14aw.js:1
call_method @ dotnet.6.0.15.6p7pbx14aw.js:1
(anonymous) @ dotnet.6.0.15.6p7pbx14aw.js:1
call_assembly_entry_point @ dotnet.6.0.15.6p7pbx14aw.js:1
callEntryPoint @ blazor.webassembly.js:1
At @ blazor.webassembly.js:1
await in At (async)
(anonymous) @ page:224
Promise.then (async)
(anonymous) @ page:223
BrowserConsoleLogger.js:53  [Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer] Exception: System.NullReferenceException: Object reference not set to an instance of an object.
   at ServiceStack.AppMetadataUtils.GetCache(AppMetadata app) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack/src/ServiceStack.Client/MetadataTypes.cs:line 979
   at ServiceStack.AppMetadataUtils.GetType(AppMetadata app, String name) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack/src/ServiceStack.Client/MetadataTypes.cs:line 1020
   at ServiceStack.Blazor.Components.Tailwind.LookupInput.get_Icon() in /home/runner/work/ServiceStack/ServiceStack/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/LookupInput.razor.cs:line 157
   at ServiceStack.Blazor.Components.Tailwind.LookupInput.BuildRenderTree(RenderTreeBuilder __builder) in /home/runner/work/ServiceStack/ServiceStack/ServiceStack.Blazor/src/ServiceStack.Blazor/Components/Tailwind/LookupInput.razor:line 22
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

It looks like the registered JsonApiClient is unable to get the AppMetadata which is required for a lot of the AutoForm controls to work. Can you share your Program.cs or startup code for this project? eg our template has the following lines in the Program.cs to register all the required dependencies into the standard IoC.

This is what I have. It works fine in the autoquery grid but not when it is inline.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddLogging(c => c
    .AddBrowserConsole()
    .SetMinimumLevel(LogLevel.Trace)
);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();

builder.Services.AddScoped<ServiceStackStateProvider>();
builder.Services.AddScoped<AuthenticationStateProvider>(s => s.GetRequiredService<ServiceStackStateProvider>());

// Use / for local or CDN resources
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
builder.Services.AddBlazorApiClient(apiBaseUrl);
builder.Services.AddLocalStorage();


var app = builder.Build();

BlazorConfig.Set(new BlazorConfig
{
    IsWasm = true,
    Services = app.Services,
    FallbackAssetsBasePath = apiBaseUrl,
    EnableLogging = true,
    EnableVerboseLogging = builder.HostEnvironment.IsDevelopment(),
});

await app.RunAsync();

Thanks for the info. We were able to reproduce the problem and a fix was applied which is now available via MyGet. If you could give that a go in your project, and let us know how you go.

1 Like

Thank you. I’ll take a look. Is this also pushed to the github feed, we transitioned off MyGet due to all their issues.

Sorry, yes this is now also available on the GitHub feed.

1 Like