Refactor button event handlers to always use onPress instead of onClick

app/components/FormWithConfirm.tsx

@@ -90,7 +90,6 @@ export function FormWithConfirm({
 			</SendouDialog>
 			{React.cloneElement(children, {
 				// @ts-expect-error broke with @types/react upgrade. TODO: figure out narrower type than React.ReactNode
-				onClick: openDialog, // TODO: when SendouButton has overtaken Button, this line can be removed
 				onPress: openDialog,
 				type: "button",
 			})}

app/components/elements/Button.tsx

@@ -17,7 +17,8 @@ type ButtonVariant =
 	| "minimal-success"
 	| "minimal-destructive";
 
-export interface SendouButtonProps extends ReactAriaButtonProps {
+export interface SendouButtonProps
+	extends Omit<ReactAriaButtonProps, "onClick"> {
 	variant?: ButtonVariant;
 	size?: "miniscule" | "small" | "medium" | "big";
 	icon?: JSX.Element;

app/features/admin/routes/admin.tsx

@@ -85,7 +85,7 @@ function FriendCodeLookUp() {
 				<SubmitButton
 					state={fetcher.state}
 					icon={<SearchIcon />}
-					onClick={() => setSearchParams({ friendCode })}
+					onPress={() => setSearchParams({ friendCode })}
 				>
 					Search
 				</SubmitButton>

app/features/calendar/components/FiltersDialog.tsx

@@ -26,7 +26,7 @@ export function FiltersDialog({ filters }: { filters: CalendarFilters }) {
 			<SendouButton
 				size="small"
 				icon={<FilterFilledIcon />}
-				onClick={() => setIsOpen(true)}
+				onPress={() => setIsOpen(true)}
 				data-testid="filter-events-button"
 			>
 				{t("calendar:filter.button")}

app/features/calendar/routes/calendar.tsx

@@ -318,7 +318,7 @@ function ClockHeader({
 				{hiddenEventsCount > 0 ? (
 					<SendouButton
 						icon={hiddenShown ? <EyeIcon /> : <EyeSlashIcon />}
-						onClick={onToggleHidden}
+						onPress={onToggleHidden}
 						variant="minimal"
 						className={styles.hiddenEventsButton}
 						data-testid="hidden-events-button"

app/features/sendouq-match/routes/q.match.$id.tsx

@@ -1292,7 +1292,7 @@ function MapListMap({
 											size="small"
 											icon={<CrossIcon />}
 											variant="minimal-destructive"
-											onClick={() => {
+											onPress={() => {
 												const userId = user!.id;
 												const groupMatchMapId = map.id;
 

app/features/tournament-bracket/components/Bracket/Swiss.tsx

@@ -104,7 +104,7 @@ export function SwissBracket({
 						{groups.map((g) => (
 							<SendouButton
 								key={g.groupId}
-								onClick={() => setSelectedGroupId(g.groupId)}
+								onPress={() => setSelectedGroupId(g.groupId)}
 								className={clsx(
 									"tournament-bracket__bracket-nav__link tournament-bracket__bracket-nav__link__big",
 									{

app/features/tournament-bracket/components/MatchActions.tsx

@@ -391,7 +391,7 @@ function EditScoreForm({
 				<SendouButton
 					variant="destructive"
 					size="small"
-					onClick={() => setEditing(false)}
+					onPress={() => setEditing(false)}
 				>
 					Cancel
 				</SendouButton>
@@ -406,7 +406,7 @@ function EditScoreForm({
 				variant="outlined"
 				size="small"
 				className="mx-auto"
-				onClick={() => setEditing(true)}
+				onPress={() => setEditing(true)}
 				data-testid="revise-button"
 			>
 				Edit

app/features/tournament-bracket/components/OrganizerMatchMapListDialog.tsx

@@ -106,7 +106,7 @@ export function OrganizerMatchMapListDialog({
 				variant="outlined"
 				size="small"
 				icon={<MapIcon />}
-				onClick={() => setIsOpen(true)}
+				onPress={() => setIsOpen(true)}
 			>
 				Show maplist
 			</SendouButton>

app/features/tournament-bracket/components/TeamRosterInputs.tsx

@@ -493,7 +493,7 @@ function RosterFormWithButtons({
 			<div className="tournament-bracket__roster-buttons__container">
 				<SendouButton
 					size="small"
-					onClick={() => setEditingRoster(true)}
+					onPress={() => setEditingRoster(true)}
 					className="tournament-bracket__edit-roster-button"
 					variant="minimal"
 					data-testid="edit-active-roster-button"
@@ -528,7 +528,7 @@ function RosterFormWithButtons({
 				<SendouButton
 					size="small"
 					variant="destructive"
-					onClick={() => {
+					onPress={() => {
 						setEditingRoster(false);
 					}}
 				>

app/features/tournament/routes/to.$id.register.tsx

@@ -784,7 +784,7 @@ function TeamInfo({
 											<SendouButton
 												variant="minimal"
 												size="small"
-												onClick={() => setUploadedAvatar(null)}
+												onPress={() => setUploadedAvatar(null)}
 											>
 												{t("common:actions.edit")}
 											</SendouButton>
@@ -841,7 +841,7 @@ function TeamInfo({
 					<SendouButton
 						data-testid="save-team-button"
 						isDisabled={submitButtonDisabled()}
-						onClick={handleSubmit}
+						onPress={handleSubmit}
 					>
 						{t("common:actions.save")}
 					</SendouButton>
@@ -1020,7 +1020,7 @@ function FillRoster({
 						<div>
 							<SendouButton
 								size="small"
-								onClick={() => copyToClipboard(inviteLink)}
+								onPress={() => copyToClipboard(inviteLink)}
 								variant="outlined"
 							>
 								{t("common:actions.copyToClipboard")}
@@ -1167,7 +1167,7 @@ function DeleteMember({ members }: { members: TournamentDataTeam["members"] }) {
 			<SendouButton
 				size="small"
 				variant="minimal-destructive"
-				onClick={() => setExpanded(true)}
+				onPress={() => setExpanded(true)}
 			>
 				{t("tournament:pre.roster.delete.button")}
 			</SendouButton>