From 315b4e566b50a1f6512b643878abdd28f77a7f79 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Thu, 14 Nov 2024 13:39:31 -0600
Subject: [PATCH] fix(ui): jumping hasmany uploads when form is submitting or
 in readonly mode (#9198)

---
 packages/ui/src/fields/Upload/HasMany/index.scss | 8 ++++++++
 packages/ui/src/fields/Upload/HasMany/index.tsx  | 4 ++--
 packages/ui/src/fields/Upload/Input.tsx          | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/fields/Upload/HasMany/index.scss b/packages/ui/src/fields/Upload/HasMany/index.scss
index d733f978c..ab62a2123 100644
--- a/packages/ui/src/fields/Upload/HasMany/index.scss
+++ b/packages/ui/src/fields/Upload/HasMany/index.scss
@@ -5,6 +5,14 @@
     position: relative;
     max-width: 100%;
 
+    &__drag {
+      &[aria-disabled='true'] {
+        &:hover {
+          cursor: default;
+        }
+      }
+    }
+
     &__draggable-rows {
       display: flex;
       flex-direction: column;
diff --git a/packages/ui/src/fields/Upload/HasMany/index.tsx b/packages/ui/src/fields/Upload/HasMany/index.tsx
index 3ec103ee4..361b9e2c8 100644
--- a/packages/ui/src/fields/Upload/HasMany/index.tsx
+++ b/packages/ui/src/fields/Upload/HasMany/index.tsx
@@ -76,7 +76,7 @@ export function UploadComponentHasMany(props: Props) {
           }
 
           return (
-            <DraggableSortableItem disabled={!isSortable} id={id} key={id}>
+            <DraggableSortableItem disabled={!isSortable || readonly} id={id} key={id}>
               {(draggableSortableItemProps) => (
                 <div
                   className={[
@@ -93,7 +93,7 @@ export function UploadComponentHasMany(props: Props) {
                   }}
                 >
                   <UploadCard size="small">
-                    {isSortable && draggableSortableItemProps && (
+                    {draggableSortableItemProps && (
                       <div
                         className={`${baseClass}__drag`}
                         {...draggableSortableItemProps.attributes}
diff --git a/packages/ui/src/fields/Upload/Input.tsx b/packages/ui/src/fields/Upload/Input.tsx
index 516e2aaad..02776cc7d 100644
--- a/packages/ui/src/fields/Upload/Input.tsx
+++ b/packages/ui/src/fields/Upload/Input.tsx
@@ -158,7 +158,7 @@ export function UploadInput(props: UploadInputProps) {
   const loadedValueDocsRef = React.useRef<boolean>(false)
 
   const canCreate = useMemo(() => {
-    if (readOnly || !allowCreate) {
+    if (!allowCreate) {
       return false
     }
 
@@ -558,7 +558,7 @@ export function UploadInput(props: UploadInputProps) {
                 />
               </div>
 
-              {canCreate && (
+              {canCreate && !readOnly && (
                 <p className={`${baseClass}__dragAndDropText`}>
                   {t('general:or')} {t('upload:dragAndDrop')}
                 </p>