From ac416e99a1744892ea1283816e73f57f1b8c4528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Frane=20Poli=C4=87?=
 <16856471+fPolic@users.noreply.github.com>
Date: Thu, 11 Jul 2024 18:09:49 +0200
Subject: [PATCH] fix(dashboard): product create input focus (#8095)

---
 .../product-create-variants-form.tsx                   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
index e4e7dfd968..02e4812977 100644
--- a/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
@@ -26,6 +26,11 @@ export const ProductCreateVariantsForm = ({
 
   const { price_preferences: pricePreferences } = usePricePreferences({})
 
+  const currencyCodes = useMemo(
+    () => store?.supported_currencies?.map((c) => c.currency_code) || [],
+    [store]
+  )
+
   const variants = useWatch({
     control: form.control,
     name: "variants",
@@ -38,9 +43,12 @@ export const ProductCreateVariantsForm = ({
     defaultValue: [],
   })
 
+  /**
+   * NOTE: anything that goes to the datagrid component needs to be memoised otherwise DataGrid will rerender and inputs will loose focus
+   */
   const columns = useColumns({
     options,
-    currencies: store?.supported_currencies?.map((c) => c.currency_code) || [],
+    currencies: currencyCodes,
     regions,
     pricePreferences,
   })