The checkbox in repositories filter of dashboard will always be empty after click

[yp05327]

Description

the checkbox of private and archived will always be empty after click.
if you refresh the page, it will show rightly.

Im trying to fix this.

after click, title is same but the checkbox is empty

Gitea Version

1.19.0+dev-442-g3ae78bc0a

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

try.gitea.io
gitea.com

Database

None

[wxiaoguang]

The problem is mixing Vue and Fomantic UI together improperly.

In history, the code was not well but it just worked.

After upgrading to Vue3, the template is splitted into a <template> tag, then the Fomantic UI JS doesn't work on these checkbox elements correctly anymore.

[yp05327]

According to my test, these checkbox elements will be updated by Fomantic UI's Function correctly:

gitea/web_src/js/components/DashboardRepoList.js

Lines 159 to 190 in d5fa2e7

	setCheckboxes() {
	switch (this.archivedFilter) {
	case 'unarchived':
	$('#archivedFilterCheckbox').checkbox('set unchecked');
	break;
	case 'archived':
	$('#archivedFilterCheckbox').checkbox('set checked');
	break;
	case 'both':
	$('#archivedFilterCheckbox').checkbox('set indeterminate');
	break;
	default:
	this.archivedFilter = 'unarchived';
	$('#archivedFilterCheckbox').checkbox('set unchecked');
	break;
	}
	switch (this.privateFilter) {
	case 'public':
	$('#privateFilterCheckbox').checkbox('set unchecked');
	break;
	case 'private':
	$('#privateFilterCheckbox').checkbox('set checked');
	break;
	case 'both':
	$('#privateFilterCheckbox').checkbox('set indeterminate');
	break;
	default:
	this.privateFilter = 'both';
	$('#privateFilterCheckbox').checkbox('set indeterminate');
	break;
	}
	},

But after get the response of searchRepo, they will be updated by something. Maybe by Vue?
Because v-if is used in template file to set the title:

gitea/templates/user/dashboard/repolist.tmpl

Lines 49 to 98 in d5fa2e7

	<div class="item">
	<a @click="toggleArchivedFilter()">
	<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
	<input type="checkbox">
	<label>
	{{svg "octicon-archive" 16 "mr-2"}}
	{{.locale.Tr "home.show_archived"}}
	</label>
	</div>
	<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
	<input type="checkbox">
	<label>
	{{svg "octicon-archive" 16 "mr-2"}}
	{{.locale.Tr "home.show_archived"}}
	</label>
	</div>
	<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.locale.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
	<input type="checkbox">
	<label>
	{{svg "octicon-archive" 16 "mr-2"}}
	{{.locale.Tr "home.show_archived"}}
	</label>
	</div>
	</a>
	</div>
	<div class="item">
	<a @click="togglePrivateFilter()">
	<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
	<input type="checkbox">
	<label>
	{{svg "octicon-lock" 16 "mr-2"}}
	{{.locale.Tr "home.show_private"}}
	</label>
	</div>
	<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
	<input type="checkbox">
	<label>
	{{svg "octicon-lock" 16 "mr-2"}}
	{{.locale.Tr "home.show_private"}}
	</label>
	</div>
	<div class="ui checkbox" id="privateFilterCheckbox" title="{{.locale.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
	<input type="checkbox">
	<label>
	{{svg "octicon-lock" 16 "mr-2"}}
	{{.locale.Tr "home.show_private"}}
	</label>
	</div>
	</a>
	</div>

I tried to remove v-if so that the checkbox worked, but the title was missing.
Are there any other ways to fix this?

[wxiaoguang]

The only correct way:

Do not mix them together.