I am also looking for a good solution to this.

Here is a collection of issues that have been created for this, for reference:

Per @mondaychen, here is @gaearon's suggestion from #335:

render() {
  let element = (
    <div>
      <input
        onMouseEnter={() => this.setState({ overInput: true }) }
        onMouseLeave={() => this.setState({ overInput: false }) }
      />
    </div>
  );

  if (this.state.overInput) {
    return element;
  }

  return this.props.connectDragSource(element);
}

The reason this doesn't work for me is that I have somewhat "unknown" children. The children are always forms but can be nested and used in other (non-draggable) situations. In my application, we could add onMouseEnter and onMouseLeave to each input, and keep overInput in our redux store to always know if an input is being hovered - but this will be overkill in any situation other than the sorting page.

@cscleison added this suggestion 11/11/16:

class RowDraggable extends React.Component {
    node = undefined;
    constructor(props, ctx) {
      super(props, ctx);

      this.onHoverOverInput = this.onHoverOverInput.bind(this);
      this.onHoverOutOfInput = this.onHoverOutOfInput.bind(this);

      this.state = {overInput: false};
    }
    componentWillUnmount() {
      this.detachEventListeners(this.node);
      this.node = undefined;
    }
    getInputElements(node) {
      return node
        ? Array.prototype.slice
            .call(node.getElementsByTagName('input'))
            .filter(e => !e.readOnly)
        : [];
    }
    onHoverOverInput() {
      this.setState({overInput: true});
    }
    onHoverOutOfInput() {
      this.setState({overInput: false});
    }
    detachEventListeners(node) {
      this.getInputElements(node).map(e => {
        e.removeEventListener('mouseleave', this.onHoverOutOfInput);
        e.removeEventListener('mouseenter', this.onHoverOverInput);
      });
    }
    render() {
      const { rowProps, isOver, connectDropTarget, connectDragSource
        } = this.props;
      const { overInput } = this.state;

      return <YourRow
            isOver={isOver}
            ref={instance => {
              this.detachEventListeners(this.node);
              this.node = findDOMNode(instance);

              if (!overInput) {
                connectDragSource(this.node);
                connectDropTarget(this.node);
                this.getInputElements(this.node).map(e => {
                  e.addEventListener('mouseenter', this.onHoverOverInput);
                });
              } else {
                this.getInputElements(this.node).map(e => {
                  e.addEventListener('mouseleave', this.onHoverOutOfInput);
                });
              }
            }}
          />;
    }
}

This seems like my best option so far. It seems very hacky but like it would work. Any other ideas?

Can't select input text in Chrome #438

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions