Bugfix/disabled

src/SimpleBlazorMultiselect.Demo/Layout/NavMenu.razor

@@ -76,5 +76,12 @@
                 <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> ObjectBinding
             </NavLink>
         </div>
+
+        <!-- DisabledDropdown -->
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="DisabledDropdown" Match="NavLinkMatch.All">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> DisabledDropdown
+            </NavLink>
+        </div>
     </nav>
 </div>

src/SimpleBlazorMultiselect.Demo/Pages/DisabledDropdown.razor

@@ -0,0 +1,31 @@
+@page "/DisabledDropdown"
+<h3>DisabledDropdown</h3>
+
+<div class="row">
+    <div class="col-4">
+        <SimpleMultiselect
+                Disabled="@_isDisabled"
+                Options="@Globals.EuropeanCapitals"
+                CanFilter="true"
+                @bind-SelectedOptions="_selectedItems"/>
+    </div>
+    <div class="col-4">
+        <button class="btn btn-primary" @onclick="() => _isDisabled  = !_isDisabled">
+            @(_isDisabled ? "Enable" : "Disable")
+        </button>
+        <br/>
+        You have selected the following items:
+        <ul>
+            @foreach (var item in _selectedItems)
+            {
+                <li>@item</li>
+            }
+        </ul>
+    </div>
+</div>
+
+@code {
+    private bool _isDisabled;
+
+    private HashSet<string> _selectedItems = [];
+}

src/SimpleBlazorMultiselect.Tests/DisabledTests.cs

@@ -0,0 +1,100 @@
+using Bunit;
+using FluentAssertions;
+using Xunit;
+
+namespace SimpleBlazorMultiselect.Tests;
+
+public class DisabledTests : BaseTest
+{
+    [Fact]
+    public void Component_WhenDisabled_HasDisabledAttribute()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+            .Add(p => p.Disabled, true)
+        );
+
+        var button = component.Find("button");
+        button.HasAttribute("disabled").Should().BeTrue();
+    }
+
+    [Fact]
+    public void Component_WhenDisabled_DoesNotOpenOnClick()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+            .Add(p => p.Disabled, true)
+        );
+
+        var button = component.Find("button");
+        button.Click();
+
+        AssertClosed(component);
+    }
+
+    [Fact]
+    public void Component_WhenEnabled_OpensOnClick()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+            .Add(p => p.Disabled, false)
+        );
+
+        var button = component.Find("button");
+        button.Click();
+
+        AssertOpen(component, TestOptions.Count);
+    }
+
+    [Fact]
+    public void Component_WhenDisabledThenEnabled_OpensOnClick()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+            .Add(p => p.Disabled, true)
+        );
+
+        var button = component.Find("button");
+        button.Click();
+        AssertClosed(component);
+
+        component.SetParametersAndRender(parameters => parameters.Add(p => p.Disabled, false));
+
+        button.Click();
+        AssertOpen(component, TestOptions.Count);
+    }
+
+    [Fact]
+    public void Component_WhenEnabledThenDisabled_DoesNotOpenOnClick()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+            .Add(p => p.Disabled, false)
+        );
+
+        var button = component.Find("button");
+        button.Click();
+        AssertOpen(component, TestOptions.Count);
+
+        component.SetParametersAndRender(parameters => parameters.Add(p => p.Disabled, true));
+
+        button.Click();
+        AssertClosed(component);
+    }
+
+    [Fact]
+    public void Component_WhenDisabledWithMenuOpen_ClosesMenu()
+    {
+        var component = RenderComponent<SimpleMultiselect<string>>(parameters => parameters
+            .Add(p => p.Options, TestOptions)
+        );
+
+        var button = component.Find("button");
+        button.Click();
+        AssertOpen(component, TestOptions.Count);
+
+        component.SetParametersAndRender(parameters => parameters.Add(p => p.Disabled, true));
+
+        AssertClosed(component);
+    }
+}

src/SimpleBlazorMultiselect.Tests/EqualityTests.cs

@@ -0,0 +1,170 @@
+using AngleSharp.Dom;
+using AngleSharp.Html.Dom;
+using Bunit;
+using FluentAssertions;
+using Microsoft.AspNetCore.Components;
+using Xunit;
+
+namespace SimpleBlazorMultiselect.Tests;
+
+public class EqualityTests : BaseTest
+{
+    [Fact]
+    public void Component_CanDeselect_WhenPrefilledValueItems()
+    {
+        var options = new List<TestValueItem>
+        {
+            new("1", "Apple"),
+            new("2", "Banana"),
+            new("3", "Cherry")
+        };
+        var selectedItems = new HashSet<TestValueItem>
+        {
+            new("1", "Apple")
+        };
+
+        var component = RenderComponent<SimpleMultiselect<TestValueItem>>(parameters => parameters
+            .Add(p => p.Options, options)
+            .Add(p => p.SelectedOptions, selectedItems)
+            .Add(p => p.StringSelector, item => item.Name)
+            .Add(p => p.DefaultText, "Select fruits")
+            .Add(p => p.SelectedOptionsChanged, EventCallback.Factory.Create<HashSet<TestValueItem>>(this, newSelection => { selectedItems = newSelection; })));
+
+        var button = component.Find("button");
+        button.TextContent.Should().Contain("Apple");
+        button.Click();
+
+        // Now only apple should be checked
+        var appleOption = component.FindAll(".dropdown-item")[0];
+        var appleCheckbox = appleOption.QuerySelector<IHtmlInputElement>("input[type='checkbox']");
+        appleCheckbox.Should().NotBeNull();
+        appleCheckbox.IsChecked.Should().BeTrue();
+
+        appleOption.Click();
+
+        // After clicking, apple should be deselected
+        selectedItems.Should().BeEmpty();
+        button = component.Find("button");
+        button.TextContent.Should().Be("Select fruits");
+    }
+
+    [Fact]
+    public void Component_CanDeselect_WhenPrefilledReferenceItems()
+    {
+        var options = new List<TestReferenceItem>
+        {
+            new("1", "Apple"),
+            new("2", "Banana"),
+            new("3", "Cherry")
+        };
+        var selectedItems = new HashSet<TestReferenceItem>
+        {
+            new("1", "Apple")
+        };
+
+        var component = RenderComponent<SimpleMultiselect<TestReferenceItem>>(parameters => parameters
+            .Add(p => p.Options, options)
+            .Add(p => p.SelectedOptions, selectedItems)
+            .Add(p => p.StringSelector, item => item.Name)
+            .Add(p => p.DefaultText, "Select fruits")
+            .Add(p => p.SelectedOptionsChanged, EventCallback.Factory.Create<HashSet<TestReferenceItem>>(this, newSelection => { selectedItems = newSelection; })));
+
+        var button = component.Find("button");
+        button.TextContent.Should().Contain("Apple");
+        button.Click();
+
+        // Now only apple should be checked
+        var appleOption = component.FindAll(".dropdown-item")[0];
+        var appleCheckbox = appleOption.QuerySelector<IHtmlInputElement>("input[type='checkbox']");
+        appleCheckbox.Should().NotBeNull();
+        appleCheckbox.IsChecked.Should().BeTrue();
+
+        appleOption.Click();
+
+        // After clicking, apple should be deselected
+        selectedItems.Should().BeEmpty();
+        button = component.Find("button");
+        button.TextContent.Should().Be("Select fruits");
+    }
+
+    [Fact]
+    public void Component_CanDeselectValueItem_WhenMatchByReference()
+    {
+        var options = new List<TestValueItem>
+        {
+            new("1", "Apple"),
+            new("2", "Banana"),
+            new("3", "Cherry")
+        };
+        var selectedItems = new HashSet<TestValueItem>
+        {
+            new("1", "Apple")
+        };
+
+        var component = RenderComponent<SimpleMultiselect<TestValueItem>>(parameters => parameters
+            .Add(p => p.Options, options)
+            .Add(p => p.SelectedOptions, selectedItems)
+            .Add(p => p.StringSelector, item => item.Name)
+            .Add(p => p.DefaultText, "Select fruits")
+            .Add(p => p.SelectedOptionsChanged, EventCallback.Factory.Create<HashSet<TestValueItem>>(this, newSelection => { selectedItems = newSelection; }))
+            .Add(p => p.MatchByReference, true)); // Should not matter for value types
+
+        var button = component.Find("button");
+        button.TextContent.Should().Contain("Apple");
+        button.Click();
+
+        // Now only apple should be checked
+        var appleOption = component.FindAll(".dropdown-item")[0];
+        var appleCheckbox = appleOption.QuerySelector<IHtmlInputElement>("input[type='checkbox']");
+        appleCheckbox.Should().NotBeNull();
+        appleCheckbox.IsChecked.Should().BeTrue();
+
+        appleOption.Click();
+
+        // After clicking, apple should be deselected
+        selectedItems.Should().BeEmpty();
+        button = component.Find("button");
+        button.TextContent.Should().Be("Select fruits");
+    }
+
+    [Fact]
+    public void Component_CannotDeselectIdenticalInstance_WhenMatchByReference()
+    {
+        var options = new List<TestReferenceItem>
+        {
+            new("1", "Apple"),
+            new("2", "Banana"),
+            new("3", "Cherry")
+        };
+        var selectedItems = new HashSet<TestReferenceItem>
+        {
+            new("1", "Apple")
+        };
+
+        var component = RenderComponent<SimpleMultiselect<TestReferenceItem>>(parameters => parameters
+            .Add(p => p.Options, options)
+            .Add(p => p.SelectedOptions, selectedItems)
+            .Add(p => p.StringSelector, item => item.Name)
+            .Add(p => p.DefaultText, "Select fruits")
+            .Add(p => p.SelectedOptionsChanged, EventCallback.Factory.Create<HashSet<TestReferenceItem>>(this, newSelection => { selectedItems = newSelection; }))
+            .Add(p => p.MatchByReference, true)); // This will break the deselection
+
+        var button = component.Find("button");
+        button.TextContent.Should().Contain("Apple");
+        button.Click();
+
+        // Apple should not be checked because the instance is different
+        // So clicking it will add another apple instead of removing the existing one
+        var appleOption = component.FindAll(".dropdown-item")[0];
+        var appleCheckbox = appleOption.QuerySelector<IHtmlInputElement>("input[type='checkbox']");
+        appleCheckbox.Should().NotBeNull();
+        appleCheckbox.IsChecked.Should().BeFalse();
+
+        appleOption.Click();
+
+        // After clicking, we should have two apples
+        selectedItems.Should().HaveCount(2);
+        button = component.Find("button");
+        button.TextContent.Should().Be("Apple, Apple");
+    }
+}

src/SimpleBlazorMultiselect.Tests/Helper/BaseTest.cs

@@ -0,0 +1,44 @@
+using Bunit;
+using FluentAssertions;
+
+namespace SimpleBlazorMultiselect.Tests;
+
+public class BaseTest : TestContext
+{
+    protected readonly List<string> TestOptions =
+    [
+        "Apple",
+        "Banana",
+        "Cherry",
+        "Date",
+        "Elderberry"
+    ];
+
+    public BaseTest()
+    {
+        JSInterop.SetupModule("./_content/SimpleBlazorMultiselect/js/simpleMultiselect.js")
+            .SetupModule("register", invocation => invocation.Arguments.Count == 2)
+            .SetupVoid("dispose");
+    }
+
+    protected static void AssertOpen(IRenderedComponent<SimpleMultiselect<string>> component, int? expectedItemCount = null)
+    {
+        var dropdown = component.Find(".dropdown-menu.show");
+        dropdown.Should().NotBeNull();
+
+        if (expectedItemCount.HasValue)
+        {
+            var dropdownItems = component.FindAll(".dropdown-item");
+            dropdownItems.Should().HaveCount(expectedItemCount.Value);
+        }
+    }
+
+    protected static void AssertClosed(IRenderedComponent<SimpleMultiselect<string>> component)
+    {
+        var dropdown = component.FindAll(".dropdown-menu.show");
+        dropdown.Should().BeEmpty();
+
+        var dropdownItems = component.FindAll(".dropdown-item");
+        dropdownItems.Should().HaveCount(0);
+    }
+}

src/SimpleBlazorMultiselect.Tests/Helper/TestReferenceItem.cs

@@ -0,0 +1,7 @@
+namespace SimpleBlazorMultiselect.Tests;
+
+public class TestReferenceItem(string id, string name)
+{
+    public string Id { get; set; } = id;
+    public string Name { get; set; } = name;
+}

src/SimpleBlazorMultiselect.Tests/Helper/TestValueItem.cs

@@ -0,0 +1,3 @@
+namespace SimpleBlazorMultiselect.Tests;
+
+public record TestValueItem(string Id, string Name);

src/SimpleBlazorMultiselect.Tests/SimpleBlazorMultiselect.Tests.csproj

@@ -19,6 +19,10 @@
         <PackageReference Include="bUnit.web" Version="1.40.0" />
         <PackageReference Include="FluentAssertions" Version="8.6.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.19" />
+        <PackageReference Include="xunit.runner.visualstudio" Version="3.1.5">
+            <PrivateAssets>all</PrivateAssets>
+            <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+        </PackageReference>
     </ItemGroup>
 
     <ItemGroup>