diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 8298ef233ad..38b663c4a54 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +* Updated + * Updated terra list examples. * Changed * Updated documentation for `terra-form-select`. diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx index cd63be87a75..7a3402cf58f 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx +++ b/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} > @@ -72,6 +74,9 @@ const ListDraggableExample = () => { <>

Select a patient from the list to view patient details. + Selected Item: + {' '} + {selectedData}

handleRef(node)}> {createListItems(dataList)} diff --git a/packages/terra-list/CHANGELOG.md b/packages/terra-list/CHANGELOG.md index 9a102837983..e13df275a02 100644 --- a/packages/terra-list/CHANGELOG.md +++ b/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 diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index 0f15b4ecd7f..708ae7fbe4d 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/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; } diff --git a/packages/terra-list/src/ListUtils.js b/packages/terra-list/src/ListUtils.js index f99007d9598..05f66aa9c30 100644 --- a/packages/terra-list/src/ListUtils.js +++ b/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) {