fix: remove depreacted .native modifier

src/components/15Years/15YearsButton.vue

@@ -47,7 +47,7 @@ export default {
 		onClick(e) {
 			if (this.tag === 'button' && this.$attrs.type !== 'submit') {
 				// emit a vue event and prevent native event
-				// so we don't have to write @click.native in our templates
+				// so we don't have to write @click in our templates
 				e.preventDefault();
 				this.$emit('click', e);
 			}

src/components/Checkout/BasketVerification.vue

@@ -20,7 +20,7 @@
 			<p class="tw-mb-4">
 				Once we verify your account, you can continue checking out!
 			</p>
-			<kv-button v-if="!sending" @click.native="send" data-testid="basket-verification-send-button">
+			<kv-button v-if="!sending" @click="send" data-testid="basket-verification-send-button">
 				Send verification link
 			</kv-button>
 			<kv-loading-spinner class="sending-spinner" v-else />
@@ -40,7 +40,7 @@
 			<p class="tw-mb-4">
 				After receiving the email, follow the link provided to continue checking out with your Kiva Credit.
 			</p>
-			<kv-button v-if="!sending" @click.native="send" data-testid="basket-verification-resend-button">
+			<kv-button v-if="!sending" @click="send" data-testid="basket-verification-resend-button">
 				Resend email
 			</kv-button>
 			<kv-loading-spinner class="sending-spinner" v-else />

src/components/Checkout/DonationNudge/DonationNudgeBoxes.vue

@@ -76,7 +76,7 @@
 						<div class="tw-self-center md:tw-w-full">
 							<kv-button
 								class="tw-w-14 md:tw-w-full"
-								@click.native="setCustomDonationAndClose"
+								@click="setCustomDonationAndClose"
 								id="customDonationSubmitBtn"
 								data-testid="custom-donation-submit-btn"
 							>

src/components/Checkout/KivaCreditGuestPayment.vue

@@ -78,7 +78,7 @@
 			class="tw-mb-2"
 			v-kv-track-event="['payment.continueBtn']"
 			title="Checkout using your Kiva credit"
-			@click.native.prevent="validateCreditBasket"
+			@click.prevent="validateCreditBasket"
 		>
 			<slot>Complete order</slot>
 		</kv-button>

src/components/Checkout/KivaCreditPayment.vue

@@ -5,7 +5,7 @@
 		class="tw-mb-2"
 		v-kv-track-event="['payment.continueBtn']"
 		title="Checkout using your Kiva credit"
-		@click.native.prevent="validateCreditBasket"
+		@click.prevent="validateCreditBasket"
 	>
 		<slot>Complete order</slot>
 	</kv-button>

src/components/CorporateCampaign/CampaignHero.vue

@@ -32,7 +32,7 @@
 				</p>
 				<div class="tw-flex tw-flex-wrap tw-gap-2">
 					<kv-ui-button
-						@click.native.prevent="jumpToLoans"
+						@click.prevent="jumpToLoans"
 						v-kv-track-event="[
 							'Campaign',
 							'click-hero-cta',

src/components/CorporateCampaign/CampaignJoinTeamForm.vue

@@ -41,16 +41,16 @@
 				<template #controls>
 					<div class="tw-text-center">
 						<div v-if="showForm">
-							<kv-button class="smaller" @click.native.prevent="handleJoinTeam">
+							<kv-button class="smaller" @click.prevent="handleJoinTeam">
 								Join Now
 							</kv-button>
 							<br><br>
-							<kv-button class="text-link" @click.native.prevent="handleRejectTeam">
+							<kv-button class="text-link" @click.prevent="handleRejectTeam">
 								Opt-out
 							</kv-button>
 						</div>
 						<div v-if="showSuccess || showError">
-							<kv-button class="smaller" @click.native.prevent="handleContinue">
+							<kv-button class="smaller" @click.prevent="handleContinue">
 								Continue
 							</kv-button>
 						</div>

src/components/CorporateCampaign/CampaignVerificationForm.vue

@@ -16,7 +16,7 @@
 			<div class="tw-text-center">
 				<kv-button
 					class="text-link"
-					@click.native="optOut"
+					@click="optOut"
 				>
 					No thanks, I'll opt out
 				</kv-button>

src/components/CorporateCampaign/LoanSearch/LoanSearchFilters.vue

@@ -94,15 +94,15 @@
 							v-if="isChipsCollapsable"
 							variant="secondary"
 							class="chips__toggle tw-mb-2"
-							@click.native="isChipsCollapsed = !isChipsCollapsed"
+							@click="isChipsCollapsed = !isChipsCollapsed"
 						>
 							{{ isChipsCollapsed ? `Show all ${filterChips.length} filters` : 'Hide filters' }}
 						</kv-button>
 						<span v-if="!isInitialFilters && isChipsCollapsable">|</span>
 						<kv-button
 							v-if="!isInitialFilters"
 							class="chips__toggle"
-							@click.native="handleResetFilters"
+							@click="handleResetFilters"
 						>
 							Reset all
 						</kv-button>
@@ -236,7 +236,7 @@
 			<template #controls>
 				<kv-button
 					variant="primary"
-					@click.native.prevent="applyFilters"
+					@click.prevent="applyFilters"
 				>
 					Apply Filters
 				</kv-button>

src/components/Lend/LoanSearch/LoanSearchSavedSearch.vue

@@ -43,7 +43,7 @@
 					Email me when new loans become available
 				</kv-checkbox>
 				<kv-button
-					@click.native="saveSavedSearch"
+					@click="saveSavedSearch"
 					:state="savedSearchName.length === 0 ? 'disabled' : null"
 				>
 					Create Saved Search

src/components/Lightboxes/AddToBasketInterstitial.vue

@@ -39,7 +39,7 @@
 									'Lending',
 									'Add-to-basket Interstitial',
 									'keep-exploring-button-click']"
-								@click.native.prevent="closeLightbox"
+								@click.prevent="closeLightbox"
 							>
 								Find more loans
 							</kv-button>
@@ -52,7 +52,7 @@
 									'Lending',
 									'Add-to-basket Interstitial',
 									'checkout-button-click']"
-								@click.native="closeLightbox"
+								@click="closeLightbox"
 							>
 								Checkout
 							</kv-button>

src/components/LoanCards/AdaptiveMicroLoanCard.vue

@@ -6,7 +6,7 @@
 			:retina-image-url="loan.image.retina"
 			:standard-image-url="loan.image.default"
 			:is-visitor="true"
-			@click.native="trackProfileClick"
+			@click="trackProfileClick"
 			:open-in-new-tab="true"
 			:use-default-styles="false"
 		/>

src/components/LoanCards/Buttons/LendButton2.vue

@@ -1,7 +1,7 @@
 <template>
 	<kv-button
 		v-if="showLend || showLendAgain"
-		@click.native="addToBasket"
+		@click="addToBasket"
 		:class="{ secondary: showLendAgain }"
 		v-kv-track-event="['Lending', 'Add to basket', 'lend-button-click', loanId, loanId]"
 	>

src/components/LoanCards/ExpandableLoanCard/ExpandableLoanCard.vue

@@ -55,7 +55,7 @@
 					:is-simple-lend-button="true"
 					:enable-five-dollars-notes="enableFiveDollarsNotes"
 
-					@click.native="trackInteraction({
+					@click="trackInteraction({
 						interactionType: 'addToBasket',
 						interactionElement: 'Lend25'
 					})"

src/components/LoanCards/GridLoanCard.vue

@@ -53,7 +53,7 @@
 					:is-visitor="isVisitor"
 					class="tw-mt-2 tw-w-full"
 					:class="{'tw-mb-2' : !isMatchAtRisk && !isFunded}"
-					@click.native="trackInteraction({
+					@click="trackInteraction({
 						interactionType: 'addToBasket',
 						interactionElement: 'Lend25'
 					})"

src/components/LoanCards/HoverLoanCard/DetailedLoanCard.vue

@@ -98,7 +98,7 @@
 							:amount-left="amountLeft"
 							:show-now="!enableFiveDollarsNotes"
 							:enable-five-dollars-notes="enableFiveDollarsNotes"
-							@click.native="trackInteraction({
+							@click="trackInteraction({
 								interactionType: 'addToBasket',
 								interactionElement: 'Lend25'
 							})"

src/components/LoanCards/HoverLoanCard/HoverLoanCardLarge.vue

@@ -61,7 +61,7 @@
 					:minimal-checkout-button="true"
 					:is-amount-lend-button="lessThan25"
 					:amount-left="amountLeft"
-					@click.native="trackInteraction({
+					@click="trackInteraction({
 						interactionType: 'addToBasket',
 						interactionElement: 'Lend25'
 					})"

src/components/LoanCards/ListLoanCard.vue

@@ -82,7 +82,7 @@
 						:enable-huge-amount="enableHugeAmount"
 						:is-visitor="isVisitor"
 						class="tw-mt-0 tw-w-full"
-						@click.native="trackInteraction({
+						@click="trackInteraction({
 							interactionType: 'addToBasket',
 							interactionElement: 'Lend25'
 						})"
@@ -139,7 +139,7 @@
 						:is-visitor="isVisitor"
 						class="tw-mt-0 tw-w-full"
 
-						@click.native="trackInteraction({
+						@click="trackInteraction({
 							interactionType: 'addToBasket',
 							interactionElement: 'Lend25'
 						})"

src/components/LoanCollections/HomeExp/LoanCategorySelectorHomeExp.vue

@@ -10,7 +10,7 @@
 					:vertical="true"
 					v-for="category in loanChannels" :key="category.id"
 					:for-panel="`tab-${category.id}`"
-					@click.native="handleCategoryClick(category)"
+					@click="handleCategoryClick(category)"
 				>
 					{{ category.shortName }}
 				</kv-tab>

src/components/LoansByCategory/FeaturedHeroLoan.vue

@@ -65,7 +65,7 @@
 									:amount-left="amountLeft"
 									:show-now="!enableFiveDollarsNotes"
 									:enable-five-dollars-notes="enableFiveDollarsNotes"
-									@click.native="trackInteraction({
+									@click="trackInteraction({
 										interactionType: 'addToBasket',
 										interactionElement: 'Lend25'
 									})"

src/components/LoansByCategory/QuickFilters/QuickFilters.vue

@@ -53,7 +53,7 @@
 						v-model="selectedGender"
 						id="gender"
 						style="min-width: 140px;"
-						@click.native="trackDropdownClick('gender')"
+						@click="trackDropdownClick('gender')"
 					>
 						<option
 							v-for="gender in filterOptions.gender"
@@ -68,7 +68,7 @@
 				<div class="tw-w-full">
 					<location-selector
 						v-if="!removeLocationDropdown"
-						@click.native="trackDropdownClick('location')"
+						@click="trackDropdownClick('location')"
 						@handle-overlay="handleQuickFiltersOverlay"
 						:regions="filterOptions.location"
 						:total-loans="totalLoans"
@@ -95,7 +95,7 @@
 					:disabled="!filtersLoaded"
 					v-model="sortBy"
 					style="min-width: 180px;"
-					@click.native="trackDropdownClick('sort')"
+					@click="trackDropdownClick('sort')"
 				>
 					<option
 						v-for="sortType in filterOptions.sorting"
@@ -120,7 +120,7 @@
 					id="sortBy"
 					:disabled="!filtersLoaded"
 					v-model="sortBy"
-					@click.native="trackDropdownClick('sort')"
+					@click="trackDropdownClick('sort')"
 				>
 					<option
 						v-for="sortType in filterOptions.sorting"

src/components/MonthlyGood/MonthlyGoodSelectorDesktop.vue

@@ -82,7 +82,7 @@
 			<div class="shrink column monthly-selector__take-action-wrapper">
 				<!--  classic hollow -->
 				<kv-button
-					@click.native="navigateToMG"
+					@click="navigateToMG"
 					class="monthly-selector__take-action"
 					v-kv-track-event="[
 						'homepage',

src/components/Subscriptions/SubscriptionsMonthlyGoodCancellationFlow.vue

@@ -65,7 +65,7 @@
 					<kv-button
 						class="tw-w-full"
 						variant="secondary"
-						@click.native.prevent="trackEvent({
+						@click.prevent="trackEvent({
 							label: `monthly good cancel ; Continue cancellation`,
 							property: 'cancel reason ; amount_other'}); goToStep('3-expensive')"
 					>

src/components/Thanks/ThanksLayoutV2.vue

@@ -11,7 +11,7 @@
 					class="thanks-page__icon-button expanded"
 					v-if="showGuestUpsell"
 					:class="{ active: isGuestSelected }"
-					@click.native="setVisibleSection('guest')"
+					@click="setVisibleSection('guest')"
 				>
 					<template #icon-left>
 						<kv-icon
@@ -33,7 +33,7 @@
 					class="thanks-page__icon-button expanded"
 					v-if="showMgCta"
 					:class="{ active: isMgSelected }"
-					@click.native="setVisibleSection('mg')"
+					@click="setVisibleSection('mg')"
 				>
 					<template #icon-left>
 						<kv-icon
@@ -54,7 +54,7 @@
 					data-testid="thanks-page-button-receipt"
 					class="thanks-page__icon-button expanded"
 					:class="{ active: isReceiptSelected }"
-					@click.native="setVisibleSection('receipt')"
+					@click="setVisibleSection('receipt')"
 				>
 					<template #icon-left>
 						<kv-icon
@@ -75,7 +75,7 @@
 					data-testid="thanks-page-button-share"
 					class="thanks-page__icon-button expanded"
 					:class="{ active: isShareSelected }"
-					@click.native="setVisibleSection('share')"
+					@click="setVisibleSection('share')"
 					v-if="showShare"
 				>
 					<template #icon-left>
@@ -151,7 +151,7 @@
 						:class="{ active: isGuestSelected }"
 						aria-controls="`kv-accordion-mg-accordion`"
 						:aria-expanded="isGuestSelected ? 'true' : 'false'"
-						@click.native="setVisibleSection('guest')"
+						@click="setVisibleSection('guest')"
 					>
 						<template #icon-left>
 							<kv-icon
@@ -196,7 +196,7 @@
 						aria-controls="`kv-accordion-mg-accordion`"
 						:aria-expanded="isMgSelected ? 'true' : 'false'"
 						v-kv-track-event="['thanks', 'click-Monthly-Good', 'Monthly Good']"
-						@click.native="setVisibleSection('mg')"
+						@click="setVisibleSection('mg')"
 					>
 						<template #icon-left>
 							<kv-icon
@@ -240,7 +240,7 @@
 						aria-controls="`kv-accordion-receipt-accordion`"
 						:aria-expanded="isReceiptSelected ? 'true' : 'false'"
 						v-kv-track-event="['thanks', 'click-Order-Confirmation', 'Order Confirmation']"
-						@click.native="setVisibleSection('receipt')"
+						@click="setVisibleSection('receipt')"
 					>
 						<template #icon-left>
 							<kv-icon
@@ -285,7 +285,7 @@
 						aria-controls="`kv-accordion-share-accordion`"
 						:aria-expanded="isShareSelected ? 'true' : 'false'"
 						v-kv-track-event="['thanks', 'click-Share', 'Share']"
-						@click.native="setVisibleSection('share')"
+						@click="setVisibleSection('share')"
 					>
 						<template #icon-left>
 							<kv-icon

src/components/WwwFrame/CookieBanner.vue

@@ -9,7 +9,7 @@
 					preferences please see our <a href="/legal/cookie" target="_blank">cookie policy</a>.
 					<kv-button
 						class="setting close-button"
-						@click.native.stop.prevent="handleClickClose"
+						@click.stop.prevent="handleClickClose"
 						aria-label="Close"
 					>
 						Sounds good

src/components/WwwFrame/LendMenu/LendListMenu.vue

@@ -3,7 +3,7 @@
 		<router-link
 			v-if="showMGUpsellLink"
 			to="/monthlygood"
-			@click.native="trackMgLinkClick"
+			@click="trackMgLinkClick"
 		>
 			<!-- eslint-disable-next-line max-len -->
 			<span class="tw-inline-flex tw-items-center tw-py-2 tw-mb-2 tw-gap-0.5 tw-border-b tw-border-tertiary tw-font-medium">

src/components/WwwFrame/LendMenu/LendMegaMenu.vue

@@ -3,7 +3,7 @@
 		<router-link
 			v-if="showMGUpsellLink"
 			to="/monthlygood"
-			@click.native="trackMgLinkClick"
+			@click="trackMgLinkClick"
 		>
 			<span class="tw-inline-flex tw-items-center tw-py-2 tw-mb-2 tw-gap-0.5 tw-font-medium">
 				Lend monthly