React-beautiful-dnd: Can't use spacebar in inputs inside a Draggable

[hql287]

Bug

Expected behaviour

Should be able to use spacebar as other characters

Actual behaviour

Looks like spacebar is being reserved as a shortcut.

Steps to reproduce

• Create an input inside a Draggable
• Add patch

<input onMouseDown={e => e.stopPropagation()} />

• Start typing, you'll notice the spacebar won't register

Browser version

electron v1.7.9
react v16.0.0
react-beautiful-dnd v2.5.3

Demo

_withDraggable HOC

// Libs
import React from 'react';
import {Draggable} from 'react-beautiful-dnd';

const _withDraggable = ComposedComponent => props => (
  <Draggable draggableId={props.item.id}>
    {(provided, snapshot) => {
      const draggableStyle = {
        ...provided.draggableStyle,
        margin: '0 0 14px 0',
      };
      return (
        <div>
          <div
            ref={provided.innerRef}
            style={draggableStyle}
            {...provided.dragHandleProps}>
            <ComposedComponent {...props} />
          </div>
          {provided.placeholder}
        </div>
      );
    }}
  </Draggable>
);

export default _withDraggable;

[bradleyayers]

This is similar to https://github.com/atlassian/react-beautiful-dnd/issues/61#issuecomment-325068145, I just pass a patched onKeyDown e.g.

onKeyDown: e => {
  if (dragHandleProps && e.target.nodeName !== "INPUT") {
    dragHandleProps.onKeyDown(e);
  }
}

[hql287]

Thanks @bradleyayers. I patched the HOC as you suggested and it's working now.
Here's the reference for those who might run into this.

// Libs
import React from 'react';
import {Draggable} from 'react-beautiful-dnd';

const _withDraggable = ComposedComponent => props => (
  <Draggable draggableId={props.item.id}>
    {(provided, snapshot) => {
      // Patched onMouseDown, make inputs selectable
      const onMouseDown = event => {
        if (event.target.nodeName === 'INPUT') {
          return;
        }
        provided.dragHandleProps.onMouseDown(event);
      };
      // Patched onKeyDown handler, make typing in inputs
      // work as expected. For example, spacebar can be used
      // as normal characters instead of a shortcut.
      const onKeyDown = event => {
        if (event.target.nodeName === 'INPUT') {
          return;
        }
        provided.dragHandleProps.onKeyDown(event);
      };
      // patching drag handle props
      const patched = {
        ...provided.dragHandleProps,
        onMouseDown,
        onKeyDown,
      };
      // Draggable Style
      const draggableStyle = {
        ...provided.draggableStyle,
        margin: '0 0 14px 0',
      };
      return (
        <div>
          <div
            ref={provided.innerRef}
            style={draggableStyle}
            {...provided.dragHandleProps}
            {...patched}>
            <ComposedComponent {...props} />
          </div>
          {provided.placeholder}
        </div>
      );
    }}
  </Draggable>
);

export default _withDraggable;

[bradleyayers]

I think I'd like this behaviour built into the library. It seems to be a common gotcha, and I can't think of any counter examples where you actually want the user wants clicks on input/select/textarea/[contenteditable]/button to initiate drag behaviour. In those scenarios I'd recommend just overlaying the input with a non-interactive element that can act as the target for the event.

[alexreardon]

I have been thinking the same thing @bradleyayers. For now we will just call it out - but it could be handled in a nicer way. Being un opinionated has advantages though as it lets people craft the interactions how they like

[alexreardon]

We call this out in the docs: https://github.com/atlassian/react-beautiful-dnd#interactive-child-elements-within-a-draggable

[hql287]

@alexreardon Should we add an example for onKeyDown event in this section as well? Because it can be not obvious for new users at first. I can make an PR on this.

[alexreardon]

That sounds great
On Thu, 26 Oct 2017 at 1:30 pm, Hung Q. Le [e-mail] wrote:

@alexreardon https://github.com/alexreardon Should we add an example
for onKeyDown event in this section as well? Because it can be not
obvious for new users at first. I can make an PR on this.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/149#issuecomment-339531713,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7TfEi2DDgwu1yq-Spv-z7j9D-DzKks5sv-64gaJpZM4QFmdn
.

[hql287]

Cool, just Added patching inputs inside Draggable example PR.