fix(ui): jumping hasmany uploads when form is submitting or in readon…

…ly mode (#9198)
payloadcms · Nov 14, 2024 · 315b4e5 · 315b4e5
1 parent 2d7626c
commit 315b4e5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>