fix(ui): drag and drop not working for sortable hasMany fields (#15845)

### What

Fixes drag-and-drop sorting for relationship and select fields with
`hasMany` and `admin.isSortable: true`.

### Why

In v3.78.0, commit 418bb92 replaced `PointerSensor` with
`MouseSensor` + `TouchSensor`. The `MultiValue` component was overriding
the `onMouseDown` handler from `listeners`, preventing the `MouseSensor`
from detecting drag start events.

### How

Extract `onMouseDown` from `listeners` and call it explicitly before the
custom `stopPropagation` logic. Touch and keyboard handlers remain
unaffected.

Fixes #15843

Author: PatrikKozak

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

@@ -40,6 +40,9 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
     .filter(Boolean)
     .join(' ')
 
+  // Extract onMouseDown from listeners to preserve the MouseSensor handler
+  const { onMouseDown: listenersMouseDown, ...restListeners } = listeners || {}
+
   return (
     <React.Fragment>
       <SelectComponents.MultiValue
@@ -49,11 +52,16 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
           ...(isSortable
             ? {
                 ...attributes,
-                ...listeners,
+                ...restListeners,
               }
             : {}),
           ...innerProps,
           onMouseDown: (e) => {
+            // Call the MouseSensor's handler first to enable mouse dragging
+            if (isSortable && listenersMouseDown) {
+              listenersMouseDown(e)
+            }
+
             if (!disableMouseDown) {
               // we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
               e.stopPropagation()

test/fields/collections/Select/e2e.spec.ts

@@ -7,17 +7,17 @@ import { fileURLToPath } from 'url'
 import type { PayloadTestSDK } from '../../../__helpers/shared/sdk/index.js'
 import type { Config } from '../../payload-types.js'
 
+import { checkFocusIndicators } from '../../../__helpers/e2e/checkFocusIndicators.js'
 import {
   ensureCompilationIsDone,
   initPageConsoleErrorCatch,
   saveDocAndAssert,
   waitForFormReady,
 } from '../../../__helpers/e2e/helpers.js'
-import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
-import { checkFocusIndicators } from '../../../__helpers/e2e/checkFocusIndicators.js'
 import { runAxeScan } from '../../../__helpers/e2e/runAxeScan.js'
-import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
+import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
 import { reInitializeDB } from '../../../__helpers/shared/clearAndSeed/reInitializeDB.js'
+import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
 import { RESTClient } from '../../../__helpers/shared/rest.js'
 import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
 import { selectFieldsSlug } from '../../slugs.js'
@@ -130,6 +130,67 @@ describe('Select', () => {
     await expect(options.locator('text=Two')).toBeHidden()
   })
 
+  test('should allow reordering hasMany select values with drag and drop', async () => {
+    await page.goto(url.create)
+    await waitForFormReady(page)
+
+    const field = page.locator('#field-selectHasMany')
+
+    // Select multiple options in order: one, two, three
+    await field.click({ delay: 100 })
+    await page.locator('.rs__option:has-text("Value One")').click()
+
+    await field.click({ delay: 100 })
+    await page.locator('.rs__option:has-text("Value Two")').click()
+
+    await field.click({ delay: 100 })
+    await page.locator('.rs__option:has-text("Value Three")').click()
+
+    // Verify initial order
+    const valueContainer = field.locator('.rs__value-container')
+    const pills = valueContainer.locator('.rs__multi-value')
+    await expect(pills).toHaveCount(3)
+    await expect(pills.nth(0)).toContainText('Value One')
+    await expect(pills.nth(1)).toContainText('Value Two')
+    await expect(pills.nth(2)).toContainText('Value Three')
+
+    // Get bounding boxes for drag operation
+    const firstPill = pills.nth(0)
+    const thirdPill = pills.nth(2)
+
+    const firstBox = (await firstPill.boundingBox())!
+    const thirdBox = (await thirdPill.boundingBox())!
+
+    // Drag first pill to the position of the third pill
+    await page.mouse.move(firstBox.x + firstBox.width / 2, firstBox.y + firstBox.height / 2)
+    await page.mouse.down()
+    await page.mouse.move(thirdBox.x + thirdBox.width / 2, thirdBox.y + thirdBox.height / 2, {
+      steps: 10,
+    })
+    await page.mouse.up()
+
+    // Verify the order changed - first item should now be last
+    const updatedPills = valueContainer.locator('.rs__multi-value')
+    await expect(updatedPills.nth(0)).toContainText('Value Two')
+    await expect(updatedPills.nth(1)).toContainText('Value Three')
+    await expect(updatedPills.nth(2)).toContainText('Value One')
+
+    // Save and verify the order is persisted
+    await saveDocAndAssert(page)
+
+    const currentUrl = page.url()
+    const id = currentUrl.split('/').pop()!
+
+    // Reload the page to verify order persists
+    await page.goto(url.edit(id))
+    await waitForFormReady(page)
+
+    const reloadedPills = page.locator('#field-selectHasMany .rs__value-container .rs__multi-value')
+    await expect(reloadedPills.nth(0)).toContainText('Value Two')
+    await expect(reloadedPills.nth(1)).toContainText('Value Three')
+    await expect(reloadedPills.nth(2)).toContainText('Value One')
+  })
+
   describe('A11y', () => {
     test.fixme('Create view should have no accessibility violations', async ({}, testInfo) => {
       await page.goto(url.create)