diff --git a/packages/core/docs/changelog/6226.js b/packages/core/docs/changelog/6226.js new file mode 100644 index 0000000000..dc37248ff2 --- /dev/null +++ b/packages/core/docs/changelog/6226.js @@ -0,0 +1,8 @@ +module.exports = { + description: 'Fix quantity input being immediately disabled after inserting single digit', + link: 'https://github.com/vuestorefront/vue-storefront/issues/6226', + isBreaking: false, + breakingChanges: [], + author: 'Igor Wojciechowski', + linkToGitHubAccount: 'https://github.com/igorwojciechowski' +}; diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue index a4826ca20e..4c3edf744d 100644 --- a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue +++ b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue @@ -47,7 +47,7 @@ :disabled="loading" :qty="cartGetters.getItemQty(product)" class="sf-collected-product__quantity-selector" - @input="updateItemQty({ product, quantity: $event })" + @input="updateQuantity({ product, quantity: $event })" /> @@ -123,6 +123,7 @@ import { import { computed } from '@vue/composition-api'; import { useCart, useUser, cartGetters } from '<%= options.generate.replace.composables %>'; import { useUiState } from '~/composables'; +import debounce from 'lodash.debounce'; export default { name: 'Cart', @@ -146,12 +147,16 @@ export default { const totalItems = computed(() => cartGetters.getTotalItems(cart.value)); loadCart(); + const updateQuantity = debounce(async ({ product, quantity }) => { + await updateItemQty({ product, quantity }); + }, 500); + return { + updateQuantity, loading, isAuthenticated, products, removeItem, - updateItemQty, isCartSidebarOpen, toggleCartSidebar, totals,