fix(Textarea): adding new functionality to handle Shift + Enter (#5611)

* fix(keyup): prevent modifier key combinations from triggering Enter callback

- Add `hasNoModifiers` helper to check for Ctrl/Shift/Alt/Meta keys
- Update Enter key handling in `handleKeyUp` to ignore modifier combinations
- Retain existing Escape key logic

* doc: 更改注释为英文

* doc: 更新注释为英语

* refactor: 更新逻辑

* revert: 重置代码

* refactor: 使用 js 解决问题保证效率

* doc: 移除不使用的命名空间

* chore: bump version 9.4.9-beta04

---------

Co-authored-by: Argo Zhang <[email protected]>

Author: h2ls

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.9-beta03</Version>
+    <Version>9.4.9-beta04</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js

@@ -12,6 +12,10 @@ export function handleKeyUp(id, invoke, enter, enterCallbackMethod, esc, escCall
     if (el) {
         EventHandler.on(el, 'keyup', e => {
             if (enter && (e.key === 'Enter' || e.key === 'NumpadEnter')) {
+                const useShiftEnter = el.getAttribute('data-bb-shift-enter') === 'true';
+                if (!e.shiftKey && useShiftEnter) {
+                    return;
+                }
                 invoke.invokeMethodAsync(enterCallbackMethod, el.value)
             }
             else if (esc && e.key === 'Escape') {

src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs

@@ -6,86 +6,86 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// BootstrapInputBase 组件基类
+/// Base class for BootstrapInput components
 /// </summary>
 [BootstrapModuleAutoLoader("Input/BootstrapInput.razor.js", JSObjectReference = true, AutoInvokeInit = false)]
 public abstract class BootstrapInputBase<TValue> : ValidateBase<TValue>
 {
     /// <summary>
-    /// 获得 class 样式集合
+    /// Gets the class attribute value
     /// </summary>
     protected virtual string? ClassName => CssBuilder.Default("form-control")
         .AddClass($"border-{Color.ToDescriptionString()}", Color != Color.None && !IsDisabled && !IsValid.HasValue)
         .AddClass(CssClass).AddClass(ValidCss)
         .Build();
 
     /// <summary>
-    /// 元素实例引用
+    /// Gets or sets Element reference instance
     /// </summary>
     protected ElementReference FocusElement { get; set; }
 
     /// <summary>
-    /// 获得/设置 input 类型 placeholder 属性
+    /// Gets or sets the placeholder attribute value
     /// </summary>
     [Parameter]
     public string? PlaceHolder { get; set; }
 
     /// <summary>
-    /// 获得/设置 文本框 Enter 键回调委托方法 默认为 null
+    /// Gets or sets the callback method for Enter key press, default is null
     /// </summary>
     [Parameter]
     public Func<TValue, Task>? OnEnterAsync { get; set; }
 
     /// <summary>
-    /// 获得/设置 文本框 Esc 键回调委托方法 默认为 null
+    /// Gets or sets the callback method for Esc key press, default is null
     /// </summary>
     [Parameter]
     public Func<TValue, Task>? OnEscAsync { get; set; }
 
     /// <summary>
-    /// 获得/设置 按钮颜色
+    /// Gets or sets the button color
     /// </summary>
     [Parameter]
     public Color Color { get; set; } = Color.None;
 
     /// <summary>
-    /// 获得/设置 格式化字符串
+    /// Gets or sets the formatter function
     /// </summary>
     [Parameter]
     public Func<TValue?, string>? Formatter { get; set; }
 
     /// <summary>
-    /// 获得/设置 格式化字符串 如时间类型设置 yyyy-MM-dd
+    /// Gets or sets the format string, e.g., "yyyy-MM-dd" for date types
     /// </summary>
     [Parameter]
     public string? FormatString { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否自动获取焦点 默认 false 不自动获取焦点
+    /// Gets or sets whether to automatically focus, default is false
     /// </summary>
     [Parameter]
     public bool IsAutoFocus { get; set; }
 
     /// <summary>
-    /// 获得/设置 获得焦点后自动选择输入框内所有字符串 默认 false 未启用
+    /// Gets or sets whether to automatically select all text on focus, default is false
     /// </summary>
     [Parameter]
     public bool IsSelectAllTextOnFocus { get; set; }
 
     /// <summary>
-    /// 获得/设置 Enter 键自动选择输入框内所有字符串 默认 false 未启用
+    /// Gets or sets whether to automatically select all text on Enter key press, default is false
     /// </summary>
     [Parameter]
     public bool IsSelectAllTextOnEnter { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否自动修剪空白 默认 false 未启用
+    /// Gets or sets whether to automatically trim whitespace, default is false
     /// </summary>
     [Parameter]
     public bool IsTrim { get; set; }
 
     /// <summary>
-    /// 获得/设置 失去焦点回调方法 默认 null
+    /// Gets or sets the callback method for blur event, default is null
     /// </summary>
     [Parameter]
     public Func<TValue, Task>? OnBlurAsync { get; set; }
@@ -94,24 +94,24 @@ public abstract class BootstrapInputBase<TValue> : ValidateBase<TValue>
     private Modal? Modal { get; set; }
 
     /// <summary>
-    /// 获得 input 组件类型 默认 text
+    /// Gets the input type, default is "text"
     /// </summary>
     protected string Type { get; set; } = "text";
 
     /// <summary>
-    /// 自动获得焦点方法
+    /// Method to focus the element
     /// </summary>
     /// <returns></returns>
     public async Task FocusAsync() => await FocusElement.FocusAsync();
 
     /// <summary>
-    /// 全选文字
+    /// Method to select all text
     /// </summary>
     /// <returns></returns>
     public async ValueTask SelectAllTextAsync() => await InvokeVoidAsync("select", Id);
 
     /// <summary>
-    /// 获得/设置 是否不注册 js 脚本处理 Enter/ESC 键盘处理函数 默认 false
+    /// Gets or sets whether to skip JS script registration for Enter/Esc key handling, default is false
     /// </summary>
     protected bool SkipRegisterEnterEscJSInvoke { get; set; }
 
@@ -173,12 +173,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     }
 
     /// <summary>
-    /// 获得输入框 Id
+    /// Gets the input element Id
     /// </summary>
     protected virtual string? GetInputId() => Id;
 
     /// <summary>
-    /// 数值格式化委托方法
+    /// Value formatting delegate method
     /// </summary>
     /// <param name="value"></param>
     /// <returns></returns>
@@ -198,7 +198,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     protected override bool TryParseValueFromString(string value, [MaybeNullWhen(false)] out TValue result, out string? validationErrorMessage) => base.TryParseValueFromString(IsTrim ? value.Trim() : value, out result, out validationErrorMessage);
 
     /// <summary>
-    /// OnBlur 方法
+    /// OnBlur method
     /// </summary>
     protected virtual async Task OnBlur()
     {
@@ -209,7 +209,7 @@ protected virtual async Task OnBlur()
     }
 
     /// <summary>
-    /// 客户端 EnterCallback 回调方法
+    /// Client-side EnterCallback method
     /// </summary>
     /// <returns></returns>
     [JSInvokable]
@@ -223,7 +223,7 @@ public async Task EnterCallback(string val)
     }
 
     /// <summary>
-    /// 客户端 EscCallback 回调方法
+    /// Client-side EscCallback method
     /// </summary>
     /// <returns></returns>
     [JSInvokable]

src/BootstrapBlazor/Components/Textarea/Textarea.razor.cs

@@ -6,42 +6,42 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// Textarea 组件
+/// Textarea component
 /// </summary>
 public partial class Textarea
 {
     /// <summary>
-    /// 滚动到顶部
+    /// Scroll to the top
     /// </summary>
     /// <returns></returns>
     public Task ScrollToTop() => InvokeVoidAsync("execute", Id, "toTop");
 
     /// <summary>
-    /// 滚动到数值
+    /// Scroll to a specific value
     /// </summary>
     /// <returns></returns>
     public Task ScrollTo(int value) => InvokeVoidAsync("execute", Id, "to", value);
 
     /// <summary>
-    /// 滚动到底部
+    /// Scroll to the bottom
     /// </summary>
     /// <returns></returns>
     public Task ScrollToBottom() => InvokeVoidAsync("execute", Id, "toBottom");
 
     /// <summary>
-    /// 获得/设置 是否自动滚屏 默认 false
+    /// Gets or sets whether auto-scroll is enabled. Default is false.
     /// </summary>
     [Parameter]
     public bool IsAutoScroll { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否使用 Shift + Enter 代替原回车按键行为 默认为 false
+    /// Gets or sets whether Shift + Enter replaces the default Enter key behavior. Default is false.
     /// </summary>
     [Parameter]
     public bool UseShiftEnter { get; set; }
 
     /// <summary>
-    /// 获得 客户端是否自动滚屏标识
+    /// Gets the client-side auto-scroll identifier.
     /// </summary>
     private string? AutoScrollString => IsAutoScroll ? "auto" : null;