fix: multi value draggable/sortable pills (#6500)

Author: JarrodMFlesch

packages/ui/src/elements/ReactSelect/MultiValue/index.tsx

@@ -10,18 +10,22 @@ import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortab
 import './index.scss'
 
 const baseClass = 'multi-value'
+
+export function generateMultiValueDraggableID(optionData, valueFunction) {
+  return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData.value
+}
 export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
   const {
     className,
-    data: { value },
+    data,
     innerProps,
     isDisabled,
     // @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module
-    selectProps: { customProps: { disableMouseDown } = {}, isSortable } = {},
+    selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},
   } = props
 
   const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
-    id: typeof value === 'string' && value.toString(),
+    id: generateMultiValueDraggableID(data, getOptionValue),
     disabled: !isSortable,
   })
 

packages/ui/src/elements/ReactSelect/index.tsx

@@ -16,7 +16,7 @@ import { DraggableSortable } from '../DraggableSortable/index.js'
 import { ClearIndicator } from './ClearIndicator/index.js'
 import { Control } from './Control/index.js'
 import { DropdownIndicator } from './DropdownIndicator/index.js'
-import { MultiValue } from './MultiValue/index.js'
+import { MultiValue, generateMultiValueDraggableID } from './MultiValue/index.js'
 import { MultiValueLabel } from './MultiValueLabel/index.js'
 import { MultiValueRemove } from './MultiValueRemove/index.js'
 import { SingleValue } from './SingleValue/index.js'
@@ -172,18 +172,19 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
 }
 
 const SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {
-  const { onChange, value } = props
+  const { getOptionValue, onChange, value } = props
 
-  let ids: string[] = []
-  if (value)
-    ids = Array.isArray(value)
-      ? value.map((item) => item?.id ?? `${item?.value}`)
-      : [value?.id || `${value?.value}`]
+  let draggableIDs: string[] = []
+  if (value) {
+    draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {
+      return generateMultiValueDraggableID(optionValue, getOptionValue)
+    })
+  }
 
   return (
     <DraggableSortable
       className="react-select-container"
-      ids={ids}
+      ids={draggableIDs}
       onDragEnd={({ moveFromIndex, moveToIndex }) => {
         let sorted = value
         if (value && Array.isArray(value)) {

packages/ui/src/fields/Relationship/index.tsx

@@ -496,6 +496,7 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
               disabled={readOnly || formProcessing || drawerIsOpen}
               filterOption={enableWordBoundarySearch ? filterOption : undefined}
               getOptionValue={(option) => {
+                if (!option) return undefined
                 return hasMany && Array.isArray(relationTo)
                   ? `${option.relationTo}_${option.value}`
                   : option.value