From 8ac18b74df57cc7af6dfabb903b118ecf1ee6855 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 12 Oct 2023 02:35:47 +0200
Subject: [PATCH] Checkout: Prevent re-rendering of payment details rows
 (#5392)

Potentially fixes #5390.
---
 BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
index c30934b6f..455b90e55 100644
--- a/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
@@ -248,37 +248,37 @@
     </noscript>
     <script type="text/x-template" id="payment-details">
         <dl>
-            <div v-if="orderAmount > 0" id="PaymentDetails-TotalPrice">
+            <div v-if="orderAmount > 0" id="PaymentDetails-TotalPrice" key="TotalPrice">
                 <dt v-t="'total_price'"></dt>
                 <dd :data-clipboard="srvModel.orderAmount" data-clipboard-hover="start">{{srvModel.orderAmount}} {{ srvModel.cryptoCode }}</dd>
             </div>
-            <div v-if="orderAmount > 0 && srvModel.orderAmountFiat" id="PaymentDetails-TotalFiat">
+            <div v-if="orderAmount > 0 && srvModel.orderAmountFiat" id="PaymentDetails-TotalFiat" key="TotalFiat">
                 <dt v-t="'total_fiat'"></dt>
                 <dd :data-clipboard="srvModel.orderAmountFiat" data-clipboard-hover="start">{{srvModel.orderAmountFiat}}</dd>
             </div>
-            <div v-if="srvModel.rate && srvModel.cryptoCode" id="PaymentDetails-ExchangeRate">
+            <div v-if="srvModel.rate && srvModel.cryptoCode" id="PaymentDetails-ExchangeRate" key="ExchangeRate">
                 <dt v-t="'exchange_rate'"></dt>
                 <dd :data-clipboard="srvModel.rate" data-clipboard-hover="start">
                     <template v-if="srvModel.cryptoCode === 'sats'">1 sat = {{ srvModel.rate }}</template>
                     <template v-else>1 {{ srvModel.cryptoCode }} = {{ srvModel.rate }}</template>
                 </dd>
             </div>
-            <div v-if="srvModel.networkFee" id="PaymentDetails-NetworkCost">
+            <div v-if="srvModel.networkFee" id="PaymentDetails-NetworkCost" key="NetworkCost">
                 <dt v-t="'network_cost'"></dt>
                 <dd :data-clipboard="srvModel.networkFee" data-clipboard-hover="start">
                     <div v-if="srvModel.txCountForFee > 0" v-t="{ path: 'tx_count', args: { count: srvModel.txCount } }"></div>
                     <div v-text="`${srvModel.networkFee} ${srvModel.cryptoCode}`"></div>
                 </dd>
             </div>
-            <div v-if="btcPaid > 0" id="PaymentDetails-AmountPaid">
+            <div v-if="btcPaid > 0" id="PaymentDetails-AmountPaid" key="AmountPaid">
                 <dt v-t="'amount_paid'"></dt>
                 <dd :data-clipboard="srvModel.btcPaid" data-clipboard-hover="start" v-text="`${srvModel.btcPaid} ${srvModel.cryptoCode}`"></dd>
             </div>
-            <div v-if="btcDue > 0" id="PaymentDetails-AmountDue">
+            <div v-if="btcDue > 0" id="PaymentDetails-AmountDue" key="AmountDue">
                 <dt v-t="'amount_due'"></dt>
                 <dd :data-clipboard="srvModel.btcDue" data-clipboard-hover="start" v-text="`${srvModel.btcDue} ${srvModel.cryptoCode}`"></dd>
             </div>
-            <div v-if="showRecommendedFee" id="PaymentDetails-RecommendedFee">
+            <div v-if="showRecommendedFee" id="PaymentDetails-RecommendedFee" key="RecommendedFee">
                 <dt v-t="'recommended_fee'"></dt>
                 <dd :data-clipboard="srvModel.feeRate" data-clipboard-hover="start" v-t="{ path: 'fee_rate', args: { feeRate: srvModel.feeRate } }"></dd>
             </div>