[MudCheckBox] - no element found for id: checkbox about mudblazor HOT 13 OPEN

Also, one thing to note:

@inherits MudCheckBox<bool>  <-- first instance

<MudCheckBox T="bool"        <-- second instance of the MudCheckBox
             Value="_value"
             ValueChanged="OnValueChanged"
             For="() => Value"
             Label="@Label"
             Color="Color.Primary">
</MudCheckBox>

Here, you are creating two instances of MudCheckBox. When you replace the BuildRenderTree base call with your own Razor code (MudCheckBox T="bool"), the inherits MudCheckBox doesn't appear in the DOM, but that doesn't mean the Blazor lifecycles won't be called. You will get both OnAfterRenderAsync calls for the inherits MudCheckBox and the checkbox that is in your render tree. However, since one doesn't exist in the DOM but tries to connect to the interceptor, the JS won't find it, and it will throw an exception. This makes sense to me, and the exception was always thrown, I guess it was just swallowed before for you.

How can I write component wrappers correctly?

If you look at how we do it with MS components and our own, we never inherit them unless it's a base non-Razor class. We wrap and re-pass all the needed parameters. For example:

@typeparam T

<MudCheckBox T="T"
             Value="Value"
             ValueChanged="ValueChanged"
             For="() => Value"
             Label="@Label"
             Color="Color.Secondary">
</MudCheckBox>

@code {
    [Parameter]
    public T? Value { get; set; }
	
    [Parameter]
    public string? Label { get; set; }
	
    [Parameter]
    public EventCallback<T?> ValueChanged { get; set; }
}

from mudblazor.

Now it is also not working on 6.12.0... I don't know why I get so many errors. There were no errors before.

I replied here: #9132 (comment).

I think that it can cause errors with element IDs (I might be wrong, but I remember that when controls were not generated by the source generator, there were no errors with IDs).

Razor files are always converted from .razor to a razor.g.cs file, where the HTML tree is converted to a render tree builder. This process is done automatically by the Razor compiler, and MudBlazor has nothing to do with it.

If it was working before with a certain MudBlazor version but then stopped, I suggest finding an SDK version that worked and pinning it in your project. Check the generated code, then switch back to the latest / broken SDK version. If the result is different, I suggest sending a bug report to Microsoft explaining the problem.

from mudblazor.

I fixed this bug in my project. When i used custom wrapped around MudCheckBox the error exists. When i removed wrapper there is no error. Fix details:
FritzTheCat9/YoutubeLinks@e2d65b4
Im leaving this error as open because i think it should work with MudCheckBox wrapper.

from mudblazor.

@mckaragoz What do you think?

from mudblazor.

This error was not occurring on previous versions of MudBlazor / .NET 8 / Visual Studio 2022 Preview.

In my other project i have some wrappers around MudBlazor controls and i get this errors when debugging:

I guess its from this autocomplete (in my MudBlazor wrapped control):

Also i got this error from select:

from mudblazor.

When i go to definition i see that some controls are now generated by source generator:

I think that it can couse errors with elements id's (i might be wrong but i remember that when controls were not generated by source generator there was no error wth id's)

from mudblazor.

from mudblazor.

now also is not working on 6.12.0.... i dont know why i get so many errors.. there was no errors before

from mudblazor.

I created a small reproduction repo:
https://github.com/FritzTheCat9/MudBlazor.BugWhenDebugging

Video from bug recreation:
https://github.com/MudBlazor/MudBlazor/assets/62745092/df67d36b-07e8-48d4-be54-77dcf83b2606

I think this bug is related to MudBlazor, because the breakpoint is in MudBlazor.min.js file.
Its urgent bug for me because i need to work on my projects and a lot of controls throws this exception.

from mudblazor.

I created a small reproduction repo:
https://github.com/FritzTheCat9/MudBlazor.BugWhenDebugging

Works for me just fine, no error in console, no exception in diagnostic tools "exception" tab.

A few weird moments:
Why your component are in wwwroot?
This code violating this principle:

private void OnValueChanged(bool value)
{
	Value = value;
	ValueChanged.InvokeAsync(value);
} 

I would replace with _value at least. Also the EventCallback is firing in fire and forget manner, which is also not a good thing.

from mudblazor.

Also, if I set the breakpoint manually in JS on that line, then yes, I will catch it. However, it was throwing even in earlier versions like 6.9.0 and lower (like 6.7.0 which is one year old now), this means it's not something we changed recently. This exception might also be expected, and you may have just disabled "Debug Just My Code," which is why your VS is catching them. VS doesn't know if it's something you should pay attention to or not, but even ASP.NET Core can throw internal exceptions that are intended. If you disable "Just My Code," you will receive these exceptions as well.

from mudblazor.

Thanks for helping me <3 Sorry if im a bit confusing. But i try to find the solution.

• "Why your component are in wwwroot?"
  I was creating fast demo so i missplaced Components folder. My mistake.

• How can i write component wrappers correctly? I want to wrap the behavior of MudBlazor control inside my control with some default parameters being set inside my control. So i will not repeat myself every time i use a control (for example i want to specify multiple default parameters):

<MudAutocomplete T=MyDictionaryItemDto
                 Value=DictionaryItemDto
                 ValueChanged=OnDictionaryItemChanged
                 Label=@Label
                 SearchFuncWithCancel=Search
                 ToStringFunc=DisplayDictionaryItem
                 Variant=Variant.Text
                 ShowProgressIndicator=true
                 SelectValueOnTab=true
                 ResetValueOnEmptyText=true
                 FullWidth=true
                 OnlyValidateIfDirty=true>

Also i would like to make this control take the same parameters like inherited / MudBlazor one.

• "I would replace with _value at least. Also the EventCallback is firing in fire and forget manner, which is also not a good thing."
  How i supose to update MudCheckBox Value? bind-Value is not updating the value in this example.

@typeparam T
@inherits MudCheckBox<T>

<MudCheckBox T="T"
             Value="Value"
             ValueChanged="OnValueChanged"
             For="() => Value"
             Label="@Label"
             Color="Color.Secondary">
</MudCheckBox>

@code {
    private void OnValueChanged(T value)
    {
        _value = value;
        ValueChanged.InvokeAsync(value);
    }
}

• i have enabled "Enable Just My Code" and still get the exceptions :(
  

from mudblazor.

@ScarletKuro I installed "Visual Studio 2022" not "Visual Studio 2022 Preview" and there is no error... xD
So i think this bug is caused by "Visual Studio 2022 Preview" version.

If You have time can You answer to my questions in the comment above? Thank You <3

from mudblazor.