fix(TSelect): 修复无法选中下拉项和初始化时双向绑定可以自动选中项 (#306)

Author: teacher-zhou

doc/TDesign.Docs.ServerSide/TDesign.xml

@@ -46,8 +46,8 @@
     </CodeContent>
 </Example>
 
-@code{
-    int Value1{ get; set; }
+        @code{
+        int Value1 { get; set; } = 1;
     string Value2 { get; set; }
 }
 

doc/TDesign.Docs.Shared/Pages/Components/Input/SelectPage.razor

@@ -2,68 +2,13 @@
 @using Test = TDesign.Docs.Shared.Pages.Components.Data.TablePage
 @layout EmptyLayout
 
-<TMenu>
-    <TMenuItem Link="/test">测试</TMenuItem>
-</TMenu>
-
-@*<TPagination @bind-PageIndex="Page" @bind-PageSize=Size @bind-Total=Total/>
-
-@code{
-    int Page { get; set; } = 1;
-    int Size { get; set; } = 3;
-    int Total { get; set; } = 12;
-}
-*@
-@*<TPopup Content="弹出一个层">
-    <TButton>悬浮</TButton>
-</TPopup>*@
-
-@*<TTable TItem="Test.User" Data="Test.User.GetData()">
-    <TTableExpandColumn>
-        <h4>Name:@context.Name</h4>
-    </TTableExpandColumn>
-    <TTableCheckboxColumn Field="f=>f.Id" />
-    <TTableFieldColumn Field="f=>f.Id" />
-    <TTableFieldColumn Field="f=>f.Name" />
-    <TTableFieldColumn Field="f=>f.Age" >
-        <FooterContent>
-            底部内容
-        </FooterContent>
-        </TTableFieldColumn>
-    <TTableFieldColumn Field="f=>f.Gender" />
-       
-</TTable>
-
-@code {
-    IEnumerable<string> Text { get; set; } = Enumerable.Empty<string>();
-
-    void HandleKey(KeyboardEventArgs e)
-    {
-
-    }
-}*@
-@*<TButton OnClick="e=>_dialog.Open()">
-    弹框
-</TButton>
-<TDialog @ref="_dialog">
-    让弹出框
-</TDialog>
-
-@code{
-    TDialog? _dialog;
-}*@
-@*
-@inject IDialogService DialogService
-
-<TButton OnClick="Open">
-    对话框
-</TButton>
-
+<div style="width:180px">
+<TSelect @bind-Value="Value">
+    <TSelectOption Value="1" Label="选项1">选项1</TSelectOption>
+        <TSelectOption Value="2" Label="选项2">选项2</TSelectOption>
+</TSelect>
+</div>
 
 @code{
-    async Task Open()
-    {
-        var dialog = await DialogService.OpenInfo("第一个提示");
-    }
-}
-@inject IJSRuntime JS*@
+    int Value { get; set; } = 1;
+}

doc/TDesign.Docs.Shared/Pages/TestPage.razor

@@ -0,0 +1,61 @@
+using Microsoft.AspNetCore.Components.Forms;
+using System.Linq.Expressions;
+
+namespace TDesign;
+
+/// <summary>
+/// 表单具备单项选择功能的组件基类。
+/// </summary>
+/// <typeparam name="TValue">值的类型。</typeparam>
+[ParentComponent(IsFixed = true)]
+[CascadingTypeParameter(nameof(TValue))]
+public abstract class SingleSelectionComponentBase<TValue> : TDesignChildContentComponentBase, IHasInputValue<TValue>
+{
+    /// <summary>
+    ///  执行当 <see cref="TInputRadio{TValue}"/> 触发的事件。
+    /// </summary>
+    [Parameter] public EventCallback<string> OnValueSelected { get; set; }
+
+    /// <summary>
+    /// 内部事件，当 <see cref="TInputRadio{TValue}"/> 组件被点击发生改变时触发。
+    /// </summary>
+    internal EventCallback<ChangeEventArgs> ChangeEventCallback { get; set; }
+
+    /// <summary>
+    /// Gets the selected value.
+    /// </summary>
+    internal TValue? SelectedValue => this.Value;
+
+    /// <inheritdoc/>
+    [Parameter]public TValue? Value { get; set; }
+    /// <inheritdoc/>
+    [Parameter] public Expression<Func<TValue?>>? ValueExpression { get; set; }
+    /// <inheritdoc/>
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [CascadingParameter]public EditContext? CascadedEditContext { get; set; }
+
+    /// <summary>
+    /// 表示当组内的单选框发生变化时的通知。
+    /// </summary>
+    internal event Action NotifyOptionsRendered;
+    string? _oldValue = default;
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        var newValue = this.GetValueAsString();
+        ChangeEventCallback = EventCallback.Factory.CreateBinder<string?>(this, __value =>
+        {
+            this.GetCurrentValueAsString(__value);
+            _ = OnValueSelected.InvokeAsync(__value);
+        }
+        , newValue);
+
+        if ( _oldValue != newValue )
+        {
+            _oldValue = newValue;
+            NotifyOptionsRendered?.Invoke();
+        }
+    }   
+}

doc/TDesign.Docs.WebAssembly/wwwroot/TDesign.xml

@@ -67,6 +67,8 @@ void BuildPrefixOrSuffix(RenderTreeBuilder builder, int sequence, string? text,
         }, !string.IsNullOrEmpty(text) || icon is not null);
     }
 
+    protected override string EventName => "onchange";
+
     protected override void BuildAttributes(IDictionary<string, object> attributes)
     {
         base.BuildAttributes(attributes);

src/TDesign/Components/Forms/SingleSelectionComponentBase.cs

@@ -6,7 +6,7 @@
     <ChildContent>
         <div class="t-select__wrap">
             <div class="@GetCssClassString()">
-                <TInputText @bind-Value="SelectedLabel" Readonly SuffixIcon="@(RefPopup.Visible?IconName.ChevronUp:IconName.ChevronDown)" AutoWidth="AutoWidth" placeholder="@Placeholder" Disabled="Disabled" Size="Size"/>
+                <TInputText @bind-Value="SelectedLabel" Readonly SuffixIcon="@(RefPopup.Visible?IconName.ChevronUp:IconName.ChevronDown)" AutoWidth="AutoWidth" placeholder="@Placeholder" Disabled="Disabled" Size="Size" />
 
             </div>
         </div>

src/TDesign/Components/Forms/TInputText.cs

@@ -1,11 +1,10 @@
-using Microsoft.AspNetCore.Components.Rendering;
-
-namespace TDesign;
+namespace TDesign;
 
 /// <summary>
 /// 用于收纳大量选项的信息录入类组件。
 /// </summary>
 /// <typeparam name="TValue">值的类型。</typeparam>
+[ParentComponent]
 public partial class TSelect<TValue>
 {
     /// <summary>
@@ -25,26 +24,43 @@ public partial class TSelect<TValue>
     /// <summary>
     /// Popup 组件的引用。
     /// </summary>
-    TPopup? RefPopup { get; set; }
+    internal TPopup? RefPopup { get; set; }
 
     /// <summary>
     /// 选中的标签的值。
     /// </summary>
-    string? SelectedLabel { get; set; }
+    internal string? SelectedLabel { get; set; }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+        if ( firstRender )
+        {
+            if ( Value is not null )
+            {
+                var initialSelectedOption = ChildComponents.OfType<TSelectOption<TValue>>().FirstOrDefault(m => Value.Equals(m.Value));
+
+                if ( initialSelectedOption != null )
+                {
+                    await SelectValue(initialSelectedOption.Value, initialSelectedOption.Label);
+                    await this.Refresh();
+                }
+            }
+        }
+    }
+
 
     /// <summary>
     /// 选择指定的值。
     /// </summary>
     /// <param name="value">选中的值。</param>
     /// <param name="label">选中的文本。</param>
-    public Task? SelectValue(TValue? value, string? label)
+    public async Task SelectValue(TValue? value, string? label)
     {
         Value = value;
-        ValueChanged.InvokeAsync(value);
-        OnValueSelected.InvokeAsync(value);
+        await ValueChanged.InvokeAsync(value);
+        await OnValueSelected.InvokeAsync(value);
         SelectedLabel = label;
-        this.Refresh();
-        return RefPopup?.Hide();
     }
 
     protected override void BuildCssClass(ICssClassBuilder builder)
@@ -67,7 +83,7 @@ public class TSelectOption<TValue> : TDesignComponentBase, IHasChildContent
     /// <summary>
     /// 级联 <see cref="TSelect{TValue}"/> 组件。
     /// </summary>
-    [CascadingParameter] protected TSelect<TValue> CascadingSelect { get; set; }
+    [CascadingParameter] public TSelect<TValue> CascadingSelect { get; set; }
     /// <summary>
     /// 选项的值。
     /// </summary>
@@ -84,7 +100,7 @@ public class TSelectOption<TValue> : TDesignComponentBase, IHasChildContent
     /// <summary>
     /// 自定义选项的内容。
     /// </summary>
-    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }    
 
     /// <inheritdoc/>
     protected override void OnParametersSet()
@@ -114,12 +130,13 @@ protected override void BuildCssClass(ICssClassBuilder builder)
     /// <inheritdoc/>
     protected override void BuildAttributes(IDictionary<string, object> attributes)
     {
-        attributes["onclick"] = HtmlHelper.Instance.Callback().Create(this, () =>
+        attributes["onclick"] = HtmlHelper.Instance.Callback().Create(this, async () =>
         {
-            if (!Disabled)
+            await CascadingSelect.SelectValue(Value, Label);
+            if ( CascadingSelect.RefPopup is not null )
             {
-                CascadingSelect.SelectValue(Value, Label);
+                await CascadingSelect.RefPopup.Hide();
             }
-        });
+        }, !Disabled);
     }
 }

src/TDesign/Components/Forms/TSelect.razor

@@ -39,10 +39,10 @@
 		<SupportedPlatform Include="browser" />
 	</ItemGroup>
 	<ItemGroup>
-		<PackageReference Include="ComponentBuilder" Version="4.1.0" />
-		<PackageReference Include="ComponentBuilder.Extensions" Version="4.1.0" />
-		<PackageReference Include="ComponentBuilder.FluentRenderTree" Version="4.1.0" />
-		<PackageReference Include="ComponentBuilder.JSInterop" Version="4.1.0" />
+		<PackageReference Include="ComponentBuilder" Version="4.1.2" />
+		<PackageReference Include="ComponentBuilder.Extensions" Version="4.1.2" />
+		<PackageReference Include="ComponentBuilder.FluentRenderTree" Version="4.1.2" />
+		<PackageReference Include="ComponentBuilder.JSInterop" Version="4.1.2" />
 		<PackageReference Include="Microsoft.SourceLink.GitHub" Version="1.1.1" />
 		<PackageReference Include="OneOf" Version="3.0.243" />
 		<PackageReference Include="SonarAnalyzer.CSharp" Version="8.51.0.59060">
@@ -126,6 +126,7 @@
 		<Folder Include="JSInterop\" />
 	</ItemGroup>
 
+
 	<Target Name="PostBuild" AfterTargets="PostBuildEvent">
 		<Exec Command="rem(){ :;};rem '&#xD;&#xA;@goto b&#xD;&#xA;';&#xD;&#xA;echo sh;&#xD;&#xA;cp $(OutDir)TDesign.xml ..\..\doc\TDesign.Docs.ServerSide;&#xD;&#xA;cp $(OutDir)TDesign.xml ..\..\doc\TDesign.Docs.WebAssembly\wwwroot;&#xD;&#xA;exit&#xD;&#xA;&#xD;&#xA;:b&#xD;&#xA;copy $(OutDir)TDesign.xml ..\..\doc\TDesign.Docs.ServerSide&#xD;&#xA;copy $(OutDir)TDesign.xml ..\..\doc\TDesign.Docs.WebAssembly\wwwroot" />
 	</Target>