From d833e8a8e66ecee339f6c490c6ecaac8e4d13ce7 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Fri, 21 Jan 2022 10:00:41 +0100
Subject: [PATCH] fix(theme): add debounced update quantity action so it will
 be possible to insert multidigital value

---
 packages/theme/components/CartSidebar.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 8f344715c..42677c7a9 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -113,7 +113,7 @@
                   )
                 "
                 class="collected-product"
-                @input="updateItemQty({ product, quantity: $event })"
+                @input="delayedUpdateItemQty({ product, quantity: $event })"
                 @click:remove="sendToRemove({ product })"
               >
                 <template #input>
@@ -125,7 +125,7 @@
                       :disabled="loading"
                       :qty="cartGetters.getItemQty(product)"
                       class="sf-collected-product__quantity-selector"
-                      @input="updateItemQty({ product, quantity: $event })"
+                      @input="delayedUpdateItemQty({ product, quantity: $event })"
                     />
                   </div>
                   <SfBadge
@@ -257,9 +257,10 @@ import {
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
+import _debounce from 'lodash.debounce';
 import { useUiState, useUiNotification } from '~/composables';
-import CouponCode from './CouponCode.vue';
 import stockStatusEnum from '~/enums/stockStatusEnum';
+import CouponCode from './CouponCode.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -342,7 +343,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-
+    const delayedUpdateItemQty = _debounce((params) => updateItemQty(params), 1000);
     const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {
@@ -352,7 +353,7 @@ export default defineComponent({
       isAuthenticated,
       products,
       removeItem,
-      updateItemQty,
+      delayedUpdateItemQty,
       isCartSidebarOpen,
       notifications,
       visible,