UXPLATFORM-10247 - Fix onSelect not triggering for draggable items (#…

…4058)

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+* Updated
+  * Updated terra list examples.
 * Changed
   * Updated documentation for `terra-form-select`.
 

packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx

@@ -28,6 +28,7 @@ const ListDraggableExample = () => {
 
   const [dataList, setDataList] = useState(mockData);
   const [selectedKey, setselectedKey] = useState('unique-0');
+  const [selectedData, setSelectedData] = useState('John Smith');
   const listNode = useRef(null);
 
   const reorderListItems = (list, startIndex, endIndex) => {
@@ -51,6 +52,7 @@ const ListDraggableExample = () => {
     event.preventDefault();
     if (selectedKey !== metaData.key) {
       setselectedKey(metaData.key);
+      setSelectedData(metaData.data);
     }
   };
 
@@ -59,7 +61,7 @@ const ListDraggableExample = () => {
       key={itemData.key}
       isSelectable
       isSelected={selectedKey === itemData.key}
-      metaData={{ key: itemData.key }}
+      metaData={{ key: itemData.key, data: itemData.title }}
       onSelect={handleItemSelection}
     >
       <Placeholder title={itemData.title} className={cx('placeholder')} />
@@ -72,6 +74,9 @@ const ListDraggableExample = () => {
     <>
       <p id="list-help">
         Select a patient from the list to view patient details.
+        Selected Item:
+        {' '}
+        {selectedData}
       </p>
       <List role="listbox" ariaDescribedBy="list-help" aria-label="list of patient" isDraggable onDragEnd={handleDragAndDrop} refCallback={(node) => handleRef(node)}>
         {createListItems(dataList)}

packages/terra-list/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed `onSelect` not triggering when draggable item is clicked.
+
 ## 4.73.0 - (March 8, 2024)
 
 * Fixed

packages/terra-list/src/ListItem.jsx

@@ -118,9 +118,12 @@ const ListItem = ({
     attrSpread.onMouseDown = ListUtils.wrappedEventCallback(onMouseDown, event => event.currentTarget.setAttribute('data-item-show-focus', 'false'));
   }
   if (isDraggable) {
-    attrSpread.onClick = (event) => {
-      event?.currentTarget?.focus();
-    };
+    if (!onSelect) {
+      attrSpread.onClick = (event) => {
+        event?.currentTarget?.focus();
+        return onClick;
+      };
+    }
     attrSpread['aria-describedby'] = responseId;
   }
 

packages/terra-list/src/ListUtils.js

@@ -28,6 +28,7 @@ const wrappedOnClickForItem = (onClick, onSelect, metaData) => {
     return onClick;
   }
   return (event) => {
+    event?.currentTarget?.focus();
     onSelect(event, metaData);
 
     if (onClick) {