Add .prevent modifier to @click event handler

Author: jissereitsma

view/adminhtml/templates/form/actions.phtml

@@ -31,7 +31,7 @@ $otherSaveActions = [];
                 <?php foreach ($buttons as $button) : ?>
                     <?php $subButtons = $button->getSubButtons(); ?>
                     <button
-                        @click="<?= $escaper->escapeHtml($button->getMethod()) ?>"
+                        @click.prevent="<?= $escaper->escapeHtml($button->getMethod()) ?>"
                         title="<?= $escaper->escapeHtml(__($button->getLabel())) ?>"
                         type="button"
                         class="action- scalable <?= $escaper->escapeHtml($button->getCssClass()) ?>">
@@ -45,14 +45,14 @@ $otherSaveActions = [];
                         class="actions-split save primary"
                     >
                         <button
-                            @click="saveAndContinueAction"
+                            @click.prevent="saveAndContinueAction"
                             title="Save and Continue"
                             class="action-default primary"
                         >
                             <span>Save and Continue</span>
                         </button>
 
-                        <button @click="toggleOtherActions"
+                        <button @click.prevent="toggleOtherActions"
                                 title="Save and Continue"
                                 class="action-toggle primary save">
                             <span>Select</span>
@@ -67,7 +67,7 @@ $otherSaveActions = [];
                             ): ?>
                                 <li>
                                     <span
-                                        @click="saveAndDuplicateAction"
+                                        @click.prevent="saveAndDuplicateAction"
                                         title="Save &amp; Duplicate"
                                         class="item"
                                     >

view/adminhtml/templates/form/field_type/switch.phtml

@@ -31,7 +31,7 @@ $fieldType = $field->getFieldType();
     >
     <label
         class="admin__actions-switch-label"
-        @click="toggleValueByClick"
+        @click.prevent="toggleValueByClick"
         data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
         data-value="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
     >

view/adminhtml/templates/grid/cell/inline_edit.phtml

@@ -31,12 +31,12 @@ $item = $block->getItem();
 
         <button
             class="action-close"
-            @click="toggleInlineEdit"
+            @click.prevent="toggleInlineEdit"
         ></button>
 
         <button
             class="action-save"
-            @click="saveInlineEdit"
+            @click.prevent="saveInlineEdit"
             data-identifier="<?= $escaper->escapeHtml($item->getId()) ?>"
             data-property="<?= $escaper->escapeHtml($block->getColumnName()) ?>"
         >save</button>

view/adminhtml/templates/grid/cell/product_image.phtml

@@ -21,11 +21,11 @@ $item = $block->getItem();
 ?>
 <span class="thumbnail-container" x-data="LokiModal">
     <span class="thumbnail-wrapper">
-        <img @click="toggleModal" class="admin__control-thumbnail" src="<?= /* @noEscape */ $productImage->getThumbnailUrl($item) ?>"
+        <img @click.prevent="toggleModal" class="admin__control-thumbnail" src="<?= /* @noEscape */ $productImage->getThumbnailUrl($item) ?>"
              loading="lazy" alt="<?= $escaper->escapeHtml($item->getName()) ?>"/>
     </span>
 
-    <dialog x-ref="modal" @click="toggleModal">
+    <dialog x-ref="modal" @click.prevent="toggleModal">
     <span class="">
         <h2><?= $escaper->escapeHtml($item->getName()) ?></h2>
         <img src="<?= /* @noEscape */ $productImage->getImageUrl($item) ?>" loading="lazy" alt="<?= $escaper->escapeHtml($item->getName()) ?>"/>

view/adminhtml/templates/grid/filters.phtml

@@ -19,7 +19,7 @@ if (empty($filterFields)) {
 ?>
 <div class="data-grid-filters-actions-wrap">
     <div class="data-grid-filters-action-wrap">
-        <button :class="filterButtonClass" class="action-default" @click="toggleFilters">
+        <button :class="filterButtonClass" class="action-default" @click.prevent="toggleFilters">
             Filters
         </button>
     </div>
@@ -69,10 +69,10 @@ if (empty($filterFields)) {
 
     <div class="admin__data-grid-filters-footer">
         <div class="admin__footer-main-actions">
-            <button class="action-tertiary" type="button" @click="toggleFilters">
+            <button class="action-tertiary" type="button" @click.prevent="toggleFilters">
                 <span>Cancel</span>
             </button>
-            <button class="action-secondary" type="button" @click="applyFilters">
+            <button class="action-secondary" type="button" @click.prevent="applyFilters">
                 <span>Apply Filters</span>
             </button>
         </div>

view/adminhtml/templates/grid/massactions.phtml

@@ -21,14 +21,14 @@ if (empty($massActions)) {
 ?>
 <div class="col-xs-2">
     <div class="action-select-wrap">
-        <button class="action-select" title="Select Items" @click="toggleMassActions">
+        <button class="action-select" title="Select Items" @click.prevent="toggleMassActions">
             <span>Actions</span>
         </button>
 
         <div class="action-menu-items" x-cloak x-show="showMassActions" style="z-index:300">
             <ul class="action-menu">
                 <?php foreach ($massActions as $massAction): ?>
-                    <li @click="massAction" data-url="<?= /* @noEscape */ $massAction->getUrl() ?>">
+                    <li @click.prevent="massAction" data-url="<?= /* @noEscape */ $massAction->getUrl() ?>">
                         <span class="action-menu-item"><?= $escaper->escapeHtml($massAction->getLabel()) ?></span>
                     </li>
                 <?php endforeach; ?>

view/adminhtml/templates/grid/pager/limit.phtml

@@ -23,7 +23,7 @@ $page = $viewModel->getPage();
                    id="product_listing.product_listing.listing_top.listing_paging_sizes">
         </div>
 
-        <button @click="toggleLimitOptions" class="selectmenu-toggle" type="button"
+        <button @click.prevent="toggleLimitOptions" class="selectmenu-toggle" type="button"
                 aria-labelledby="per-page-text select-button-text">
             <span id="select-button-text"><?= $escaper->escapeHtml(__('Select')) ?></span>
         </button>
@@ -34,7 +34,7 @@ $page = $viewModel->getPage();
                     <li>
                         <div class="selectmenu-item">
                             <button
-                                @click="setLimitFromElement"
+                                @click.prevent="setLimitFromElement"
                                 data-limit="<?= $escaper->escapeHtml($limit) ?>"
                                 class="selectmenu-item-action"
                                 type="button">

view/adminhtml/templates/grid/pager/pagination.phtml

@@ -18,7 +18,7 @@ $page = $viewModel->getPage();
 ?>
 <div class="admin__data-grid-pager">
     <button
-        @click="previousPage"
+        @click.prevent="previousPage"
         class="action-previous"
         type="button"
         title="<?= $escaper->escapeHtml(__('Previous Page')) ?>"
@@ -36,7 +36,7 @@ $page = $viewModel->getPage();
     </label>
 
     <button
-        @click="nextPage"
+        @click.prevent="nextPage"
         class="action-next"
         type="button"
         title="<?= $escaper->escapeHtml(__('Next Page')) ?>"

view/adminhtml/templates/grid/table.phtml

@@ -31,25 +31,25 @@ $state = $viewModel->getState();
 
                     <button
                         class="action-multicheck-toggle"
-                        @click="toggleSelectedMenu"
+                        @click.prevent="toggleSelectedMenu"
                     >
                         <span>Options</span>
                     </button>
 
                     <ul class="action-menu" x-cloak x-show="showSelectedMenu">
-                        <li @click="selectAll">
+                        <li @click.prevent="selectAll">
                             <span class="action-menu-item">Select All</span>
                         </li>
 
-                        <li @click="deselectAll">
+                        <li @click.prevent="deselectAll">
                             <span class="action-menu-item">Deselect All</span>
                         </li>
 
-                        <li @click="selectAllOnPage">
+                        <li @click.prevent="selectAllOnPage">
                             <span class="action-menu-item">Select All on This Page</span>
                         </li>
 
-                        <li @click="deselectAllOnPage">
+                        <li @click.prevent="deselectAllOnPage">
                             <span class="action-menu-item">Deselect All on This Page</span>
                         </li>
                     </ul>
@@ -71,7 +71,7 @@ $state = $viewModel->getState();
                 <th
                     class="data-grid-th _sortable <?= $escaper->escapeHtml($additionalCss) ?>"
                     data-column="<?= $escaper->escapeHtml($column->getCode()) ?>"
-                    @click="sortColumn"
+                    @click.prevent="sortColumn"
                     x-sort:item="'<?= $escaper->escapeHtml($viewModel->getJsComponentId()) ?>.<?= $escaper->escapeHtml($column->getCode()) ?>'">
                     <span class="data-grid-cell-content"><?= $escaper->escapeHtml(__($column->getLabel())) ?></span>
                 </th>

view/adminhtml/templates/ui/button.phtml

@@ -18,7 +18,7 @@ $button = $block->getButton();
         class="actions-split <?= $escaper->escapeHtml(__($button->getCssClass())) ?>"
     >
         <button
-            @click="<?= $escaper->escapeHtml(__($button->getMethod())) ?>"
+            @click.prevent="<?= $escaper->escapeHtml(__($button->getMethod())) ?>"
             title="<?= $escaper->escapeHtml(__($button->getLabel())) ?>"
             <?php if ($button->getUrl()): ?>
                 data-url="<?= /* @noEscape */ $button->getUrl() ?>"
@@ -29,7 +29,7 @@ $button = $block->getButton();
         </button>
 
         <button
-            @click="toggleOtherActions"
+            @click.prevent="toggleOtherActions"
             title="Toggle other actions"
             class="action-toggle <?= $escaper->escapeHtml(__($button->getCssClass())) ?>"
         >
@@ -40,7 +40,7 @@ $button = $block->getButton();
             <?php foreach ($button->getSubButtons() as $subButton): ?>
                 <li>
                     <span
-                        @click="<?= $escaper->escapeHtml(__($subButton->getMethod())) ?>"
+                        @click.prevent="<?= $escaper->escapeHtml(__($subButton->getMethod())) ?>"
                         <?php if ($button->getUrl()): ?>
                             data-url="<?= /* @noEscape */ $button->getUrl() ?>"
                         <?php endif; ?>
@@ -56,7 +56,7 @@ $button = $block->getButton();
 
 <?php else: ?>
     <button
-        @click="<?= $escaper->escapeHtml($button->getMethod()) ?>"
+        @click.prevent="<?= $escaper->escapeHtml($button->getMethod()) ?>"
         <?php if ($button->getUrl()): ?>
             data-url="<?= /* @noEscape */ $button->getUrl() ?>"
         <?php endif; ?>