From 6137b21a2b935ad0d7ff38e90bb9fb4f8ff9855b Mon Sep 17 00:00:00 2001 From: msynk Date: Fri, 19 Jun 2026 09:52:40 +0330 Subject: [PATCH] add missing implementations of Immediate in BitPhoneInput #12488 --- .../PhoneInput/BitPhoneInput.razor.cs | 15 +++++- .../Extras/PhoneInput/BitPhoneInputDemo.razor | 40 ++++++++++++-- .../PhoneInput/BitPhoneInputDemo.razor.cs | 54 ++++++++++++++++--- 3 files changed, 98 insertions(+), 11 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor.cs index baa5dc51a6..bf76b586ea 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.razor.cs @@ -8,6 +8,8 @@ namespace Bit.BlazorUI; /// public partial class BitPhoneInput : BitInputBase { + private readonly BitInputRateLimiter _rateLimiter = new(); + private bool _isOpen; private bool _hasFocus; private int _activeIndex = -1; @@ -64,6 +66,11 @@ public partial class BitPhoneInput : BitInputBase [Parameter, TwoWayBound] public BitCountry? Country { get; set; } + /// + /// The debounce time in milliseconds for the number input (applied when Immediate is enabled). + /// + [Parameter] public int DebounceTime { get; set; } + /// /// The default selected country to be initially used when the Country parameter is not set. /// @@ -141,6 +148,11 @@ public partial class BitPhoneInput : BitInputBase /// [Parameter] public BitPhoneInputClassStyles? Styles { get; set; } + /// + /// The throttle time in milliseconds for the number input (applied when Immediate is enabled). + /// + [Parameter] public int ThrottleTime { get; set; } + /// @@ -478,7 +490,8 @@ private async Task HandleOnNumberInput(ChangeEventArgs e) if (Immediate is false) return; - await SetCurrentValueAsStringAsync(e.Value?.ToString()); + await _rateLimiter.Run(e, DebounceTime, ThrottleTime, async args => + await InvokeAsync(async () => await HandleOnNumberChange(args))); } private void HandleOnInputFocusIn() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor index b38363e8c4..f848ef0423 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor @@ -72,7 +72,39 @@ - + +
+ By default the value updates on the change event (when the input loses focus). Enable the + Immediate parameter to update the value on every keystroke (the 'oninput' event). To + rate-limit how often the value updates while typing, combine it with DebounceTime (waits + until typing pauses) or ThrottleTime (updates at most once per interval). +
+
+
Immediate:
+ +
Value: [@immediateNumber]
+
+
Immediate + DebounceTime (500ms):
+ +
Value: [@debouncedNumber]
+
+
Immediate + ThrottleTime (500ms):
+ +
Value: [@throttledNumber]
+ + +
Disabled:

@@ -82,7 +114,7 @@ - +
Use the OnCountryChange callback to react to the selected country changes.

Selected country: @changedCountry?.Name - +
Customize the appearance of the BitPhoneInput using Style, Class, Styles, and Classes.

 - +
Use BitPhoneInput in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs index d9810c3c8a..42f16954fd 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PhoneInput/BitPhoneInputDemo.razor.cs @@ -50,6 +50,13 @@ public partial class BitPhoneInputDemo Href = "#country", }, new() + { + Name = "DebounceTime", + Type = "int", + DefaultValue = "0", + Description = "The debounce time in milliseconds for the number input (applied when Immediate is enabled).", + }, + new() { Name = "DropDirection", Type = "BitDropDirection", @@ -149,6 +156,13 @@ public partial class BitPhoneInputDemo LinkType = LinkType.Link, Href = "#class-styles", }, + new() + { + Name = "ThrottleTime", + Type = "int", + DefaultValue = "0", + Description = "The throttle time in milliseconds for the number input (applied when Immediate is enabled).", + }, ]; private readonly List componentSubClasses = @@ -214,6 +228,9 @@ public partial class BitPhoneInputDemo private string? bindingNumber; private BitCountry? bindingCountry; private BitCountry? changedCountry; + private string? immediateNumber; + private string? debouncedNumber; + private string? throttledNumber; private readonly List customCountries = [ BitCountries.UnitedStates, @@ -267,30 +284,55 @@ public partial class BitPhoneInputDemo "; private readonly string example7RazorCode = @" + +
Value: [@immediateNumber]
+ + +
Value: [@debouncedNumber]
+ + +
Value: [@throttledNumber]
"; + private readonly string example7CsharpCode = @" +private string? immediateNumber; +private string? debouncedNumber; +private string? throttledNumber;"; + + private readonly string example8RazorCode = @" "; - private readonly string example7CsharpCode = @""; + private readonly string example8CsharpCode = @""; - private readonly string example8RazorCode = @" + private readonly string example9RazorCode = @" changedCountry = c"" Placeholder=""Enter your number"" />
Selected country: @changedCountry?.Name
"; - private readonly string example8CsharpCode = @" + private readonly string example9CsharpCode = @" private BitCountry? changedCountry;"; - private readonly string example9RazorCode = @" + private readonly string example10RazorCode = @" "; - private readonly string example9CsharpCode = @""; + private readonly string example10CsharpCode = @""; - private readonly string example10RazorCode = @" + private readonly string example11RazorCode = @"
";