fix #8987

2 files changed, 18 insertions, 1 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx
index 22526f947..b1998a457 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx
@@ -77,7 +77,9 @@ export function InputImage<T>({
               readonly={readonly}
               onChange={(e) => {
                 const f: FileList | null = e.currentTarget.files;
+                console.log("on change", e, f)
                 if (!f || f.length != 1) {
+
                   return onChange(undefined!);
                 }
                 if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) {
@@ -111,7 +113,12 @@ export function InputImage<T>({
             </button>
           )}
           {value && (
-            <button class="button" onClick={() => onChange(undefined!)}>
+            <button class="button" onClick={() => {
+              if (image.current) {
+                image.current.value = ""
+              }
+              onChange(undefined!);
+            }}>
               <i18n.Translate>Remove</i18n.Translate>
             </button>
           )}
diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
index 1e520a39e..03afd3222 100644
--- a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
@@ -173,6 +173,16 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
         object={value}
         valueHandler={valueHandler}
       >
+        {/**
+         * If the user press enter on any text field it will the browser will trigger
+         * the first button that it found.
+         * 
+         * In this form the InputImage will be triggered and this is unwanted.
+         * 
+         * As a workaround we have this non-action button which will prevent loading/unloading
+         * the image when the enter key is pressed accidentally.
+         */}
+        <button />
         {alreadyExist ? undefined : (
           <InputWithAddon<Entity>
             name="product_id"