Skip to content

Commit 7199921

Browse files
gvreddy04gvreddy04
committed
RadioInput uses wrong attribute #1015 
1 parent 91d611c commit 7199921

File tree

6 files changed

+66
-20
lines changed

6 files changed

+66
-20
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<!-- CSS only -->
1616
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
1717
<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" />
18-
<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" />
1918
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
2019
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
2120
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
@@ -50,15 +49,16 @@
5049
<script src="_framework/blazor.webassembly.js" autostart="false" asp-append-version="true"></script>
5150
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
5251
<!-- Add chart.js reference if chart components are used in your application. -->
53-
<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>
52+
<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>
5453
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
5554
<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>
5655
<!-- Add sortable.js reference if SortableList component is used in your application. -->
5756
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
5857
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js" asp-append-version="true"></script>
59-
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
6058
<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>
6159
<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>
60+
<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>
61+
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
6262
<script>
6363
Blazor.start();
6464
</script>

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

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
33
<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
44

5+
<div class="mt-3">
6+
<div>isChecked: @isChecked</div>
7+
<div>isChecked2: @isChecked2</div>
8+
</div>
59
@code
610
{
711
private bool isChecked;

‎BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<!-- CSS only -->
1111
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
1212
<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" />
13-
<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" />
1413
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" asp-append-version="true" />
1514
<link href="_content/BlazorBootstrap.Demo.RCL/css/blazorbootstrap.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
1615
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
@@ -50,15 +49,16 @@
5049
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
5150
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
5251
<!-- Add chart.js reference if chart components are used in your application. -->
53-
<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>
52+
<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>
5453
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
5554
<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>
5655
<!-- Add sortable.js reference if SortableList component is used in your application. -->
5756
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
5857
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
59-
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
6058
<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>
6159
<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>
60+
<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>
61+
<script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
6262
<script>
6363
Blazor.start();
6464
</script>

‎blazorbootstrap/Components/Form/RadioInput/RadioInput.razor

+2-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
name="@Name"
99
class="@ClassNames"
1010
style="@StyleNames"
11-
value="@Value"
11+
checked="@Value"
1212
disabled="@Disabled"
13-
@attributes="@AdditionalAttributes"
14-
@onchange="OnChange" />
13+
@attributes="@AdditionalAttributes" />
1514

1615
@if (!string.IsNullOrWhiteSpace(Label))
1716
{

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

+24-11
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,43 @@ public partial class RadioInput : BlazorBootstrapComponentBase
66

77
private FieldIdentifier fieldIdentifier;
88

9+
private DotNetObjectReference<RadioInput> objRef = default!;
10+
911
#endregion
1012

1113
#region Methods
1214

15+
protected override async Task OnAfterRenderAsync(bool firstRender)
16+
{
17+
if (firstRender)
18+
{
19+
await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.radioInput.initialize", Id, Name, objRef);
20+
}
21+
22+
await base.OnAfterRenderAsync(firstRender);
23+
}
24+
1325
protected override void OnInitialized()
1426
{
27+
objRef ??= DotNetObjectReference.Create(this);
28+
1529
AdditionalAttributes ??= new Dictionary<string, object>();
1630

1731
fieldIdentifier = FieldIdentifier.Create(ValueExpression);
1832

1933
base.OnInitialized();
2034
}
2135

36+
[JSInvokable]
37+
public async Task OnChangeJS(bool newValue)
38+
{
39+
Value = newValue;
40+
41+
await ValueChanged.InvokeAsync(Value);
42+
43+
EditContext?.NotifyFieldChanged(fieldIdentifier);
44+
}
45+
2246
/// <summary>
2347
/// Disables number input.
2448
/// </summary>
@@ -29,17 +53,6 @@ protected override void OnInitialized()
2953
/// </summary>
3054
public void Enable() => Disabled = false;
3155

32-
private async Task OnChange(ChangeEventArgs e)
33-
{
34-
var oldValue = Value;
35-
36-
var newValue = string.Equals(e.Value?.ToString(), "on");
37-
38-
await ValueChanged.InvokeAsync(newValue);
39-
40-
EditContext?.NotifyFieldChanged(fieldIdentifier);
41-
}
42-
4356
#endregion
4457

4558
#region Properties, Indexers

‎blazorbootstrap/wwwroot/blazor.bootstrap.js

+30
Original file line numberDiff line numberDiff line change
@@ -724,6 +724,36 @@ window.blazorBootstrap = {
724724
bootstrap?.Offcanvas?.getOrCreateInstance(offcanvasEl)?.dispose();
725725
}
726726
},
727+
radioInput: {
728+
isChanging: false,
729+
initialize: (elementId, elementName, dotNetHelper) => {
730+
let radioEl = document.getElementById(elementId);
731+
if (radioEl == null)
732+
return;
733+
734+
radioEl.addEventListener('change', function () {
735+
try {
736+
dotNetHelper.invokeMethodAsync('OnChangeJS', radioEl.checked);
737+
738+
let radioEls = document.getElementsByName(elementName) ?? [];
739+
radioEls.forEach((el, index) => {
740+
741+
if (window.blazorBootstrap.radioInput.isChanging)
742+
return;
743+
744+
if (el.id !== radioEl.id) {
745+
window.blazorBootstrap.radioInput.isChanging = true;
746+
el.checked = false;
747+
el.dispatchEvent(new Event('change'));
748+
}
749+
});
750+
}
751+
finally {
752+
window.blazorBootstrap.radioInput.isChanging = false;
753+
}
754+
});
755+
}
756+
},
727757
rangeInput: {
728758
initialize: (elementId, dotNetHelper) => {
729759
let rangeEl = document.getElementById(elementId);

0 commit comments

Comments
 (0)