From ee53f24fa19fb7dd43f2ce7a8deed47a15b6bcaf Mon Sep 17 00:00:00 2001 From: saket2403 Date: Mon, 11 Mar 2024 14:56:28 +0530 Subject: [PATCH 1/4] Fix OnSelect --- .../terra-dev-site/doc/list/example/DraggableListItem.jsx | 7 ++++++- packages/terra-list/CHANGELOG.md | 3 +++ packages/terra-list/src/ListItem.jsx | 8 +++++--- packages/terra-list/src/ListUtils.js | 1 + .../tests/jest/__snapshots__/DraggableList.test.jsx.snap | 7 ------- 5 files changed, 15 insertions(+), 11 deletions(-) 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..f2f484062df 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -118,9 +118,11 @@ 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(); + }; + } 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) { diff --git a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap index f43aa2b578c..d77aeab4a54 100644 --- a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap @@ -297,7 +297,6 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="1" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -547,7 +546,6 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="2" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1016,7 +1014,6 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-id="123" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1264,7 +1261,6 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-id="124" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1711,7 +1707,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="13" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1959,7 +1954,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="14" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -2207,7 +2201,6 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="15" draggable={false} onBlur={[Function]} - onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} From 74df5b6ac83b7a79802b026bc2440c2244fac470 Mon Sep 17 00:00:00 2001 From: saket2403 Date: Mon, 11 Mar 2024 14:56:28 +0530 Subject: [PATCH 2/4] Changelog --- packages/terra-core-docs/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 25c56c4ada9..2a6a50f0794 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Updated + * Updated terra list examples. + ## 1.65.0 - (March 8, 2024) * Added From 4af794a10d19faddf2880e0523b779a84a5ef263 Mon Sep 17 00:00:00 2001 From: saket2403 Date: Mon, 11 Mar 2024 15:07:03 +0530 Subject: [PATCH 3/4] Jest snapshots --- .../tests/jest/__snapshots__/DraggableList.test.jsx.snap | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap index d77aeab4a54..f43aa2b578c 100644 --- a/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap +++ b/packages/terra-list/tests/jest/__snapshots__/DraggableList.test.jsx.snap @@ -297,6 +297,7 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="1" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -546,6 +547,7 @@ exports[`should render List with items 1`] = ` data-rbd-draggable-id="2" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1014,6 +1016,7 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-id="123" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1261,6 +1264,7 @@ exports[`should render Section with items 1`] = ` data-rbd-draggable-id="124" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1707,6 +1711,7 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="13" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -1954,6 +1959,7 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="14" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} @@ -2201,6 +2207,7 @@ exports[`should render subsection with items 1`] = ` data-rbd-draggable-id="15" draggable={false} onBlur={[Function]} + onClick={[Function]} onDragStart={[Function]} onMouseDown={[Function]} onTransitionEnd={null} From 49a237f597108d509591eb9f6851e20281908168 Mon Sep 17 00:00:00 2001 From: saket2403 Date: Mon, 11 Mar 2024 18:23:30 +0530 Subject: [PATCH 4/4] return onClick --- packages/terra-list/src/ListItem.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/terra-list/src/ListItem.jsx b/packages/terra-list/src/ListItem.jsx index f2f484062df..708ae7fbe4d 100644 --- a/packages/terra-list/src/ListItem.jsx +++ b/packages/terra-list/src/ListItem.jsx @@ -121,6 +121,7 @@ const ListItem = ({ if (!onSelect) { attrSpread.onClick = (event) => { event?.currentTarget?.focus(); + return onClick; }; } attrSpread['aria-describedby'] = responseId;