CODEWITHSUNDEEP
.netblazormudblazor
CarrotHands
CarrotHands

Reputation: 33

Blazor server app requires clicking on the page before elements can be interacted with

The app works just fine (aside from being rather sluggish when run from a droplet), but any time a new page is loaded the elements on the page don't recognize the mouse (e.g. the cursor doesn't change when hovering on a clickable element) until the user clicks somewhere within the page. I don't know what code I would include here for clarification but I'm happy to add whatever anyone thinks would help. It might be relevant that I'm using MudBlazor for most elements. You can see the effect here

Added by request: here is the app bar 

    <MudText Typo="Typo.h3" Class="ml-3 clickable" @onclick="ReturnToIndex" Style="margin-right:10px;font-weight:bold;font-family:'Times New Roman', Times, serif">RecipeAZ</MudText>
    @if (User?.Id == "02174cf0–9412–4cfe - afbf - 59f706d72cf6") {
        <MudIconButton Icon="@Icons.Material.Filled.FileUpload" OnClick="@_jsonDbService.ExportToJson"/>
        <MudIconButton Icon="@Icons.Material.Filled.FileDownload" OnClick="@_jsonDbService.ImportFromJson" />
    }        
    <MudSpacer />
    <MudGrid Spacing="1" Justify="Justify.FlexEnd">
        <MudItem>
            <MudIconButton Icon="@Icons.Material.Filled.Search" Size="Size.Large" Style="margin-right:0px"
                OnClick="GoToSearch" />
        </MudItem>
        <MudItem>
            <MudAutocomplete T="string" Variant="Variant.Text" DisableUnderLine="true" Margin="Margin.Dense" Label="Search Recipes"
                Style="margin-left:0px;margin-right:0px;width:300px;background-color:#fff1ce;border-radius:6px"
                @bind-Text="_searchValue" SearchFunc="SearchRecipes"
                ResetValueOnEmptyText="true" CoerceText="false"/>
        </MudItem>
        <MudItem Class="vcenter mr-5">
            <MudButton Size="Size.Small"
                @onclick="() => GoToBrowse()">
                Advanced search
            </MudButton>
        </MudItem>            
        <MudItem Class="vcenter">
            <AuthorizeView>
                <Authorized>
                    <MudButton Class="mr-5" OnClick="NewRecipe" Variant="Variant.Outlined">+New Recipe</MudButton>
                </Authorized>
            </AuthorizeView>
        </MudItem>
    </MudGrid>
    <MudSpacer />
    <LoginDisplay />
</MudAppBar>

It occurs to me that there are two layouts, one that I wrote with MudBlazor, and another that I think must have been introduced when I added Identity scaffolding. I thought that the latter was only relevant when on one of the account related razor pages, but elements from it are present invisibly on all pages. So in App.razor I have

<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

then in the Pages folder I have _ViewStart.cshtml which has

@{ Layout = "/Pages/Shared/_Layout.cshtml"; }

This seems like a likely culprit to me. Update: ok I moved _ViewStart to the Pages/Account folder and that did remove the _Layout.cshtml elements from the non-account-related pages but didn't change the clicking behavior.

Upvotes: 1

Views: 124

Answers (1)

RBee
RBee

Reputation: 4967

Change your MudAutocomplete From @bind-Text to @bind-Value

<MudAutocomplete T="string" Variant="Variant.Text" DisableUnderLine="true" Margin="Margin.Dense" Label="Search Recipes"
                Style="margin-left:0px;margin-right:0px;width:300px;background-color:#fff1ce;border-radius:6px"
                @bind-Value="_searchValue" SearchFunc="SearchRecipes"
                ResetValueOnEmptyText="true" CoerceText="false"/>

There is an overlay being produced from the MudAutocomplete component. because of the incorrect binding.

The default behaviour for the overlay is to be visible and only disappear once clicked. browser tools screenshot

Upvotes: 1

Related Questions