From afc8810d89f409f1ea2f6e82a01b3120ded208f9 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Mon, 29 Jan 2024 17:27:30 +0100
Subject: [PATCH] When updating the quantity of the product in the cart it
 could happen that the form would become out of sync with the actual data.

---
 .changeset/spicy-falcons-care.md              |  5 +++++
 .../UpdateItemQuantity/UpdateItemQuantity.tsx | 20 ++++++++++++-------
 .../TextInputNumber/TextInputNumber.tsx       |  3 +++
 3 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/spicy-falcons-care.md

diff --git a/.changeset/spicy-falcons-care.md b/.changeset/spicy-falcons-care.md
new file mode 100644
index 0000000000..cc92438a93
--- /dev/null
+++ b/.changeset/spicy-falcons-care.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/magento-cart-items": patch
+---
+
+When updating the quantity of the product in the cart it could happen that the form would become out of sync with the actual data.
diff --git a/packages/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity.tsx b/packages/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity.tsx
index 1dfd7ca105..6d46632ac0 100644
--- a/packages/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity.tsx
+++ b/packages/magento-cart-items/components/UpdateItemQuantity/UpdateItemQuantity.tsx
@@ -1,6 +1,7 @@
+import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
 import { ApolloCartErrorSnackbar, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { TextInputNumber, TextInputNumberProps } from '@graphcommerce/next-ui'
-import { useFormAutoSubmit, UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import { TextInputNumberProps } from '@graphcommerce/next-ui'
+import { FormAutoSubmit, UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
 import { SxProps, Theme } from '@mui/material'
 import React from 'react'
 import {
@@ -16,31 +17,36 @@ type UpdateItemQuantityFormReturn = UseFormGraphQlOptions<
 
 export type UpdateItemQuantityProps = Omit<UpdateItemQuantityMutationVariables, 'cartId'> & {
   formOptions?: Omit<UpdateItemQuantityFormReturn, 'mode' | 'defaultValues'>
-  textInputProps?: TextInputNumberProps
+  textInputProps?: Omit<
+    NumberFieldElementProps<UpdateItemQuantityMutationVariables>,
+    'rules' | 'shouldUnregister' | 'defaultValue' | 'control' | 'disabled'
+  >
   sx?: SxProps<Theme>
 }
 
 export function UpdateItemQuantity(props: UpdateItemQuantityProps) {
   const { uid, quantity, sx, textInputProps, formOptions } = props
   const form = useFormGqlMutationCart(UpdateItemQuantityDocument, {
+    experimental_useV2: true,
     defaultValues: { uid, quantity },
     mode: 'onChange',
     ...formOptions,
   })
-  const { muiRegister, required, handleSubmit, formState, error, reset } = form
+  const { handleSubmit, formState, error, reset, control } = form
 
   const submit = handleSubmit(() => {})
-  useFormAutoSubmit({ form, submit })
 
   return (
     <form noValidate onSubmit={submit}>
-      <TextInputNumber
+      <FormAutoSubmit control={control} submit={submit} initialWait={0} />
+      <NumberFieldElement
+        control={control}
+        name='quantity'
         size='small'
         variant='standard'
         inputProps={{ min: 1 }}
         InputProps={{ disableUnderline: true }}
         error={!!formState.errors.quantity}
-        {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.errors.quantity?.message}
         sx={sx}
         {...textInputProps}
diff --git a/packages/next-ui/TextInputNumber/TextInputNumber.tsx b/packages/next-ui/TextInputNumber/TextInputNumber.tsx
index e423b329f4..db0a5b0502 100644
--- a/packages/next-ui/TextInputNumber/TextInputNumber.tsx
+++ b/packages/next-ui/TextInputNumber/TextInputNumber.tsx
@@ -32,6 +32,9 @@ const name = 'TextInputNumber' as const
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated Please us NumberFieldElement
+ */
 export function TextInputNumber(props: TextInputNumberProps) {
   const {
     DownProps = {},