fix(module:select): fix clearing behavior, reduce ValueChanged triggered, change value after datasource changes, follow the datasource element order

[anranruye]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

When a Select component:
1. has DefaultActiveFirstOption or DefaultValue attribute
2. inital value is not null
Then clearing is not not working as expected. When the first time clear, the selected value is set to DefaultValue/first option value

code:

<Select DataSource="@_list"
        @bind-Value="@_selectedValue1"
        DefaultActiveFirstOption
        ValueName="@nameof(Person.Value)"
        LabelName="@nameof(Person.Name)"
        DisabledName="@nameof(Person.IsDisabled)"
        Style="width:120px"
        AllowClear
        OnSelectedItemChanged="OnSelectedItemChangedHandler">
</Select>

<Button OnClick="()=>_selectedValue1 = null">Set value to null</Button>
@code
{
    List<Person> _list;
    string _selectedValue1 = "lucy";
    class Person
    {
        public string Value { get; set; }
        public string Name { get; set; }
        public bool IsDisabled { get; set; }
    }

    protected override void OnInitialized()
    {
        _list = new List<Person>
        {
            new Person {Value = "jack", Name = "Jack"},
            new Person {Value = "lucy", Name = "Lucy"},
            new Person {Value = "disabled", Name = "Disabled", IsDisabled = true},
            new Person {Value = "yaoming", Name = "YaoMing"}
        };
    }

    private void OnSelectedItemChangedHandler(Person value)
    {
        Console.WriteLine($"selected: ${value?.Name}");
    }
}

---

2. ValueChanged is triggered multiple times, which is unnecessary.
   
   code:

<Select DataSource="@_list"
        TItemValue="int?" TItem="Person"
        Value="@_selectedValue1" 
        ValueChanged="@((v) => { Console.WriteLine("ValueChanged:" + v); _selectedValue1 = v; })"
        ValueName="@nameof(Person.Value)"
        LabelName="@nameof(Person.Name)"
        DisabledName="@nameof(Person.IsDisabled)"
        Style="width:120px"
        AllowClear
        DefaultActiveFirstOption
        OnSelectedItemChanged="OnSelectedItemChangedHandler">
</Select>

@_selectedValue1

@code
{
    List<Person> _list;
    int? _selectedValue1 = 1;
    class Person
    {
        public int? Value { get; set; }
        public string Name { get; set; }
        public bool IsDisabled { get; set; }
    }

    protected override void OnInitialized()
    {
        _list = new List<Person>
        {
            new Person {Value = 1, Name = "Jack"},
            new Person {Value = 2, Name = "Lucy"},
            new Person {Value = 3, Name = "Disabled", IsDisabled = true},
            new Person {Value = 4, Name = "YaoMing"}
        };
    }

    private void OnSelectedItemChangedHandler(Person value)
    {
        Console.WriteLine($"selected: ${value?.Name}");
    }
}

---

3. the selected value is not changed when the selected option no longer exists after datasource changes
   
   

---

4. After change the order of elements in the datasource, the list doesn't follow the new element order.
   

code:

<Select DataSource="@_data"
        @bind-Value="@_value" 
        AllowClear
        Style="width:120px">
</Select>

<Button OnClick="()=>_data = new List<int?> { 2, 3, 4, 5 }">2345</Button>

<Button OnClick="()=>_data = new List<int?> { 2, 1, 3, 4 }">2134</Button>

@code
{
    List<int?> _data = new List<int?> { 1, 2, 3, 4 };
    int? _value = 4;
}

📝 Changelog

Language	Changelog
🇺🇸 English	fix wrong behavior when clear the selection; reduce ValueChanged triggered, change value if the selected option no longer exists after datasource changes; after change the order of elements in the datasource, make the list follow the new element order.
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[codecov]

Codecov Report

Merging #1886 (5487d3b) into master (ad2c045) will increase coverage by 23.69%.
The diff coverage is 54.00%.

@@             Coverage Diff             @@
##           master    #1886       +/-   ##
===========================================
+ Coverage    0.00%   23.69%   +23.69%     
===========================================
  Files         479      496       +17     
  Lines       31330    23360     -7970     
  Branches        0      122      +122     
===========================================
+ Hits            0     5535     +5535     
+ Misses      31330    17822    -13508     
- Partials        0        3        +3     

Impacted Files	Coverage Δ
components/select/Select.razor.cs	45.00% <54.00%> (+45.00%)	⬆️
components/card/Card.razor	0.00% <0.00%> (ø)
components/form/Form.razor	0.00% <0.00%> (ø)
components/rate/Rate.razor	0.00% <0.00%> (ø)
components/spin/Spin.razor	0.00% <0.00%> (ø)
components/tree/Tree.razor	0.00% <0.00%> (ø)
components/menu/MenuLink.cs	0.00% <0.00%> (ø)
components/menu/MenuMode.cs	0.00% <0.00%> (ø)
components/steps/Step.razor	0.00% <0.00%> (ø)
components/affix/Affix.razor	0.00% <0.00%> (ø)
... and 439 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ad2c045...5487d3b. Read the comment docs.

[anranruye]

To always follow the order of elements in the datasource, I clear the SelectOptionItems hashset and add the option items back one by one every time CreateDeleteSelectOptions() is called. I'm afraid this may affect performance when there is many select options. But I don't know how much impact this will have. @ElderJames @anddrzejb Do you think we should add a KeepDataSourceElementOrder property to control the open and close of this function？

[anddrzejb]

I agree with you that with larger number of elements in the select, current approach may impact the performance. Exposing a parameter (especially primitive boolean) gives a flexibility in opposition to a very opinionated solution. I cannot really see any harm in adding the suggested parameter. I am therefore voting in favor of KeepDataSorceElementOrder. This probably should default to true and in the docs we should explain why setting this to false can improve performance when dealing with large changeable lists.