diff --git a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml index 0ae52e044..adc8ef3b2 100644 --- a/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml +++ b/BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml @@ -15,7 +15,6 @@ - @@ -50,15 +49,16 @@ - + - + + diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor index 1cf04d678..4ae480b3b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor @@ -1,9 +1,13 @@ 

Would you like to receive notifications?

- - + + +
+
IsYesOn: @isYesOn
+
IsNoOn: @isNoOn
+
@code { - private bool isChecked; - private bool isChecked2 = true; + private bool isYesOn; + private bool isNoOn = true; } diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html index 336dbd219..dbbab8bcd 100644 --- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html +++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html @@ -10,7 +10,6 @@ - @@ -50,15 +49,16 @@ - + - + + diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor index df18b0ba7..8560d0872 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor @@ -8,10 +8,9 @@ name="@Name" class="@ClassNames" style="@StyleNames" - value="@Value" + checked="@Value" disabled="@Disabled" - @attributes="@AdditionalAttributes" - @onchange="OnChange" /> + @attributes="@AdditionalAttributes" /> @if (!string.IsNullOrWhiteSpace(Label)) { diff --git a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs index a5fc7f966..b0dffa725 100644 --- a/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs +++ b/blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs @@ -6,12 +6,26 @@ public partial class RadioInput : BlazorBootstrapComponentBase private FieldIdentifier fieldIdentifier; + private DotNetObjectReference objRef = default!; + #endregion #region Methods + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.radioInput.initialize", Id, Name, objRef); + } + + await base.OnAfterRenderAsync(firstRender); + } + protected override void OnInitialized() { + objRef ??= DotNetObjectReference.Create(this); + AdditionalAttributes ??= new Dictionary(); fieldIdentifier = FieldIdentifier.Create(ValueExpression); @@ -19,6 +33,16 @@ protected override void OnInitialized() base.OnInitialized(); } + [JSInvokable] + public async Task OnChangeJS(bool newValue) + { + Value = newValue; + + await ValueChanged.InvokeAsync(Value); + + EditContext?.NotifyFieldChanged(fieldIdentifier); + } + /// /// Disables number input. /// @@ -29,17 +53,6 @@ protected override void OnInitialized() /// public void Enable() => Disabled = false; - private async Task OnChange(ChangeEventArgs e) - { - var oldValue = Value; - - var newValue = string.Equals(e.Value?.ToString(), "on"); - - await ValueChanged.InvokeAsync(newValue); - - EditContext?.NotifyFieldChanged(fieldIdentifier); - } - #endregion #region Properties, Indexers diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js index 94922a648..d0a59ddc9 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js @@ -724,6 +724,36 @@ window.blazorBootstrap = { bootstrap?.Offcanvas?.getOrCreateInstance(offcanvasEl)?.dispose(); } }, + radioInput: { + isChanging: false, + initialize: (elementId, elementName, dotNetHelper) => { + let radioEl = document.getElementById(elementId); + if (radioEl == null) + return; + + radioEl.addEventListener('change', function () { + try { + dotNetHelper.invokeMethodAsync('OnChangeJS', radioEl.checked); + + let radioEls = document.getElementsByName(elementName) ?? []; + radioEls.forEach((el, index) => { + + if (window.blazorBootstrap.radioInput.isChanging) + return; + + if (el.id !== radioEl.id) { + window.blazorBootstrap.radioInput.isChanging = true; + el.checked = false; + el.dispatchEvent(new Event('change')); + } + }); + } + finally { + window.blazorBootstrap.radioInput.isChanging = false; + } + }); + } + }, rangeInput: { initialize: (elementId, dotNetHelper) => { let rangeEl = document.getElementById(elementId);