fix: multiselect relationship bug and improve accessibility (#6286)

## Description

Closes [#117](payloadcms/payload-3.0-demo#177)
- hitting the space key while the `ReactSelect` is in focus crashes the
page.

This PR makes the following changes:
- Multivalue select component updated to only use `id`, drag feature
does not work when using `uuid()`
- Ensures relationship field (multi and single value) can be accessed
via the keyboard

- [X] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [X] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [X] Existing test suite passes locally with my changes

Author: jessrynkar

packages/ui/src/elements/ReactSelect/ClearIndicator/index.scss

@@ -2,4 +2,8 @@
 
 .clear-indicator {
   cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
 }

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

@@ -11,11 +11,24 @@ const baseClass = 'clear-indicator'
 
 export const ClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {
   const {
+    clearValue,
     innerProps: { ref, ...restInnerProps },
   } = props
 
   return (
-    <div className={baseClass} ref={ref} {...restInnerProps}>
+    <div
+      className={baseClass}
+      ref={ref}
+      {...restInnerProps}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          clearValue()
+          e.stopPropagation()
+        }
+      }}
+      role="button"
+      tabIndex={0}
+    >
       <X className={`${baseClass}__icon`} />
     </div>
   )

packages/ui/src/elements/ReactSelect/DropdownIndicator/index.scss

@@ -0,0 +1,16 @@
+@import '../../../scss/styles.scss';
+
+.dropdown-indicator {
+  cursor: pointer;
+  @include btn-reset;
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
+
+  &__icon {
+    .stroke {
+      stroke-width: 1px;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { DropdownIndicatorProps } from 'react-select'
+
+import { Chevron } from '@payloadcms/ui/icons/Chevron'
+import React from 'react'
+
+import type { Option as OptionType } from '../types.js'
+
+import './index.scss'
+
+const baseClass = 'dropdown-indicator'
+export const DropdownIndicator: React.FC<
+  DropdownIndicatorProps<OptionType, true> & {
+    innerProps: JSX.IntrinsicElements['button']
+  }
+> = (props) => {
+  const {
+    innerProps: { ref, ...restInnerProps },
+  } = props
+
+  return (
+    <button
+      className={baseClass}
+      ref={ref}
+      {...restInnerProps}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') e.key = ' '
+      }}
+      type="button"
+    >
+      <Chevron className={`${baseClass}__icon`} />
+    </button>
+  )
+}

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

@@ -21,7 +21,7 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
   } = props
 
   const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
-    id: typeof value === 'object' && 'path' in value ? String(value.path) : uuid(),
+    id: typeof value === 'string' && value.toString(),
     disabled: !isSortable,
   })
 
@@ -51,6 +51,7 @@ export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
         ref: setNodeRef,
         style: {
           transform,
+          ...attributes?.style,
         },
       }}
     />

packages/ui/src/elements/ReactSelect/MultiValueLabel/index.scss

@@ -13,4 +13,8 @@
     overflow: hidden;
     white-space: nowrap;
   }
+
+  &:focus-visible {
+    outline: var(--accessibility-outline);
+  }
 }

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

@@ -31,6 +31,12 @@ export const MultiValueRemove: React.FC<
         setShowTooltip(false)
         onClick(e)
       }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.stopPropagation()
+        }
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
       onTouchEnd={onTouchEnd}

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

@@ -11,11 +11,11 @@ import type { Option } from './types.js'
 import type { Props as ReactSelectAdapterProps } from './types.js'
 export type { Option } from './types.js'
 
-import { Chevron } from '../../icons/Chevron/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 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 { MultiValueLabel } from './MultiValueLabel/index.js'
 import { MultiValueRemove } from './MultiValueRemove/index.js'
@@ -73,7 +73,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
         components={{
           ClearIndicator,
           Control,
-          DropdownIndicator: Chevron,
+          DropdownIndicator,
           MultiValue,
           MultiValueLabel,
           MultiValueRemove,
@@ -144,7 +144,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
       components={{
         ClearIndicator,
         Control,
-        DropdownIndicator: Chevron,
+        DropdownIndicator,
         MultiValue,
         MultiValueLabel,
         MultiValueRemove,

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

@@ -492,7 +492,7 @@ const RelationshipField: React.FC<RelationshipFieldProps> = (props) => {
               onSave,
               setDrawerIsOpen,
             }}
-            disabled={readOnly || formProcessing}
+            disabled={readOnly || formProcessing || drawerIsOpen}
             filterOption={enableWordBoundarySearch ? filterOption : undefined}
             isLoading={isLoading}
             isMulti={hasMany}

packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.scss

@@ -34,5 +34,9 @@
     &:hover {
       background-color: var(--theme-elevation-100);
     }
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }