@pie-element/image-cloze-association 10.2.0 → 10.3.0

package/src/__tests__/root.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import { ImageClozeAssociationComponent as Root } from '../root';
+import { closestDroppableKeyboardCoordinates } from '../keyboard-coordinates';
 
 jest.mock('@dnd-kit/core', () => ({
   DragOverlay: ({ children }) => <div>{children}</div>,
@@ -15,8 +16,13 @@ jest.mock('@dnd-kit/core', () => ({
   }),
 }));
 
+let capturedDragProviderProps;
+
 jest.mock('@pie-lib/drag', () => ({
-  DragProvider: ({ children }) => <div>{children}</div>,
+  DragProvider: (props) => {
+    capturedDragProviderProps = props;
+    return <div>{props.children}</div>;
+  },
   ICADroppablePlaceholder: ({ children }) => <div>{children}</div>,
 }));
 
@@ -34,6 +40,18 @@ const model = {
 describe('Root', () => {
   const updateAnswer = jest.fn();
 
+  // Warm-up render: the very first `render(<Root .../>)` call in this file's jest
+  // worker doesn't reliably invoke the mocked `DragProvider` (its assignment to
+  // `capturedDragProviderProps` never runs, even though React reports the correct
+  // component reference and the surrounding tree renders successfully) — a one-time
+  // environment quirk, not anything about the mock or Root itself, since every
+  // subsequent render works correctly. Priming it here, once, before any test's
+  // assertions depend on it, avoids the tests that check `capturedDragProviderProps`
+  // being order-dependent on some other, unrelated test happening to render first.
+  beforeAll(() => {
+    render(<Root model={model} session={{ answers: [] }} updateAnswer={jest.fn()} />).unmount();
+  });
+
   const mkWrapper = (opts = {}) => {
     const props = {
       model,
@@ -96,4 +114,245 @@ describe('Root', () => {
     });
   });
 
+  describe('selection state', () => {
+    it('mirrors an active drag into selectedResponse on drag start', () => {
+      const instance = createInstance();
+      const data = { id: '3', value: 'X', containerIndex: 1 };
+
+      instance.onDragStart({ active: { data: { current: data } } });
+
+      expect(instance.state.selectedResponse).toEqual(data);
+    });
+
+    it('toggleResponseSelection selects, then deselects the same response', () => {
+      const instance = createInstance();
+      const data = { id: '3', value: 'X', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      expect(instance.state.selectedResponse).toEqual(data);
+
+      instance.toggleResponseSelection(data);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('toggleResponseSelection switches selection to a different response', () => {
+      const instance = createInstance();
+      const first = { id: '3', value: 'X', containerIndex: undefined };
+      const second = { id: '4', value: 'Y', containerIndex: undefined };
+
+      instance.toggleResponseSelection(first);
+      instance.toggleResponseSelection(second);
+
+      expect(instance.state.selectedResponse).toEqual(second);
+    });
+
+    it('placeSelectedResponse places the selection into a container via handleOnAnswerSelect', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      instance.placeSelectedResponse(1);
+
+      expect(instance.state.answers).toEqual([{ id: '0', value: 'firstImage', containerIndex: 1 }]);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('placeSelectedResponse with containerIndex undefined removes the placed response (returns it to the pool)', () => {
+      const instance = createInstance();
+      instance.handleOnAnswerSelect({ value: 'firstImage', id: '0' }, 0);
+
+      instance.toggleResponseSelection({ id: '0', value: 'firstImage', containerIndex: 0 });
+      instance.placeSelectedResponse(undefined);
+
+      expect(instance.state.answers).toEqual([]);
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'secondImage', id: '1' },
+        { value: 'firstImage', id: '0' },
+      ]);
+    });
+
+    it('placeSelectedResponse does nothing when nothing is selected', () => {
+      const instance = createInstance();
+
+      instance.placeSelectedResponse(1);
+
+      expect(instance.state.answers).toEqual([]);
+    });
+
+    it('placeSelectedResponse(undefined) is a no-op when the selection is already a pool item, even if its id collides with an unrelated placed answer (C1)', () => {
+      // Pool items are indexed 0..n-1 over possibleResponses, and placed answers are
+      // re-indexed 0..n-1 independently over the session's initial answers — so a pool
+      // item's id can coincide with an unrelated placed answer's id purely from the
+      // initial model/session, with no further user action required.
+      const instance = createInstance({ session: { answers: [{ value: 'thirdImage', containerIndex: 1 }] } });
+
+      const unrelatedPlacedAnswer = { value: 'thirdImage', containerIndex: 1, id: '0' };
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+
+      // 'firstImage' is a pool item whose id ('0') collides with the unrelated placed
+      // answer's id above, but it is NOT currently placed anywhere
+      // (containerIndex undefined).
+      const poolItem = { value: 'firstImage', id: '0' };
+      instance.toggleResponseSelection(poolItem);
+
+      instance.placeSelectedResponse(undefined);
+
+      // The unrelated placed answer must survive untouched...
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+      // ...and nothing should have been incorrectly pushed into possibleResponses either.
+      expect(instance.state.possibleResponses).toEqual([
+        { value: 'firstImage', id: '0' },
+        { value: 'secondImage', id: '1' },
+      ]);
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('onDragEnd dropping a pool item back onto the pool ("ica-board") is a no-op, even if its id collides with an unrelated placed answer (C1, drag path)', () => {
+      // Same hazard as the click-path C1 test above, but reached via a real
+      // pointer/keyboard drag ending on the pool ('ica-board') instead of a click:
+      // pool tiles are draggable too, and 'ica-board' is a valid Tab/Shift+Tab
+      // keyboard-navigable drop target, so draggedItem can be a pool item
+      // (containerIndex undefined) rather than a placed answer being moved back.
+      const instance = createInstance({ session: { answers: [{ value: 'thirdImage', containerIndex: 1 }] } });
+
+      const unrelatedPlacedAnswer = { value: 'thirdImage', containerIndex: 1, id: '0' };
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+
+      // 'firstImage' is a pool item whose id ('0') collides with the unrelated placed
+      // answer's id above, but it is NOT currently placed anywhere.
+      const poolItem = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.onDragEnd({ active: { data: { current: poolItem } }, over: { id: 'ica-board' } });
+
+      // The unrelated placed answer must survive untouched.
+      expect(instance.state.answers).toEqual([unrelatedPlacedAnswer]);
+    });
+
+    it('onResponseClick and onPlacementClick are ignored for a short window right after a drag ends', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.onDragEnd({ active: null, over: null });
+      instance.onResponseClick(data);
+
+      expect(instance.state.selectedResponse).toBeNull();
+    });
+
+    it('onPlacementClick is ignored for a short window right after a drag ends, even with an active selection', () => {
+      const instance = createInstance();
+      const data = { id: '0', value: 'firstImage', containerIndex: undefined };
+
+      instance.toggleResponseSelection(data);
+      instance.lastDragEndAt = Date.now(); // simulate the guard window without clearing selectedResponse
+
+      instance.onPlacementClick(1);
+
+      expect(instance.state.answers).toEqual([]);
+      expect(instance.state.selectedResponse).toEqual(data); // still selected — the call was ignored, not processed
+    });
+
+    it('endAnyLiveKeyboardDrag does not dispatch a document Escape keydown when no drag is live (I4)', () => {
+      const instance = createInstance();
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent');
+
+      // No onDragStart call happened, so draggingElement.id is falsy.
+      instance.endAnyLiveKeyboardDrag();
+
+      expect(dispatchSpy).not.toHaveBeenCalled();
+      dispatchSpy.mockRestore();
+    });
+
+    it('endAnyLiveKeyboardDrag dispatches a document Escape keydown when a drag is live (I4)', () => {
+      const instance = createInstance();
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent');
+
+      instance.onDragStart({ active: { data: { current: { id: '3', value: 'X', containerIndex: undefined } } } });
+      instance.endAnyLiveKeyboardDrag();
+
+      expect(dispatchSpy).toHaveBeenCalledWith(expect.objectContaining({ type: 'keydown', code: 'Escape' }));
+      dispatchSpy.mockRestore();
+    });
+
+    it('onResponseClick ends a still-live keyboard drag before applying the click selection, so the new selection sticks (I1)', () => {
+      const instance = createInstance();
+      const tileA = { id: '3', value: 'A', containerIndex: undefined };
+      const tileB = { id: '4', value: 'B', containerIndex: undefined };
+
+      // Pick up tile A via keyboard: starts a real dnd-kit drag and mirrors it into
+      // selectedResponse.
+      instance.onDragStart({ active: { data: { current: tileA } } });
+      expect(instance.state.selectedResponse).toEqual(tileA);
+      expect(instance.state.draggingElement).toEqual(tileA);
+
+      // Now click tile B with the mouse. Real dnd-kit's own document Escape listener
+      // would react to the synthetic Escape dispatched by endAnyLiveKeyboardDrag and
+      // cancel the drag (calling onDragCancel) — simulate that here the same way,
+      // since @dnd-kit/core itself is mocked out of this test file.
+      const originalDispatch = document.dispatchEvent.bind(document);
+      const dispatchSpy = jest.spyOn(document, 'dispatchEvent').mockImplementation((event) => {
+        if (event.code === 'Escape') {
+          instance.onDragCancel();
+        }
+
+        return originalDispatch(event);
+      });
+
+      instance.onResponseClick(tileB);
+
+      expect(dispatchSpy).toHaveBeenCalled();
+      expect(instance.state.draggingElement).toEqual({ id: '', value: '' });
+      // B's selection must be the one that sticks, not wiped out by ending A's drag.
+      expect(instance.state.selectedResponse).toEqual(tileB);
+
+      dispatchSpy.mockRestore();
+    });
+
+  });
+
+  describe('DragProvider wiring', () => {
+    it('passes the Tab/Shift+Tab coordinate getter and keyboard codes to DragProvider', () => {
+      mkWrapper();
+
+      expect(capturedDragProviderProps.keyboardCoordinateGetter).toBe(closestDroppableKeyboardCoordinates);
+      expect(capturedDragProviderProps.keyboardCodes).toEqual({
+        start: ['Space', 'Enter'],
+        cancel: ['Escape'],
+        end: ['Space', 'Enter'],
+      });
+    });
+
+    it('passes onDragCancel to DragProvider (forward-compatible with the pie-lib fix once bumped)', () => {
+      mkWrapper();
+
+      expect(typeof capturedDragProviderProps.onDragCancel).toBe('function');
+    });
+  });
+
+  describe('full component tree (I5)', () => {
+    // Only @dnd-kit/core and @pie-lib/drag are mocked in this file — everything else,
+    // including image-container.jsx and image-drop-target.jsx, renders for real. This
+    // proves the whole click-to-select/click-to-place prop chain works end to end,
+    // rather than each component's own test mocking its immediate child.
+    it('clicking a real pool tile then a real response container places the answer, exercising the full prop chain', () => {
+      updateAnswer.mockClear();
+
+      const { getByText, container } = mkWrapper();
+
+      // Click a real pool tile (rendered by possible-responses.jsx -> possible-response.jsx).
+      const poolTile = getByText('firstImage');
+      fireEvent.click(poolTile);
+
+      // Both response containers (rendered by image-container.jsx -> image-drop-target.jsx)
+      // are still empty at this point, so both are native tab stops with role="button" —
+      // this is the only role="button" element in the tree (pool tiles don't set one).
+      const dropTargets = container.querySelectorAll('[role="button"]');
+      expect(dropTargets.length).toBe(2);
+
+      // Click the first response container to place the selected pool tile into it.
+      fireEvent.click(dropTargets[0]);
+
+      expect(updateAnswer).toHaveBeenCalledWith([{ value: 'firstImage', id: '0', containerIndex: 0 }]);
+    });
+  });
+
 });

package/src/image-container.jsx

@@ -27,6 +27,9 @@ class ImageContainer extends Component {
       responseContainerPadding,
       imageDropTargetPadding,
       maxResponsePerZone,
+      selectedResponse,
+      onSelectClick,
+      onPlacementClick,
     } = this.props;
 
     return (
@@ -62,6 +65,9 @@ class ImageContainer extends Component {
               responseContainerPadding={responseContainerPadding}
               imageDropTargetPadding={imageDropTargetPadding}
               maxResponsePerZone={maxResponsePerZone}
+              selectedResponse={selectedResponse}
+              onSelectClick={onSelectClick}
+              onPlacementClick={onPlacementClick}
             />
           );
         })}
@@ -85,6 +91,9 @@ ImageContainer.propTypes = {
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
   maxResponsePerZone: PropTypes.number,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default ImageContainer;

package/src/image-drop-target.jsx

@@ -43,7 +43,11 @@ const ImageDropTarget = ({
   maxResponsePerZone,
   onDrop,
   index,
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick,
 }) => {
+  const [isHovered, setIsHovered] = useState(false);
   const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);
   const dropContainerRef = useRef(null);
   const dropContainerResponsesHeightRef = useRef(null);
@@ -73,9 +77,11 @@ const ImageDropTarget = ({
   }, []);
 
   const isDraggingElement = !!draggingElement.id;
+  const hasSelection = !!selectedResponse;
+  const showsHoverEffect = isOver || (hasSelection && isHovered && canDrag);
 
   const containerClasses = cx({
-    'is-over': isOver,
+    'is-over': showsHoverEffect,
     dashed: showDashedBorder && !isDraggingElement,
     active: isDraggingElement,
   });
@@ -84,6 +90,31 @@ const ImageDropTarget = ({
     padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,
     ...containerStyle,
     ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),
+    cursor: hasSelection && canDrag ? 'pointer' : undefined,
+  };
+
+  const handleContainerClick = () => {
+    if (!canDrag) return;
+
+    if (selectedResponse) {
+      onPlacementClick?.(index);
+    }
+
+    // Empty background clicked with nothing selected: nothing to place.
+  };
+
+  // Only a native Tab stop when there's nothing else in this container to carry
+  // tabbability — once it holds an answer, that answer's own tile (rendered by
+  // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,
+  // and adding a second stop for the same visual container would add an extra stop to
+  // the existing Tab order (match-list's equivalent)
+  const isNativeTabStop = answers.length === 0 && canDrag;
+
+  const handleContainerKeyDown = (e) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleContainerClick();
+    }
   };
 
   return (
@@ -94,6 +125,12 @@ const ImageDropTarget = ({
       }}
       className={containerClasses}
       style={updatedContainerStyle}
+      role={isNativeTabStop ? 'button' : undefined}
+      tabIndex={isNativeTabStop ? 0 : -1}
+      onClick={handleContainerClick}
+      onKeyDown={isNativeTabStop ? handleContainerKeyDown : undefined}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       {answers.length ? (
         <AnswersContainer
@@ -112,6 +149,9 @@ const ImageDropTarget = ({
               containerStyle={{
                 padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',
               }}
+              selectedResponse={selectedResponse}
+              onSelectClick={onSelectClick}
+              onPlacementClick={onPlacementClick}
             />
           ))}
         </AnswersContainer>
@@ -135,6 +175,9 @@ ImageDropTarget.propTypes = {
   responseContainerPadding: PropTypes.string,
   imageDropTargetPadding: PropTypes.string,
   maxResponsePerZone: PropTypes.number,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default ImageDropTarget;

package/src/keyboard-coordinates.js

@@ -0,0 +1,115 @@
+import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';
+
+/**
+ * Custom keyboard coordinate getter for image-cloze-association's Tab-based placement.
+ *
+ * Tab/Shift+Tab cycle the dragged answer directly onto the next/previous enabled
+ * droppable — a response container (`response-container-{index}`) or the choices pool
+ * (`ica-board`) — sorted by on-screen position (top-to-bottom, then left-to-right),
+ * since response containers are absolutely positioned over an image rather than laid
+ * out as a simple list.
+ *
+ * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
+ * the existing free-form arrow-key dragging behavior completely unchanged.
+ */
+export const closestDroppableKeyboardCoordinates = (event, { context, currentCoordinates }) => {
+  const { code } = event;
+  const isTab = code === 'Tab';
+  const isArrow =
+    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;
+
+  if (!isTab && !isArrow) {
+    return undefined;
+  }
+
+  if (isArrow) {
+    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });
+  }
+
+  event.preventDefault();
+
+  const { droppableRects, droppableContainers, collisionRect } = context;
+
+  if (!droppableRects || droppableRects.size === 0) {
+    return currentCoordinates;
+  }
+
+  const targets = [];
+
+  for (const [id, container] of droppableContainers) {
+    if (container?.disabled) continue;
+
+    const rect = droppableRects.get(id);
+
+    if (!rect) continue;
+
+    const center = {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+    // Land the dragged item's own top-left corner at the target's center-left point,
+    // rather than at the target's own top-left corner (avoids overshooting into a
+    // neighboring droppable when the target is much wider than the dragged item).
+    const dropPosition = {
+      x: rect.left,
+      y: rect.top + rect.height / 2,
+    };
+
+    targets.push({ id, rect, dropPosition, center });
+  }
+
+  if (targets.length === 0) {
+    return currentCoordinates;
+  }
+
+  const reverse = event.shiftKey;
+
+  targets.sort((a, b) => {
+    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
+    return a.center.x - b.center.x;
+  });
+
+  // Find the current target: whichever target's rect actually contains the dragged
+  // item's own center. This holds regardless of how the dragged item's size compares
+  // to the target's — a compact answer tile landed (per `dropPosition` above) at a much
+  // wider container's left edge is still contained within that container's rect.
+  // Comparing distances between reconstructed centers (as an earlier, buggy version of
+  // this same logic in match-list did) breaks down for exactly that shape: a
+  // reconstructed center can end up closer to a completely different droppable than to
+  // the one the item is actually sitting on, so the *next* press re-matches the wrong
+  // target and looks like it does nothing.
+  const draggedCenter = collisionRect
+    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }
+    : currentCoordinates;
+
+  let currentIndex = targets.findIndex(
+    (t) =>
+      draggedCenter.x >= t.rect.left &&
+      draggedCenter.x <= t.rect.right &&
+      draggedCenter.y >= t.rect.top &&
+      draggedCenter.y <= t.rect.bottom,
+  );
+
+  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly
+  // inside any target (e.g. mid-flight after a free arrow-key move).
+  if (currentIndex === -1) {
+    let minDist = Infinity;
+
+    for (let i = 0; i < targets.length; i++) {
+      const dist = distance(currentCoordinates, targets[i].dropPosition);
+
+      if (dist < minDist) {
+        minDist = dist;
+        currentIndex = i;
+      }
+    }
+  }
+
+  const nextIndex = reverse
+    ? (currentIndex - 1 + targets.length) % targets.length
+    : (currentIndex + 1) % targets.length;
+
+  return targets[nextIndex].dropPosition;
+};
+
+const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);

package/src/possible-response.jsx

@@ -40,6 +40,9 @@ const BaseContainer = styled('div')(() => ({
   '&.baseIncorrect': {
     border: `2px solid ${color.incorrect()} !important`,
   },
+  '&.selected': {
+    opacity: 0.7,
+  },
 }));
 
 const StyledSpan = styled(StaticHTMLSpan)(() => ({
@@ -50,7 +53,17 @@ const StyledSpan = styled(StaticHTMLSpan)(() => ({
   },
 }));
 
-const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {
+const PossibleResponse = ({
+  canDrag,
+  containerStyle,
+  data,
+  onDragBegin,
+  answerChoiceTransparency,
+  isOverlay,
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick,
+}) => {
   const rootRef = useRef(null);
   const longPressTimer = useRef(null);
 
@@ -64,6 +77,31 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
     disabled: !canDrag,
   });
 
+  const isSelected =
+    !!selectedResponse && selectedResponse.id === data.id && selectedResponse.containerIndex === data.containerIndex;
+
+  const handleClick = (e) => {
+    if (!canDrag) return;
+
+    e.stopPropagation();
+
+    const isPlaced = data.containerIndex !== undefined;
+
+    if (isSelected) {
+      // Clicking the already-selected tile again deselects it.
+      onSelectClick?.(data);
+    } else if (selectedResponse && isPlaced) {
+      // Something else is selected, and this tile is already inside a container:
+      // place the selection into that same container (a swap/insert, handled by the
+      // existing handleOnAnswerSelect logic).
+      onPlacementClick?.(data.containerIndex);
+    } else {
+      // Nothing selected yet, or this is a pool item (pool items are never placement
+      // targets — the pool itself, in possible-responses.jsx, is): select this tile.
+      onSelectClick?.(data);
+    }
+  };
+
   const handleTouchEnd = () => {
     clearTimeout(longPressTimer.current);
   };
@@ -113,6 +151,7 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
     answerChoiceTransparency: answerChoiceTransparency && !isDragging,
     [correctnessClass]: !!correctnessClass,
     textAnswerChoiceStyle: !containsImage && !isOverlay,
+    selected: isSelected && !isDragging,
   });
 
   const promptClassNames = classNames({ hiddenSpan: data.hidden });
@@ -125,6 +164,7 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
         rootRef.current = ref;
         setNodeRef(ref);
       }}
+      onClick={handleClick}
       {...listeners}
       {...attributes}
     >
@@ -141,12 +181,16 @@ PossibleResponse.propTypes = {
   onDragBegin: PropTypes.func.isRequired,
   answerChoiceTransparency: PropTypes.bool,
   isOverlay: PropTypes.bool,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 PossibleResponse.defaultProps = {
   containerStyle: {},
   answerChoiceTransparency: false,
   isOverlay: false,
+  selectedResponse: null,
 };
 
 export default PossibleResponse;

package/src/possible-responses.jsx

@@ -22,22 +22,40 @@ const PossibleResponses = ({
   customStyle,
   isVertical,
   minHeight,
-}) => (
-  <BaseContainer style={customStyle}>
-    <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
-      {(data || []).map((item) => (
-        <PossibleResponse
-          canDrag={canDrag}
-          key={item.id}
-          data={item}
-          onDragBegin={onDragBegin}
-          answerChoiceTransparency={answerChoiceTransparency}
-          containerStyle={{ margin: '4px' }}
-        />
-      ))}
-    </ICADroppablePlaceholder>
-  </BaseContainer>
-);
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick,
+}) => {
+  const handlePoolClick = () => {
+    if (!canDrag) return;
+
+    if (selectedResponse) {
+      // `undefined` containerIndex means "the pool" — root.jsx's placeSelectedResponse
+      // routes it to handleOnAnswerRemove.
+      onPlacementClick?.(undefined);
+    }
+  };
+
+  return (
+    <BaseContainer style={customStyle} onClick={handlePoolClick}>
+      <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
+        {(data || []).map((item) => (
+          <PossibleResponse
+            canDrag={canDrag}
+            key={item.id}
+            data={item}
+            onDragBegin={onDragBegin}
+            answerChoiceTransparency={answerChoiceTransparency}
+            containerStyle={{ margin: '4px' }}
+            selectedResponse={selectedResponse}
+            onSelectClick={onSelectClick}
+            onPlacementClick={onPlacementClick}
+          />
+        ))}
+      </ICADroppablePlaceholder>
+    </BaseContainer>
+  );
+};
 
 PossibleResponses.propTypes = {
   canDrag: PropTypes.bool.isRequired,
@@ -47,6 +65,9 @@ PossibleResponses.propTypes = {
   customStyle: PropTypes.object,
   isVertical: PropTypes.bool,
   minHeight: PropTypes.number,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default PossibleResponses;