Skip to content

Commit 5baaf65

Browse files
hawkticehursthawkticehurst
authoredOct 11, 2023
Update component gallery examples to fix radio bug (microsoft#178)
Demonstrates a work around fix to a known bug with the vscode radio component.
1 parent 6131aa6 commit 5baaf65

File tree

2 files changed

+32
-24
lines changed

2 files changed

+32
-24
lines changed
 

‎default/component-gallery/src/panels/demos/radio-group.ts

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
1+
// Note: There is a known bug with vscode-radio component selection on first interaction. A workaround fix is
2+
// to make sure that all radio components have a unique `value` attribute applied as demonstrated below.
3+
// Read more about the issue here: https://github.com/microsoft/vscode-webview-ui-toolkit/issues/476
4+
15
export const radioGroupDemo = /*html*/ `
26
<section class="component-container">
37
<h2>Radio Group + Radio</h2>
48
<section class="component-example">
59
<p>Default Radio Group</p>
610
<vscode-radio-group>
711
<label slot="label">Group Label</label>
8-
<vscode-radio>Label</vscode-radio>
9-
<vscode-radio>Label</vscode-radio>
10-
<vscode-radio>Label</vscode-radio>
12+
<vscode-radio value="value-1">Label</vscode-radio>
13+
<vscode-radio value="value-2">Label</vscode-radio>
14+
<vscode-radio value="value-3">Label</vscode-radio>
1115
</vscode-radio-group>
1216
</section>
1317
<section class="component-example">
1418
<p>With Disabled</p>
1519
<vscode-radio-group disabled>
1620
<label slot="label">Group Label</label>
17-
<vscode-radio>Radio Label</vscode-radio>
18-
<vscode-radio>Radio Label</vscode-radio>
19-
<vscode-radio>Radio Label</vscode-radio>
21+
<vscode-radio value="value-1">Radio Label</vscode-radio>
22+
<vscode-radio value="value-2">Radio Label</vscode-radio>
23+
<vscode-radio value="value-3">Radio Label</vscode-radio>
2024
</vscode-radio-group>
2125
</section>
2226
<section class="component-example">
2327
<p>With Readonly</p>
2428
<vscode-radio-group readonly>
2529
<label slot="label">Group Label</label>
26-
<vscode-radio>Radio Label</vscode-radio>
27-
<vscode-radio>Radio Label</vscode-radio>
28-
<vscode-radio>Radio Label</vscode-radio>
30+
<vscode-radio value="value-1">Radio Label</vscode-radio>
31+
<vscode-radio value="value-2">Radio Label</vscode-radio>
32+
<vscode-radio value="value-3">Radio Label</vscode-radio>
2933
</vscode-radio-group>
3034
</section>
3135
<section class="component-example">
3236
<p>With Vertical Orientation</p>
3337
<vscode-radio-group orientation="vertical">
3438
<label slot="label">Group Label</label>
35-
<vscode-radio>Radio Label</vscode-radio>
36-
<vscode-radio>Radio Label</vscode-radio>
37-
<vscode-radio>Radio Label</vscode-radio>
39+
<vscode-radio value="value-1">Radio Label</vscode-radio>
40+
<vscode-radio value="value-2">Radio Label</vscode-radio>
41+
<vscode-radio value="value-3">Radio Label</vscode-radio>
3842
</vscode-radio-group>
3943
</section>
4044
</section>

‎frameworks/component-gallery-react/webview-ui/src/demos/RadioGroupDemo.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { VSCodeRadio, VSCodeRadioGroup } from "@vscode/webview-ui-toolkit/react";
22

3+
// Note: There is a known bug with VSCodeRadio component selection on first interaction. A workaround fix is
4+
// to make sure that all radio components have a unique `value` attribute applied as demonstrated below.
5+
// Read more about the issue here: https://github.com/microsoft/vscode-webview-ui-toolkit/issues/476
6+
37
export function RadioGroupDemo() {
48
return (
59
<section className="component-container">
@@ -8,36 +12,36 @@ export function RadioGroupDemo() {
812
<p>Default Radio Group</p>
913
<VSCodeRadioGroup>
1014
<label slot="label">Group Label</label>
11-
<VSCodeRadio>Label</VSCodeRadio>
12-
<VSCodeRadio>Label</VSCodeRadio>
13-
<VSCodeRadio>Label</VSCodeRadio>
15+
<VSCodeRadio value="value-1">Label</VSCodeRadio>
16+
<VSCodeRadio value="value-2">Label</VSCodeRadio>
17+
<VSCodeRadio value="value-3">Label</VSCodeRadio>
1418
</VSCodeRadioGroup>
1519
</section>
1620
<section className="component-example">
1721
<p>With Disabled</p>
1822
<VSCodeRadioGroup disabled>
1923
<label slot="label">Group Label</label>
20-
<VSCodeRadio>Radio Label</VSCodeRadio>
21-
<VSCodeRadio>Radio Label</VSCodeRadio>
22-
<VSCodeRadio>Radio Label</VSCodeRadio>
24+
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
25+
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
26+
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
2327
</VSCodeRadioGroup>
2428
</section>
2529
<section className="component-example">
2630
<p>With Readonly</p>
2731
<VSCodeRadioGroup readOnly>
2832
<label slot="label">Group Label</label>
29-
<VSCodeRadio>Radio Label</VSCodeRadio>
30-
<VSCodeRadio>Radio Label</VSCodeRadio>
31-
<VSCodeRadio>Radio Label</VSCodeRadio>
33+
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
34+
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
35+
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
3236
</VSCodeRadioGroup>
3337
</section>
3438
<section className="component-example">
3539
<p>With Vertical Orientation</p>
3640
<VSCodeRadioGroup orientation="vertical">
3741
<label slot="label">Group Label</label>
38-
<VSCodeRadio>Radio Label</VSCodeRadio>
39-
<VSCodeRadio>Radio Label</VSCodeRadio>
40-
<VSCodeRadio>Radio Label</VSCodeRadio>
42+
<VSCodeRadio value="value-1">Radio Label</VSCodeRadio>
43+
<VSCodeRadio value="value-2">Radio Label</VSCodeRadio>
44+
<VSCodeRadio value="value-3">Radio Label</VSCodeRadio>
4145
</VSCodeRadioGroup>
4246
</section>
4347
</section>

0 commit comments

Comments
 (0)