[Issue] Rehosting tab buttons causes gradio events not to be fired

[vladmandic]

Issue Description

this seems a conceptual problem with modernui as we're rehosting buttons instead of tabs control so tabs control looses its functionality.

for example, event should be triggered in modules/ui_sections.py:create_hires_input, line

tab_scale_to.select(fn=lambda: 0, inputs=[], outputs=[selected_scale_tab])

with standardui event triggers and server gets correct info which tab is selected.
with modernui event does not trigger so server never knows which resize method (by size or by scale) is selected.

with standardui, gradio assigns following event dynamically to all non-active tab items (which are html button elements) so it triggers on click.

with modernui, that event does not get assigned.

this is gradio template for gr.Tabs, you can see how on:click gets assigned dynamically

<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
	<div class="tab-nav scroll-hide">
		{#each tabs as t, i (t.id)}
			{#if t.id === $selected_tab}
				<button class="selected">
					{t.name}
				</button>
			{:else}
				<button
					on:click={() => {
						change_tab(t.id);
						dispatch("select", { value: t.name, index: i });
					}}
				>
					{t.name}
				</button>
			{/if}
		{/each}
	</div>
	<slot />
</div>

to properly solve this, we need to stop rehosting buttons from tabs and rehost entire tab control. not a small change.

Backend

Chrome (and derivatives)

Branch

Desktop

Version Platform Description

No response

Relevant log output

No response

Acknowledgements

• I have read the above and searched for existing issues