radio input not working

BlazorBootstrap.Demo.Hosted/Server/Pages/_Host.cshtml

@@ -15,7 +15,6 @@
     <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
     <link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
@@ -50,15 +49,16 @@
     <script src="_framework/blazor.webassembly.js" autostart="false" asp-append-version="true"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
-    <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/custom-class/prism-custom-class.min.js" integrity="sha512-7uKPAecn+SrAT5xVovlVdFCkXTM9LzNzjaK3yzb3ht22SwjnUTjWHNAp7dq3OPFmPb+DCAFjWnDT8Qrf256GeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script>
         Blazor.start();
     </script>

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor

@@ -1,9 +1,13 @@
 <p>Would you like to receive notifications?</p>
-<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
-<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
+<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isYesOn" />
+<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isNoOn" />
 
+<div class="mt-3">
+    <div>IsYesOn: @isYesOn</div>
+    <div>IsNoOn: @isNoOn</div>
+</div>
 @code
 {
-    private bool isChecked;
-    private bool isChecked2 = true;
+    private bool isYesOn;
+    private bool isNoOn = true;
 }

BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html

@@ -10,7 +10,6 @@
     <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
     <link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
@@ -50,15 +49,16 @@
     <script src="_framework/blazor.webassembly.js" autostart="false"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
     <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
-    <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/custom-class/prism-custom-class.min.js" integrity="sha512-7uKPAecn+SrAT5xVovlVdFCkXTM9LzNzjaK3yzb3ht22SwjnUTjWHNAp7dq3OPFmPb+DCAFjWnDT8Qrf256GeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script>
         Blazor.start();
     </script>

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))
     {

blazorbootstrap/Components/Form/RadioInput/RadioInput.razor.cs

@@ -6,19 +6,43 @@ public partial class RadioInput : BlazorBootstrapComponentBase
 
     private FieldIdentifier fieldIdentifier;
 
+    private DotNetObjectReference<RadioInput> 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<string, object>();
 
         fieldIdentifier = FieldIdentifier.Create(ValueExpression);
 
         base.OnInitialized();
     }
 
+    [JSInvokable]
+    public async Task OnChangeJS(bool newValue)
+    {
+        Value = newValue;
+
+        await ValueChanged.InvokeAsync(Value);
+
+        EditContext?.NotifyFieldChanged(fieldIdentifier);
+    }
+
     /// <summary>
     /// Disables number input.
     /// </summary>
@@ -29,17 +53,6 @@ protected override void OnInitialized()
     /// </summary>
     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

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);