fix(ui): jumping hasmany uploads when form is submitting or in readonly mode (#9198)

Author: paulpopus

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;

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}

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>