diff --git a/src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs
index e0c5051334e..e4f6c7902ca 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs
@@ -213,6 +213,14 @@ private AttributeItem[] GetAttributes() =>
             Type = "bool",
             ValueList = "true/false",
             DefaultValue = "false"
+        },
+        new()
+        {
+            Name=nameof(AutoFill<string>.IsAutoClearWhenInvalid),
+            Description=Localizer["AttIsAutoClearWhenInvalid"],
+            Type="bool",
+            ValueList="true/false",
+            DefaultValue="false"
         }
     ];
 }
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 31e9f235488..1ba921f644f 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1997,7 +1997,8 @@
     "IsVirtualizeTitle": "Virtualize",
     "IsVirtualizeIntro": "Set <code>IsVirtualize</code> to <b>true</b> enable virtual scroll for large data",
     "IsVirtualizeDescription": "Component virtual scrolling supports two ways of providing data through <code>Items</code> or <code>OnQueryAsync</code> callback methods",
-    "AttrIsVirtualize": "Wether to enable virtualize"
+    "AttrIsVirtualize": "Wether to enable virtualize",
+    "AttIsAutoClearWhenInvalid": "Whether to automatically clear invalid values when focus leaves the component"
   },
   "BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
     "Title": "AutoComplete",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 194965c268a..3073977a52d 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1997,7 +1997,8 @@
     "IsVirtualizeTitle": "虚拟滚动",
     "IsVirtualizeIntro": "通过设置 <code>IsVirtualize</code> 参数开启组件虚拟功能特性",
     "IsVirtualizeDescription": "组件虚拟滚动支持两种形式通过 <code>Items</code> 或者 <code>OnQueryAsync</code> 回调方法提供数据",
-    "AttrIsVirtualize": "是否开启虚拟滚动"
+    "AttrIsVirtualize": "是否开启虚拟滚动",
+    "AttIsAutoClearWhenInvalid":"焦点移除组件时是否自动清空无效值"
   },
   "BootstrapBlazor.Server.Components.Samples.AutoCompletes": {
     "Title": "AutoComplete 自动完成",
diff --git a/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs b/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
index e135d4c42bf..466bbb9059a 100644
--- a/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
+++ b/src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
@@ -143,6 +143,8 @@ public partial class AutoFill<TValue>
     [NotNull]
     private RenderTemplate? _dropdown = null;
 
+    private string? _lastClientValue;
+
     /// <summary>
     /// Gets the component style.
     /// </summary>
@@ -180,6 +182,30 @@ protected override void OnParametersSet()
         Items ??= [];
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _lastClientValue = _clientValue;
+        }
+
+        if (_lastClientValue != _clientValue)
+        {
+            _lastClientValue = _clientValue;
+            _filterItems = null;
+
+            _dropdown.Render();
+            await InvokeVoidAsync("setValue", Id, _clientValue);
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -215,6 +241,7 @@ private async Task OnClickItem(TValue val)
     {
         CurrentValue = val;
         _displayText = GetDisplayText(val);
+        _clientValue = _displayText;
 
         // 使用脚本更新 input 值
         await InvokeVoidAsync("setValue", Id, _displayText);