Visual Studio 2022 Blazor error/bug with Tuple syntax, when using it with a Component callback parameter
Asked Answered
A

0

6

I have a simple Blazor component called TagComponent, that receives 4 parameters, my problem is with the OnTagSelected parameter, which receives a Callback to be called from the TagComponent.

Code snippet from my .razor Page:

// other code omitted for brevity

<p>Tags</p>
<div class="tags-container">
   @foreach (var tag in _allTags)
   {
      <TagComponent Name="@tag.Name" Id="@tag.Id" 
         AddToProductList="true" OnTagSelected="TagSelected" />
   }
</div>

// other code omitted for brevity

The TagComponent.razor looks like this:

<span class="tag-body" @onclick="SelectTag" >
   @Name
</span>

@code {
   [Parameter, EditorRequired]
   public string Name { get; set; } = default!;

   [Parameter, EditorRequired]
   public int Id { get; set; }

   [Parameter]
   public bool AddToProductList { get; set; } = false;

   [Parameter, EditorRequired]
   public EventCallback<(int id, bool addToProduct)> OnTagSelected { get; set; }

   private async Task SelectTag()
   {
      await OnTagSelected.InvokeAsync((Id, AddToProductList));
   }
}

I need to return 2 values from the TagComponent back to the Page with the @onclick event, so i use a tuple on the EventCallback TValue.

Back on the Page, the TagSelected method looks like this:

@code {

List<Tag> _allTags = new List<Tag>();
List<Tag> _productTags = new List<Tag>();

// other code omitted for brevity

private void TagSelected((int id, bool addToProduct) selectedTag)
{
   if (selectedTag.addToProduct)
   {
      var transferTag = _allTags.First(t => t.Id == selectedTag.id);
      _productTags.Add(new Tag(transferTag.Id, transferTag.Name));
      _allTags.Remove(transferTag);
   }
   else
   {
      var transferTag = _productTags.First(t => t.Id == selectedTag.id);
      _allTags.Add(new Tag(transferTag.Id, transferTag.Name));
      _productTags.Remove(transferTag);
   }
}

// other code omitted for brevity

}

Basically, whats happens here is, when i click the TagComponent, it will switch it between the _allTags and _productTags Lists, depending on the bool value in the tuple parameter.

The code compiles and runs just fine, my problem is with the error/warning in the Error List tab:

Visual Studio error List Tab

Also, on the editor, there's a red squiggly line, as if there was an error, which there isnt, because the code compiles and works just fine.

Component error tooltip

My question is, why is this happening, and is there a way to make errors/warnings go away? The code is working, but the IDE is showing errors as if it doesn't recognize the tuple syntax mixed with Blazor code.

Im on Windows 10, using Visual Studio Community 2022 Preview 17.4.0 Preview 2.0 with .NET 6.

Edit: This seems to be a Visual Studio specific problem, on VScode the errors disappeared (using .NET 6.0.401).

Augsburg answered 15/9, 2022 at 19:30 Comment(5)
Does this happen on 17.3.4?Glower
Probably related to this: github.com/dotnet/razor-compiler/issues/332Occasion
Something interesting here about the namespace. If you move the page to the same folder as the component the squigglies disappear. The tuples all though they have the same field names are different namespaces so they are not the same "Type"Howdy
@standsagainstpoliticalnames Yes, just tested, the same thing happens on 17.3.4Augsburg
@BernardoSoccal it seems with Visual Studio 17.5 the Bug is finally gone!Matheny

© 2022 - 2024 — McMap. All rights reserved.