@pie-lib/mask-markup 3.0.14-next.35 → 3.0.14-next.42

package/src/components/__tests__/blank.test.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, fireEvent } from '@testing-library/react';
 import Blank from '../blank';
 
 // Mock @dnd-kit hooks to avoid DndContext requirement
 jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
+  useDraggable: jest.fn((options) => ({
+    attributes: options?.attributes || {},
     listeners: {},
     setNodeRef: jest.fn(),
     transform: null,
@@ -163,8 +163,9 @@ describe('Blank', () => {
         jest.runAllTimers();
       });
 
-      const wrapper = container.firstChild; // StyledContent
-      const chip = wrapper && wrapper.firstChild; // StyledChip (rootRef)
+      const wrapper = container.firstChild; // StyledContent (outer droppable/click node)
+      const dragHandle = wrapper && wrapper.firstChild; // StyledDragHandle (inner draggable node)
+      const chip = dragHandle && dragHandle.firstChild; // StyledChip (rootRef)
 
       // Width and height should include padding (24px) around measured content
       expect(chip.style.width).toBe('129px');
@@ -229,4 +230,184 @@ describe('Blank', () => {
       // Should show visual feedback for drag over
     });
   });
+
+  describe('click-to-select and click-to-place', () => {
+    const { useDroppable } = require('@dnd-kit/core');
+
+    afterEach(() => {
+      useDroppable.mockReturnValue({ setNodeRef: jest.fn(), isOver: false, active: null });
+    });
+
+    it('is a native tab stop (role=button, tabIndex=0) when empty and not disabled', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('role')).toBe('button');
+      expect(outer.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('is not a tab stop when it already holds a choice (relies on the inner draggable node)', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('role')).toBeNull();
+      expect(outer.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('is not a tab stop when disabled, even if empty', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} disabled={true} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('does not make the inner draggable node a second tab stop when the blank is empty', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} selectedItem={null} />);
+      const outer = container.firstChild;
+      const inner = outer.firstElementChild;
+
+      expect(outer.getAttribute('tabindex')).toBe('0');
+      // dragAttributes (which carries tabIndex) is only spread onto the inner node when
+      // it's the live tab stop (filled and not disabled) — otherwise it's omitted
+      // entirely, so no tabindex attribute is present at all here.
+      expect(inner.getAttribute('tabindex')).toBeNull();
+    });
+
+    it('makes the inner draggable node the tab stop when the blank is filled and not disabled', () => {
+      const { container } = render(<Blank {...defaultProps} selectedItem={null} />);
+      const outer = container.firstChild;
+      const inner = outer.firstElementChild;
+
+      expect(inner.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('selects this blank\'s content on click when nothing else is selected', () => {
+      const onSelectClick = jest.fn();
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={null} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).toHaveBeenCalledWith({
+        id: '3',
+        choice: defaultProps.choice,
+        instanceId: undefined,
+        fromChoice: false,
+        type: 'MaskBlank',
+      });
+    });
+
+    it('toggles off when clicking its own already-selected content', () => {
+      const onSelectClick = jest.fn();
+      const selectedItem = { id: '3', choice: defaultProps.choice, instanceId: undefined, fromChoice: false, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).toHaveBeenCalledWith(selectedItem);
+    });
+
+    it('places the current selection here when clicking a different, already-filled blank', () => {
+      const onPlacementClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onPlacementClick).toHaveBeenCalledWith('3');
+    });
+
+    it('places the current selection here on Space/Enter when empty', () => {
+      const onPlacementClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" choice={undefined} selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.keyDown(container.firstChild, { code: 'Space' });
+
+      expect(onPlacementClick).toHaveBeenCalledWith('3');
+    });
+
+    it('does nothing on click when empty and nothing is selected', () => {
+      const onSelectClick = jest.fn();
+      const onPlacementClick = jest.fn();
+      const { container } = render(
+        <Blank {...defaultProps} choice={undefined} selectedItem={null} onSelectClick={onSelectClick} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).not.toHaveBeenCalled();
+      expect(onPlacementClick).not.toHaveBeenCalled();
+    });
+
+    it('does nothing on click when disabled', () => {
+      const onSelectClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} disabled={true} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).not.toHaveBeenCalled();
+    });
+
+    it('folds click-selection hover into the same highlight a live drag-over shows', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={selectedItem} />);
+      const outer = container.firstChild;
+
+      fireEvent.mouseEnter(outer);
+      // The "over" prop drives the same CSS the real isOver-driven highlight uses —
+      // assert via the rendered chip's className, since StyledContent forwards `over`.
+      // Re-render check: BlankContent receives the folded isOver as true while hovered
+      // with a selection active — verified indirectly via the "over" chip class it sets.
+      expect(screen.getByText('Cow').closest('.over')).not.toBeNull();
+
+      fireEvent.mouseLeave(outer);
+      expect(screen.getByText('Cow').closest('.over')).toBeNull();
+    });
+
+    it('shows a pointer cursor on hover when something is selected', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={selectedItem} />);
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeDefined();
+      expect(hoverRule).toMatch(/cursor:\s*pointer/);
+    });
+
+    it('keeps the default cursor on hover when nothing is selected', () => {
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={null} />);
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeUndefined();
+    });
+
+    it('keeps the default cursor on hover when disabled, even with something selected', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" disabled={true} selectedItem={selectedItem} />,
+      );
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeUndefined();
+    });
+  });
 });

package/src/components/blank.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { renderMath } from '@pie-lib/math-rendering';
 import debug from 'debug';
 import { useDraggable, useDroppable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
 import { styled } from '@mui/material/styles';
 import Chip from '@mui/material/Chip';
 import classnames from 'classnames';
@@ -12,22 +11,32 @@ import { grey } from '@mui/material/colors';
 
 const log = debug('pie-lib:mask-markup:blank');
 
-const StyledContent = styled('span')(({ dragged, over }) => ({
+const StyledContent = styled('span')(({ dragged, over, selected, showsPointerCursor }) => ({
   border: `solid 0px ${color.primary()}`,
   minWidth: '200px',
-  touchAction: 'none',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   opacity: 1,
+  cursor: 'default',
   ...(over && {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   }),
-  ...(dragged && {
+  ...((dragged || selected) && {
     opacity: 0.5,
   }),
+  ...(showsPointerCursor && {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  }),
 }));
 
+const StyledDragHandle = styled('span')({
+  display: 'inline-flex',
+  touchAction: 'none',
+});
+
 const StyledChip = styled(Chip)(() => ({
   backgroundColor: color.background(),
   border: `2px dashed ${color.text()}`,
@@ -341,23 +350,40 @@ function DragDropBlank({
   emptyResponseAreaWidth,
   emptyResponseAreaHeight,
   instanceId,
+  selectedItem,
+  onSelectClick,
+  onPlacementClick,
 }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const dragData = {
+    id,
+    choice,
+    instanceId,
+    fromChoice: false, // This is from a blank, not from choices
+    type: 'MaskBlank',
+  };
+
   // Setup draggable functionality
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
     setNodeRef: setDragNodeRef,
-    transform,
     isDragging,
   } = useDraggable({
     id: `mask-blank-drag-${id}`,
     disabled: disabled || !choice,
-    data: {
-      id: id,
-      choice: choice,
-      instanceId: instanceId,
-      fromChoice: false, // This is from a blank, not from choices
-      type: 'MaskBlank',
+    data: dragData,
+    // dnd-kit's own `attributes` default tabIndex to 0 unconditionally, even when
+    // `disabled` — so a non-draggable (empty) blank stays a native Tab stop of its own.
+    // For a drop-zone (droppable blank), that duplicates the outer wrapper's own tab stop
+    // (see isNativeTabStop below) at the exact same position, so Tab/Shift+Tab has to
+    // pass through both to move anywhere visibly, making every other press look like a
+    // no-op. Drop it out of the tab order here whenever it isn't independently
+    // reachable/interactive, leaving the outer wrapper (for an empty blank) or
+    // nothing (for a disabled blank) as the sole stop.
+    attributes: {
+      tabIndex: choice && !disabled ? 0 : -1,
     },
   });
 
@@ -375,38 +401,82 @@ function DragDropBlank({
     },
   });
 
-  // Combine refs for both drag and drop
-  const setNodeRef = (node) => {
-    setDragNodeRef(node);
-    setDropNodeRef(node);
+  const isSelected = !!selectedItem && selectedItem.fromChoice === false && selectedItem.id === id;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    if (isSelected) {
+      // Clicking this blank's already-selected content again deselects it.
+      onSelectClick?.(dragData);
+    } else if (selectedItem) {
+      // Something else is selected — place it here, whether this blank is currently
+      // empty or already filled (the same commitPlacement logic drag-and-drop uses).
+      onPlacementClick?.(id);
+    } else if (choice) {
+      // Nothing selected yet, and this blank holds an answer — select it for moving
+      // elsewhere, the same way Tab+Space/Enter does.
+      onSelectClick?.(dragData);
+    }
+
+    // Empty blank clicked with nothing selected: nothing to place or select.
   };
 
-  const style = {
-    transform: CSS.Translate.toString(transform),
+  // An empty blank isn't draggable, so dnd-kit's own attributes (only applied to the
+  // inner node, and only when draggable) never make it tabbable — this outer wrapper
+  // needs its own focus/activation handling so "select a choice, then Tab to a blank
+  // and press Space/Enter" works even when the blank is empty. This is independent of,
+  // and doesn't change, the existing in-drag Tab-cycling (that's driven by an active
+  // dnd-kit drag, not native focus).
+  //
+  // Only made a native Tab stop when NOT draggable (i.e. empty): when the blank is
+  // filled, the inner node is already independently tabbable via dnd-kit's own
+  // attributes for the existing pick-up-to-move gesture, and adding a second, outer Tab
+  // stop for the same visual chip would add an extra stop to the existing Tab order —
+  // the same double-tab-stop bug already found and fixed once in match-list/image-
+  // cloze-association's equivalent code.
+  const isNativeTabStop = !choice && !disabled;
+  const isInnerDraggable = !!choice && !disabled;
+
+  const handleKeyDown = (e) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
   };
 
+  const hasSelection = !!selectedItem;
+  const showsHoverEffect = isOver || (hasSelection && isHovered && !disabled);
+
   return (
     <StyledContent
-      ref={setNodeRef}
-      style={style}
+      ref={setDropNodeRef}
+      role={isNativeTabStop ? 'button' : undefined}
+      tabIndex={isNativeTabStop ? 0 : -1}
+      onClick={handleClick}
+      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       dragged={isDragging}
-      over={isOver}
-      {...dragAttributes}
-      {...dragListeners}
+      over={showsHoverEffect}
+      selected={isSelected}
+      showsPointerCursor={hasSelection && !disabled}
     >
-      <BlankContent
-        id={id}
-        disabled={disabled}
-        duplicates={duplicates}
-        choice={choice}
-        isOver={isOver}
-        dragItem={dragItem?.data?.current}
-        correct={correct}
-        onChange={onChange}
-        emptyResponseAreaWidth={emptyResponseAreaWidth}
-        emptyResponseAreaHeight={emptyResponseAreaHeight}
-        instanceId={instanceId}
-      />
+      <StyledDragHandle ref={setDragNodeRef} {...(isInnerDraggable ? dragAttributes : {})} {...dragListeners}>
+        <BlankContent
+          id={id}
+          disabled={disabled}
+          duplicates={duplicates}
+          choice={choice}
+          isOver={showsHoverEffect}
+          dragItem={dragItem?.data?.current}
+          correct={correct}
+          onChange={onChange}
+          emptyResponseAreaWidth={emptyResponseAreaWidth}
+          emptyResponseAreaHeight={emptyResponseAreaHeight}
+          instanceId={instanceId}
+        />
+      </StyledDragHandle>
     </StyledContent>
   );
 }
@@ -426,6 +496,9 @@ DragDropBlank.propTypes = {
   emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   instanceId: PropTypes.string,
+  selectedItem: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default DragDropBlank;

package/src/drag-in-the-blank.jsx

@@ -6,6 +6,13 @@ import Choices from './choices';
 import Choice from './choices/choice';
 import Blank from './components/blank';
 import { withMask } from './with-mask';
+import { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';
+
+// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
+// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
+// click-to-select/click-to-place handlers below, or it would immediately reopen or
+// re-trigger a selection for a drag that just completed.
+const CLICK_AFTER_DRAG_GUARD_MS = 250;
 
 const Masked = withMask('blank', (props) => (node, data, onChange) => {
   const dataset = node.data?.dataset || {};
@@ -21,6 +28,9 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
       emptyResponseAreaHeight,
       instanceId,
       isDragging,
+      selectedItem,
+      onSelectClick,
+      onPlacementClick,
     } = props;
     const choiceId = showCorrectAnswer ? correctResponse[dataset.id] : data[dataset.id];
     // eslint-disable-next-line react/prop-types
@@ -47,6 +57,9 @@ const Masked = withMask('blank', (props) => (node, data, onChange) => {
         }}
         instanceId={instanceId}
         isDragging={isDragging}
+        selectedItem={selectedItem}
+        onSelectClick={onSelectClick}
+        onPlacementClick={onPlacementClick}
       />
     );
   }
@@ -58,7 +71,9 @@ export default class DragInTheBlank extends React.Component {
     this.state = {
       activeDragItem: null,
       dropAnimation: undefined,
+      selectedItem: null,
     };
+    this.lastDragEndAt = 0;
   }
 
   static propTypes = {
@@ -89,6 +104,7 @@ export default class DragInTheBlank extends React.Component {
       this.setState({
         activeDragItem: active.data.current,
         dropAnimation: undefined, // default during drag
+        selectedItem: active.data.current,
       });
     }
   };
@@ -110,9 +126,40 @@ export default class DragInTheBlank extends React.Component {
     return null;
   };
 
+  // Shared placement logic for both the drag-end path and the click-to-place path, so
+  // neither reimplements the other's mutation rules.
+  //
+  // `targetId === undefined` means "the choice board" — placing there removes the item
+  // from wherever it currently is (mirroring image-cloze-association's
+  // `containerIndex === undefined` convention for its own choices pool).
+  commitPlacement = (draggedItem, targetId) => {
+    const { onChange, value } = this.props;
+
+    if (!onChange) return;
+
+    if (targetId === undefined) {
+      if (!draggedItem.fromChoice && draggedItem.id) {
+        const newValue = { ...value };
+        delete newValue[draggedItem.id];
+        onChange(newValue);
+      }
+      return;
+    }
+
+    if (draggedItem.fromChoice === true) {
+      const newValue = { ...value };
+      newValue[targetId] = draggedItem.choice.id;
+      onChange(newValue);
+    } else if (draggedItem.id && draggedItem.id !== targetId) {
+      const newValue = { ...value };
+      newValue[targetId] = draggedItem.choice.id;
+      delete newValue[draggedItem.id];
+      onChange(newValue);
+    }
+  };
+
   handleDragEnd = (event) => {
     const { active, over } = event;
-    const { onChange, value } = this.props;
 
     const draggedData = active?.data?.current;
     const dropData = over?.data?.current;
@@ -126,29 +173,83 @@ export default class DragInTheBlank extends React.Component {
       dropAnimation: isValidDrop ? null : undefined,
     });
 
-    if (!isValidDrop || !onChange) return;
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
 
-    const draggedItem = draggedData;
-    const targetId = dropData.id;
+    if (!isValidDrop) return;
 
-    if (dropData.toChoiceBoard === true) {
-      if (!draggedItem.fromChoice && draggedItem.id) {
-        const newValue = { ...value };
-        delete newValue[draggedItem.id];
-        onChange(newValue);
-      }
-    } else if (draggedItem.fromChoice === true) {
-      if (targetId && targetId !== 'drag-in-the-blank-droppable') {
-        const newValue = { ...value };
-        newValue[targetId] = draggedItem.choice.id;
-        onChange(newValue);
-      }
-    } else if (draggedItem.id && draggedItem.id !== targetId) {
-      const newValue = { ...value };
-      newValue[targetId] = draggedItem.choice.id;
-      delete newValue[draggedItem.id];
-      onChange(newValue);
-    }
+    const targetId = dropData.toChoiceBoard === true ? undefined : dropData.id;
+
+    this.commitPlacement(draggedData, targetId);
+  };
+
+  onDragCancel = () => {
+    this.setState({ activeDragItem: null, dropAnimation: undefined });
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
+  };
+
+  isSameItem = (a, b) => {
+    if (!a || !b || a.fromChoice !== b.fromChoice) return false;
+    return a.fromChoice ? a.choice.id === b.choice.id : a.id === b.id;
+  };
+
+  // Click-to-select semantics: selecting the currently-selected item again clears the
+  // selection instead of re-selecting it.
+  toggleItemSelection = (data) => {
+    this.setState((state) => ({
+      selectedItem: this.isSameItem(state.selectedItem, data) ? null : data,
+    }));
+  };
+
+  cancelSelection = () => {
+    this.setState({ selectedItem: null });
+  };
+
+  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
+  // click completes the placement below, it needs to be cleanly ended — otherwise
+  // dnd-kit would still think a drag is in progress. Escape is already configured as
+  // this sensor's cancel key (see the keyboardCodes passed to DragProvider below), and
+  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
+  // listener is reached from outside its sensor.
+  //
+  // Only dispatch when a drag is actually live — this is a synthetic Escape keydown on
+  // `document`, so an unconditional dispatch would also be observed by any other
+  // document-level Escape listener (host player modals/dialogs, or another mounted
+  // instance of this same component) even when nothing here actually needed cancelling.
+  endAnyLiveKeyboardDrag = () => {
+    if (!this.state.activeDragItem) return;
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));
+  };
+
+  placeSelectedItem = (targetId) => {
+    const { selectedItem } = this.state;
+
+    if (!selectedItem) return;
+
+    this.commitPlacement(selectedItem, targetId);
+    this.cancelSelection();
+    this.endAnyLiveKeyboardDrag();
+  };
+
+  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;
+
+  onItemClick = (data) => {
+    if (this.isClickSoonAfterDragEnd()) return;
+
+    // End any still-live keyboard drag BEFORE toggling the new selection: ending it
+    // also cancels the current selection as a side effect (see onDragCancel above), so
+    // doing it before — not after — lets this click's own selection be the one that
+    // sticks.
+    this.endAnyLiveKeyboardDrag();
+    this.toggleItemSelection(data);
+  };
+
+  onPlacementClick = (targetId) => {
+    if (this.isClickSoonAfterDragEnd()) return;
+
+    this.placeSelectedItem(targetId);
   };
 
   getPositionDirection = (choicePosition) => {
@@ -203,7 +304,10 @@ export default class DragInTheBlank extends React.Component {
       <DragProvider
         onDragStart={this.handleDragStart}
         onDragEnd={this.handleDragEnd}
+        onDragCancel={this.onDragCancel}
         collisionDetection={rectIntersection}
+        keyboardCoordinateGetter={closestDroppableKeyboardCoordinates}
+        keyboardCodes={{ start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'] }}
       >
         <div ref={(ref) => (this.rootRef = ref)} style={style}>
           <Choices
@@ -213,6 +317,9 @@ export default class DragInTheBlank extends React.Component {
             duplicates={duplicates}
             disabled={disabled}
             instanceId={instanceId}
+            selectedItem={this.state.selectedItem}
+            onSelectClick={this.onItemClick}
+            onPlacementClick={this.onPlacementClick}
           />
           <Masked
             elementType="drag-in-the-blank"
@@ -230,6 +337,9 @@ export default class DragInTheBlank extends React.Component {
             emptyResponseAreaHeight={emptyResponseAreaHeight}
             instanceId={instanceId}
             isDragging={!!this.state.activeDragItem}
+            selectedItem={this.state.selectedItem}
+            onSelectClick={this.onItemClick}
+            onPlacementClick={this.onPlacementClick}
           />
           <DragOverlay style={{ pointerEvents: 'none' }} dropAnimation={this.state.dropAnimation}>
             {this.renderDragOverlay()}