Bernardo Soccal
Bernardo Soccal

Reputation: 61

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

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).

Upvotes: 6

Views: 511

Answers (1)

HGMamaci
HGMamaci

Reputation: 1386

change this

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

to this

public EventCallback<(int, bool)> OnTagSelected { get; set; }

and it should work

Upvotes: 0

Related Questions