ensure radios have different names (#6249)

* ensure radios have different names

* add changeset

* reinstate demo

* fix type

* fix ts error

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/pretty-doodles-work.md

@@ -0,0 +1,7 @@
+---
+"@gradio/radio": patch
+"@gradio/tootils": patch
+"gradio": patch
+---
+
+fix:ensure radios have different names

js/radio/Index.svelte

@@ -16,20 +16,21 @@
 		select: SelectData;
 		input: never;
 	}>;
+
 	export let label = gradio.i18n("radio.radio");
 	export let info: string | undefined = undefined;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: string | number | null = null;
+	export let value: string | null = null;
 	export let value_is_output = false;
-	export let choices: [string, number][] = [];
-	export let show_label: boolean;
+	export let choices: [string, string | number][] = [];
+	export let show_label = true;
 	export let container = false;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
-	export let interactive: boolean;
+	export let interactive = true;
 
 	function handle_change(): void {
 		gradio.dispatch("change");
@@ -64,14 +65,14 @@
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 
 	<div class="wrap">
-		{#each choices as choice, i (i)}
+		{#each choices as [display_value, internal_value], i (i)}
 			<BaseRadio
-				display_value={choice[0]}
-				internal_value={choice[1]}
+				{display_value}
+				{internal_value}
 				bind:selected={value}
 				{disabled}
 				on:input={() =>
-					gradio.dispatch("select", { value: choice[1], index: i })}
+					gradio.dispatch("select", { value: internal_value, index: i })}
 			/>
 		{/each}
 	</div>

js/radio/Radio.test.ts

@@ -23,16 +23,13 @@ describe("Radio", () => {
 		["dog", "dog"],
 		["cat", "cat"],
 		["turtle", "turtle"]
-	];
+	] as [string, string][];
 
 	test("renders provided value", async () => {
 		const { getAllByRole, getByTestId } = await render(Radio, {
-			show_label: true,
-			loading_status,
 			choices: choices,
 			value: "cat",
-			label: "Radio",
-			interactive: true
+			label: "Radio"
 		});
 
 		assert.equal(
@@ -52,12 +49,9 @@ describe("Radio", () => {
 
 	test("should update the value when a radio is clicked", async () => {
 		const { getByDisplayValue, getByTestId } = await render(Radio, {
-			show_label: true,
-			loading_status,
 			choices: choices,
 			value: "cat",
-			label: "Radio",
-			interactive: true
+			label: "Radio"
 		});
 
 		await event.click(getByDisplayValue("dog"));
@@ -79,4 +73,29 @@ describe("Radio", () => {
 			true
 		);
 	});
+
+	test("when multiple radios are on the screen, they should not conflict", async () => {
+		const { container } = await render(Radio, {
+			choices: choices,
+			value: "cat",
+			label: "Radio"
+		});
+
+		const { getAllByLabelText } = await render(
+			Radio,
+			{
+				choices: choices,
+				value: "dog",
+				label: "Radio"
+			},
+			container
+		);
+
+		const items = getAllByLabelText("dog") as HTMLInputElement[];
+		expect([items[0].checked, items[1].checked]).toEqual([false, true]);
+
+		await event.click(items[0]);
+
+		expect([items[0].checked, items[1].checked]).toEqual([true, true]);
+	});
 });

js/radio/shared/Radio.svelte

@@ -1,9 +1,13 @@
+<script context="module">
+	let id = 0;
+</script>
+
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	export let display_value: string;
 	export let internal_value: string | number;
 	export let disabled = false;
-	export let selected: string | number | null = null;
+	export let selected: string | null = null;
 
 	const dispatch = createEventDispatcher<{ input: string | number }>();
 
@@ -13,12 +17,12 @@
 <label
 	class:disabled
 	class:selected={is_selected}
-	data-testid={`${internal_value}-radio-label`}
+	data-testid="{display_value}-radio-label"
 >
 	<input
 		{disabled}
 		type="radio"
-		name={`radio-${internal_value}`}
+		name="radio-{++id}"
 		value={internal_value}
 		on:input={() => dispatch("input", internal_value)}
 		bind:group={selected}

js/tootils/src/render.ts

@@ -46,14 +46,21 @@ export async function render<
 	X extends Record<string, any>
 >(
 	Component: ComponentType<T, Props> | { default: ComponentType<T, Props> },
-	props?: Omit<Props, "gradio">
+	props?: Omit<Props, "gradio">,
+	_container?: HTMLElement
 ): Promise<
 	RenderResult<T> & {
 		listen: typeof listen;
 		wait_for_event: typeof wait_for_event;
 	}
 > {
-	const container = document.body;
+	let container: HTMLElement;
+	if (!_container) {
+		container = document.body;
+	} else {
+		container = _container;
+	}
+
 	const target = container.appendChild(document.createElement("div"));
 
 	const ComponentConstructor: ComponentType<